尺寸之间,无穷世界。手机作为移动设备,屏幕空间有限,要想在手机上展示丰富的内容,就要提供多视图,大尺寸。为了避免程序页面跳转混乱,就需要视图导航来解决此问题。

一、模态视图

模态视图:不属于导航结构的主要分支,是为了打断主视图显示出来提供用户交互,如在登录页面提供注册接口,注册页面就是模态视图。模态视图通常由下往上滑入,由上往下滑出。当然,也可以使用动画来改变其模式。通常会用到:

- (void)presentViewController:animated:completion:

- (void)dismissViewControllerAnimated:completion:

实现步骤:

1、新建Single ViewController 工程“模态视图”

2、在故事版中布局好登录界面和注册界面

3、按着Control键点击登录页面的注册拖拽到注册页面,在弹出的对话框里选择present modally

4、传值是通过Notification实现的

 

ios 改变视图层级 iphone视图_UI框架

ios 改变视图层级 iphone视图_视图切换_02

ios 改变视图层级 iphone视图_iOS_03

二、标签导航

标签视图:标签视图是为了组织平衡级别的页面的,页面之间没有太大联系,但属于一类。常见的入微信,微博,扣扣等;使用UITabBarController实现。

设置选中颜色和图片:

//选中背景图片
UIImage *image = [self.tabBarItem.selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.tabBarItem.selectedImage = image;
//选中标题颜色
[self.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor redColor]} forState:UIControlStateSelected];

步骤:

1、新建Tabbed Application

2、新建相关ViewController

3、按着Control键,点击Tab BarController拖拽到新的ViewController上,在弹出的对话框里选择ViewControllers

4、设置Title和Image即可

 

ios 改变视图层级 iphone视图_iOS_04

ios 改变视图层级 iphone视图_视图导航_05

三、树形导航

树形视图:用于组织具有层级关系的页面视图。使用UINavigationController实现。

步骤:

1、新建Single View Application

2、删除生成的ViewControllerScene,从视图列表中拖一个Navigation Controller到故事版,系统会自带一个RootViewController的情景 是TableViewController,把ViewController.h继承UITableViewController

3、添加一个新的视图DetailViewController,设计界面

4、按着Control键,点RootViewController上的单元格的“>”到DetailViewController在弹出的对话框里选择show

ViewController.m


//
//  ViewController.m
//  树形导航
//
//  Created by LiLeo on 16/7/5.
//  Copyright © 2016年 LeoLi. All rights reserved.
//

#import "ViewController.h"
#import "DetailViewController.h"

@interface ViewController ()

@property (nonatomic, strong) NSArray * contents;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.title = @"字母序列";
    //初始化数据
    _contents = [NSArray arrayWithObjects:@"a", @"b", @"c", @"d", @"a", @"b", @"c", @"d", @"a", @"b", @"c", @"d", @"a", @"b", @"c", @"d", nil];
    //设置数据源和代理
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - tableView要实现的方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [_contents count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"CellIdentifier" forIndexPath:indexPath];
    cell.textLabel.text = [_contents objectAtIndex:[indexPath row]];
    return cell;
}

#pragma mark - KVC的方式传值
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    DetailViewController * destination = segue.destinationViewController;
    destination.title = @"序列展示";
    NSInteger row = [[self.tableView indexPathForSelectedRow] row];
    [destination setValue:_contents[row] forKey:@"detail"];
}

@end



DetailViewController.m 


//
//  DetailViewController.m
//  树形导航
//
//  Created by LiLeo on 16/7/5.
//  Copyright © 2016年 LeoLi. All rights reserved.
//

#import "DetailViewController.h"

@interface DetailViewController ()
@property (weak, nonatomic) IBOutlet UILabel *detailLabel;

@property (copy, nonatomic) NSString * detail;

@end

@implementation DetailViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    _detailLabel.text = _detail;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end


ios 改变视图层级 iphone视图_iOS_06



ios 改变视图层级 iphone视图_视图切换_07

ios 改变视图层级 iphone视图_iOS_08

          

四、平铺导航

平铺导航:各个页面没有直接联系,与标签导航不同的是主要通过左右滑动进行页面的操作。通过,UIScrollView和UIPageControl配合实现

步骤:

1、新建Single View Application

2、在故事版中添加ScrollView 和 PageControl

3、添加各个页面并设置Storyboard ID

4、在ViewController.m中加载各个页面 并实现滑动和pagecontrol的联动

ViewController.m

//
//  ViewController.m
//  平铺导航
//
//  Created by LiLeo on 16/7/5.
//  Copyright © 2016年 LeoLi. All rights reserved.
//

#import "ViewController.h"

@interface ViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

@property (strong, nonatomic) UIView * page1;
@property (strong, nonatomic) UIView * page2;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    _scrollView.delegate = self;
    _scrollView.frame = [UIScreen mainScreen].bounds;
    CGSize size = [[UIScreen mainScreen] bounds].size;
    _scrollView.contentSize = CGSizeMake(size.width * 2, size.height);
    
    UIStoryboard * mainStoryBoard = self.storyboard;
    UIViewController * firstView = [mainStoryBoard instantiateViewControllerWithIdentifier:@"FirstViewControllerScene"];
    _page1 = firstView.view;
    
    UIViewController * secondView = [mainStoryBoard instantiateViewControllerWithIdentifier:@"SecondViewControllerScene"];
    _page2 = secondView.view;
    
    _page1.frame = CGRectMake(0, 0, size.width, size.height);
    _page2.frame = CGRectMake(size.width, 0, size.width, size.height);
    
    [_scrollView addSubview:_page1];
    [_scrollView addSubview:_page2];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - UIScrollView里的方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGPoint offset = scrollView.contentOffset;
    CGSize size = [[UIScreen mainScreen] bounds].size;
    _pageControl.currentPage = offset.x / size.width;
}

#pragma mark - UIPageControl的响应时间

- (IBAction)onPageChanged:(id)sender {
    NSInteger index = _pageControl.currentPage;
    CGSize size = [[UIScreen mainScreen] bounds].size;
    _scrollView.contentOffset = CGPointMake(size.width * index, 0);
}

@end


ios 改变视图层级 iphone视图_视图切换_09

ios 改变视图层级 iphone视图_UI框架_10