导航控制器

![Uploading 屏幕快照 2016-11-24 下午10.03.06_201924.png . . .]

1. 基本概念

屏幕快照 2016-11-24 下午10.02.16.png
  • 导航栏
  • 导航元素项:显示在导航栏上的内容/按钮


    屏幕快照 2016-11-24 下午10.03.06.png

2. 手动创建导航控制器

首先在info.plist中删除 main storyboard文件

新建一个类,命名为VCRoot. 并在AppDelegate.m中import这个类的头文件。

在AppDelegate.m中创建根视图控制器和导航控制器:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #bb2ca2}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s4 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s6 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s7 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s8 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    
    self.window=[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    
    //创建一个根视图控制器
    VCRoot* root=[[VCRoot alloc]init];
    
    //创建导航控制器
    //导航控制器主要用来管理多个视图控制器的切换
    //通过层级的方式来管理
    //创建控制器时,一定要有一个根视图控制器
    //参数1:作为导航控制器的根视图控制器
    UINavigationController* nav=[[UINavigationController alloc]initWithRootViewController:root];
    //将window的根视图设置为导航控制器
    self.window.rootViewController=nav;
    
    [self.window makeKeyAndVisible];
    
    
    return YES;
}

这样运行的结果是一个空的导航控制器:(灰色为空的导航控制器的导航栏,黑色为根视图控制器)

屏幕快照 2016-11-27 下午8.53.03.png

在VCRoot.m中添加:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #d12f1b}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s5 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s6 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s7 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s8 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s9 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s10 {font-variant-ligatures: no-common-ligatures; color: #272ad8}span.s11 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.view.backgroundColor=[UIColor yellowColor];
    //设置导航栏的标题文字
    self.title=@"根视图";
    //设置导航元素项的标题
    //如果没有设置这项内容,系统会将self.title作为导航标题
    self.navigationItem.title=@"Title";
    
    //创建一个导航栏左侧按钮
    UIBarButtonItem* leftBtn=[[UIBarButtonItem alloc]initWithTitle:@"left" style:UIBarButtonItemStyleDone target:self action:@selector(pressLeft)];
    
    //将导航元素项的左侧按钮赋值
    self.navigationItem.leftBarButtonItem=leftBtn;
    
    
    //创建一个右侧按钮
    UIBarButtonItem* rightBtn=[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(pressRight)];
    self.navigationItem.rightBarButtonItem=rightBtn;
    
    
    
    //如果想多加几个按钮
    //先创建一个标签
    UILabel* label=[[UILabel alloc]initWithFrame:CGRectMake(10, 10, 50, 40)];
    label.text=@"test";
    label.textAlignment=NSTextAlignmentCenter;
    label.textColor= [UIColor blueColor];
    
    //将任何类型的控件添加到导航按钮的方法
    UIBarButtonItem* item03=[[UIBarButtonItem alloc]initWithCustomView:label];
    
    //创建按钮数组
    NSArray* arrayBtn=[NSArray arrayWithObjects:rightBtn,item03,nil];
    
    //将右侧按钮数组赋值
    self.navigationItem.rightBarButtonItems=arrayBtn;
    
}

- (void)pressLeft
{
    NSLog(@"左侧按钮按下");
}

- (void)pressRight
{
    NSLog(@"右侧按钮按下");
}
屏幕快照 2016-11-28 下午10.06.36.png
屏幕快照 2016-11-28 下午10.09.48.png

3. 导航控制器的切换

屏幕快照 2016-11-28 下午10.11.43.png

需要新建三个视图:

屏幕快照 2016-11-28 下午10.31.42.png

同样先在APPDelegate.m中导入VCRoot.h,并创建对象:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #bb2ca2}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s4 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s6 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s7 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s8 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    
    self.window=[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    
    //创建一个根视图控制器
    VCRoot* root=[[VCRoot alloc]init];
    
    //创建导航控制器
    //导航控制器主要用来管理多个视图控制器的切换
    //通过层级的方式来管理
    //创建控制器时,一定要有一个根视图控制器
    //参数1:作为导航控制器的根视图控制器
    UINavigationController* nav=[[UINavigationController alloc]initWithRootViewController:root];
    //将window的根视图设置为导航控制器
    self.window.rootViewController=nav;
    
    [self.window makeKeyAndVisible];
    
    
    return YES;
}

然后在VCRoot中创建根视图,再创建第二个视图对象,并通过根视图的按钮显示第二个视图对象。
首先在VCRoot.m中引入VCSecond.h,并添加代码:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s6 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}span.s7 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s8 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s9 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s10 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    //设置导航栏透明度
    //IOS7之后默认透明度为YES
    self.navigationController.navigationBar.translucent=NO;
    //设置导航风格
    self.navigationController.navigationBar.barStyle=UIBarStyleDefault;
    
    self.view.backgroundColor=[UIColor blueColor];
    
    self.title=@"根视图";
    UIBarButtonItem* next=[[UIBarButtonItem alloc]initWithTitle:@"next" style:UIBarButtonItemStylePlain target:self action:@selector(pressNext)];
    
    self.navigationItem.rightBarButtonItem=next;
    
}

之后实现next按钮事件函数:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s5 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s6 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s7 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s8 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}span.s9 {font-variant-ligatures: no-common-ligatures; color: #703daa}

-(void)pressNext
{
    //创建新的视图控制器
    VCSecond* vcSecond = [[VCSecond alloc]init];
    //使用当前的视图控制器的导航控制器对象
    //堆栈的方式来管理 栈顶显示VCSecond
    //返回键自动添加
    [self.navigationController pushViewController:vcSecond animated:YES];
}

运行效果:

屏幕快照 2016-11-28 下午10.30.59.png
屏幕快照 2016-11-28 下午10.30.54.png

注意 第二个视图上的返回按钮自动生成。视图控制器之间的关系是堆栈中元素的关系。

再加入第三级视图。
同样,在VCSecond.m中:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #d12f1b}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #bb2ca2}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p8 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #78492a}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s5 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s6 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s7 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s8 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s9 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s10 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s11 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s12 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}

#import "VCSecond.h"
#import "VCThird.h"

@interface VCSecond ()

@end

@implementation VCSecond

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.view.backgroundColor=[UIColor greenColor];
    self.title=@"视图二";
    
    UIBarButtonItem* btnNext=[[UIBarButtonItem alloc]initWithTitle:@"第三级" style:UIBarButtonItemStylePlain target:self action:@selector(pressNext)];
    
    self.navigationItem.rightBarButtonItem=btnNext;
}

-(void)pressNext
{
    //创建新的视图控制器
    VCThird* vcThird = [[VCThird alloc]init];
    //使用当前的视图控制器的导航控制器对象
    //堆栈的方式来管理 栈顶显示VCSecond
    //返回键自动添加
    [self.navigationController pushViewController:vcThird animated:YES];
}

最后在VCThird.m中改变下颜色和标题:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s5 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s6 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s7 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    
    self.view.backgroundColor=[UIColor orangeColor];
    self.title=@"第三级";
}
屏幕快照 2016-11-28 下午10.39.13.png
屏幕快照 2016-11-28 下午10.39.20.png

现在每一级视图的左侧按钮返回键是自己生成的,那如果想自己创建一个左侧按钮怎么做呢?

自己创建一个左侧按钮,显示出来的就是自己创建的新按钮。在VCThird.m中创建:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}span.s1 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s2 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s3 {font-variant-ligatures: no-common-ligatures}span.s4 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s5 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}

    UIBarButtonItem* btnLeft=[[UIBarButtonItem alloc]initWithTitle:@"back" style:UIBarButtonItemStylePlain target:self action:@selector(pressBack)];
    
    self.navigationItem.leftBarButtonItem=btnLeft;

并实现事件函数:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #703daa}

-(void)pressBack
{
    [self.navigationController popViewControllerAnimated:YES];
}

即可。

总结

导航控制器的管理就是一个堆栈,显示出来的永远是栈顶的元素,如果想显示下一级,就将下一级push进栈,这样新的导航控制器就在栈顶,所以被显示出来了。如果想back回上一级,就pop当前控制器,这样上一级就重新成了栈顶,从而被显示出来。

你可能感兴趣的:(导航控制器)