UI学习——导航控制器

---

一、导航控制器（UINavigationController）基础

1.基本概念

导航控制器（UINavigationController）是一种常用的用户界面控制器，它允许用户在应用程序的不同视图控制器之间进行导航。导航控制器通常用于创建层次化的用户界面，其中用户可以通过向前和向后导航来访问应用程序的不同屏幕。

导航控制器通常包含以下几个基本元素：

根视图控制器（Root View Controller）：导航控制器的第一个视图控制器，通常是应用程序的主屏幕。
导航栏（Navigation Bar）：用于显示当前视图控制器的标题以及在导航栈中的位置。
工具栏（Toolbar）：可选的，用于显示当前视图控制器的工具按钮。
返回按钮（BackButton）：用于在导航栏中返回上一个视图控制器。

2.基本用法

首先我们创建一个根视图控制器类

接着我们在SceneDelegate.m文件下创建一个根视图控制器对象和导航控制器对象

//创建控制器时，一定要有一个根视图控制器
    //参数一也就是initWithRootViewController的参数就是导航控制器的根视图控制器
    UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:root];
    //将window的根视图设置为导航控制器
    self.window.rootViewController = nav;

接着我们在根视图控制器类的实现部分进行操作

 self.view.backgroundColor = [UIColor blackColor];
    //设置导航栏的标题文字
    self.title = @"根视图";
    //设置导航元素项目的标题
    //如果没有设置navigationItem.title
    //系统会使用self.title作为标题
    //如果navigationItem.title不为空则将其设置为标题内容
    self.navigationItem.title = @"title";
    
    self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
    //创建一个导航栏左侧的按钮
    //根据title文字创建按钮
    //第一个参数：按钮上的文字
    //第二个参数：按钮风格
    //第三个参数：事件拥有者
    //第四个参数：按钮事件
    UIBarButtonItem* leftbtn = [[UIBarButtonItem alloc] initWithTitle:@"左侧" 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;
    
}
- (void)pressLeft {
    NSLog(@"左侧按钮被按下");
}
- (void)pressRight {
    NSLog(@"右侧按钮被按下");
}

运行结果如下：

当我们点击左侧按钮时会打印左侧按钮被按下，当我们打印右侧按钮时会打印右侧按钮被按下。

如果想要添加多个按钮的话可以用一个按钮数组来进行操作，代码如下：

    //标签对象
    UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 50, 40)];
    label.text = @"test";
    label.textColor = [UIColor blueColor];
    label.textAlignment = NSTextAlignmentCenter;

    //将任何类型的控件添加到导航按钮的方法
    UIBarButtonItem* item = [[UIBarButtonItem alloc] initWithCustomView:label];
    //创建按钮数组
    NSArray* arrayBtn = [NSArray arrayWithObjects:rightbtn, item, nil];
    //将右侧按钮数组赋值,需要注意的是添加多个按钮时rightBarButtonItems后有个s也就是复数形式
    self.navigationItem.rightBarButtonItems = arrayBtn;

运行结果如下：

可以看到右侧多了一个test按钮。

二、导航控制器（UINavigationController）切换

1.基本概念

导航控制器的切换类似于栈的入栈与出栈，我们每次切换到下一级视图的时候相当于让下一级视图入栈并充当栈顶元素，当我们想切换到上一级视图的时候就让栈顶的元素出栈，那么此时栈顶的元素就是我们上一级的视图了。

2.基本用法

首先我们创建三个视图控制器
接着我们在根视图控制器中进行如下操作：

//设置导航栏透明度
    //默认透明度为YES：可透明的
    //NO：导航栏不透明
    self.navigationController.navigationBar.translucent = YES;
    //设置导航栏风格颜色
    self.navigationController.navigationBar.barStyle = UIBarStyleDefault;
    self.view.backgroundColor = [UIColor grayColor];
    self.title = @"根视图";
    UIBarButtonItem* next = [[UIBarButtonItem alloc] initWithTitle:@"下一级" style:UIBarButtonItemStyleDone target:self action:@selector(pressNext)];
    self.navigationItem.rightBarButtonItem = next;
}
- (void)pressNext {
    //创建一个新的视图控制器
    VCSecond* vcSecond = [[VCSecond alloc] init];
    //使用当前视图控制器的导航控制器对象
    [self.navigationController pushViewController:vcSecond animated:YES];
}

在pressNext函数中，我们通过pushViewController：animated：方法跳转到第二级视图，push就相当于入栈，而
pushViewController就是把下一级视图压入栈中。

我们先将第二级视图的背景颜色设置为绿色再运行。

当点击下一级时就会跳转到第二级视图

当我们点击左侧根视图的按钮时就会返回到根视图

同理我们在第二个视图控制器进行如下操作：

self.view.backgroundColor = [UIColor greenColor];
    self.title = @"视图二";
    UIBarButtonItem* next = [[UIBarButtonItem alloc] initWithTitle:@"下一级" style:UIBarButtonItemStyleDone target:self action:@selector(pressNext)];
    self.navigationItem.rightBarButtonItem = next;
}
- (void)pressNext {
    VCThird* vcThird = [[VCThird alloc] init];
    [self.navigationController pushViewController:vcThird animated:YES];

我们将第三个视图的背景颜色设置为黄色

我们点击下一级就会跳转到第三级视图

在第三级视图控制器中我们可以进行如下操作：

 self.view.backgroundColor = [UIColor yellowColor];
    self.title = @"视图三";
    //当自己设定左侧按钮时，系统设置的返回按钮会被替换
    UIBarButtonItem* btnLeft = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:UIBarButtonItemStyleDone target:self action:@selector(pressBack)];
    self.navigationItem.leftBarButtonItem = btnLeft;
    UIBarButtonItem* btnRight = [[UIBarButtonItem alloc] initWithTitle:@"返回到根视图" style:UIBarButtonItemStyleDone target:self action:@selector(pressRoot)];
    self.navigationItem.rightBarButtonItem = btnRight;
}
- (void)pressBack {
    NSLog(@"返回上一级");
    //将当前的视图控制器弹出，返回上一级界面
    [self.navigationController popoverPresentationController];
}
- (void)pressRoot {
    //直接返回到根视图
    [self.navigationController popToRootViewControllerAnimated:YES];
}

如果我们设置自己的返回上一级按钮该按钮就会替换系统生成的按钮。当我们想返回上一级视图时可以使用 popoverPresentationController方法，如果想直接返回到根视图可以使用popToRootViewControllerAnimated:方法

三、导航栏和工具栏

1.基本概念

导航栏的基本概念和用法前面已经介绍过了，下面介绍工具栏的概念。工具栏（Toolbar）通常用于显示特定视图控制器的工具按钮。工具栏通常位于屏幕底部，包含一组按钮或其他控件，用于执行特定操作或导航到其他屏幕。
工具栏通常包含以下几个基本元素：

工具栏按钮（Toolbar Button）：工具栏中的单个按钮，可以通过点击来执行特定操作或导航到其他屏幕。
工具栏项（Toolbar Item）：工具栏中的一个单独元素，可以包含一个或多个工具栏按钮。
工具栏控制器（Toolbar Controller）：用于管理工具栏的视图控制器，可以使用工具栏控制器来添加、删除和重新排列工具栏项。
工具栏样式（Toolbar Style）：工具栏的外观样式，可以通过设置工具栏的颜色、透明度、背景图像和按钮样式等属性来自定义工具栏的外观。

2.基本用法

下面先介绍几个关于导航栏的基本属性

需要注意的是在iOS13之后，设置导航栏的颜色等样式要按如下方式：
UIBarAppearance是iOS13后推出的一个对相应空间设置外观样式的类，可以统一配置NavigationBar、TabBar、ToolBar等的外观样式
UINavigationBarAppearance可以设置导航栏对象的外观样式
在使用这些方法设置导航栏外观样式之前，需要创建一个UINavigationBarAppearance对象

self.view.backgroundColor = [UIColor grayColor];
    //创建一个UINavigationBarAppearance对象
    UINavigationBarAppearance* appearance = [[UINavigationBarAppearance alloc] init];
    //设置该对象的背景颜色
    appearance.backgroundColor = [UIColor whiteColor];
    //设置该对象的阴影图像
    appearance.shadowImage = [[UIImage alloc] init];
    //设置该对象的阴影颜色
    appearance.shadowColor = nil;
    self.title = @"根视图";
    //隐藏导航栏
//    self.navigationController.navigationBar.hidden = YES;
//    self.navigationController.navigationBarHidden = YES;
    //设置导航栏元素项目按钮的风格颜色
    self.navigationController.navigationBar.tintColor = [UIColor greenColor];
    UIBarButtonItem* btnRight = [[UIBarButtonItem alloc] initWithTitle:@"右侧按钮" style:UIBarButtonItemStyleDone target:self action:@selector(pressNext)];
    self.navigationItem.rightBarButtonItem = btnRight;
    self.navigationController.navigationBar.standardAppearance = appearance;

运行结果如下：

下面介绍工具栏的基本用法

默认情况下工具栏是隐藏的，所以我们可以用以下方法将其显示

self.navigationController.toolbarHidden = NO;
self.navigationController.toolbar.translucent = NO;

下面是基本用法：

 //创建三个工具栏按钮
    UIBarButtonItem* btn01 = [[UIBarButtonItem alloc] initWithTitle:@"按钮" style:UIBarButtonItemStyleDone target:nil action:nil];
    UIBarButtonItem* btn02 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:nil action:nil];
    UIButton* btnImage = [UIButton buttonWithType:UIButtonTypeCustom];
    [btnImage setImage:[UIImage imageNamed:@"4.jpg"] forState:UIControlStateNormal];
    btnImage.frame = CGRectMake(0, 0, 60, 60);
    UIBarButtonItem* btn03 = [[UIBarButtonItem alloc] initWithCustomView:btnImage];
    //如果想改变按钮之间的距离可以使用如下两个按钮
    //固定宽度占位按钮
    UIBarButtonItem* btnF01 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
    btnF01.width = 50;
    //自动计算宽度按钮
    UIBarButtonItem* btnF02 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
    //创建按钮数组
    NSArray* arrayBtn = [NSArray arrayWithObjects:btn01, btnF01, btn02, btnF02, btn03, nil];
    self.toolbarItems = arrayBtn;
}
- (void)pressNext {
    VCSecond* vcsecond = [[VCSecond alloc] init];
    [self.navigationController pushViewController:vcsecond animated:YES];
}

屏幕下方就是我们的状态栏，状态栏上是我们创建的三个按钮。

当我们点击右侧按钮进入下一级视图时发现工具栏上的按钮消失了，这是因为我们创建的按钮是建立在视图上而不是工具栏上，因此我们切换视图时工具栏上的按钮会消失。

总结

以上就是本篇文章的全部内容。