【iOS】UI学习——导航控制器、分栏控制器

导航控制器

导航控制器负责控制导航栏（navigationBar），导航栏上的按钮叫UINavigationItem（导航元素项）。它还控制着一个视图控制器，即导航栏下面的东西。
导航控制器基础

1. #import "SceneDelegate.h"
2. #import "VCRoot.h"
4. @interface SceneDelegate ()
6. @end
8. @implementation SceneDelegate
11. - (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
12.     //创建一个根视图控制器
13.     VCRoot* root = [[VCRoot alloc] init];
14.     //创建导航控制器
15.     //导航控制器主要用来管理多个视图控制器的切换
16.     //层级的方式来管理多个视图控制器
17.     //创建控制器时，一定要有一个根视图控制器
18.     //P1:就是作为导航控制器的根视图控制器
19.     UINavigationController* rev = [[UINavigationController alloc] initWithRootViewController:root];
20.     //将window的根视图设置为导航控制器
21.     self.window.rootViewController = rev;
22.     [self.window makeKeyAndVisible];
23. }

复制代码

新建一个VCRoot类

1. #import "VCRoot.h"
3. @interface VCRoot ()
5. @end
7. @implementation VCRoot
9. - (void)viewDidLoad {
10.     [super viewDidLoad];
11.     //设置导航栏的透明度
12.     //默认透明度为YES：可透明的
13.     self.navigationController.navigationBar.translucent = NO;
14.     self.view.backgroundColor = [UIColor greenColor];
15.     //设置导航栏的标题文字
16.     self.title = @"娃哈哈";
17.     //设置导航元素项目的标题
18.     //如果没有设置元素项目的标题，系统会使用self.title作为标题；反之，优先为navigationItem.title
19.     self.navigationItem.title = @"娃哈哈1";
20.     //向左侧按钮中添加文字，这里是根据title文字来创建
21.     //P1:栏按钮项的标题
22.     //P2:按钮的样式
23.     //P3:接受动作的目标对象
24.     UIBarButtonItem* leftBtn = [[UIBarButtonItem alloc] initWithTitle:@"旺仔牛奶" style:UIBarButtonItemStyleDone target:self action:@selector(pressLeft)];
25.    
26.     self.navigationItem.leftBarButtonItem = leftBtn;
27.     //右侧按钮中的文字是不可变的
28.     //这里按钮是制定了系统提供的风格样式
29.     //P1:按钮中展现的东西，注意，这里无论按钮中展现的是什么内容（无论图案或者文字），都是不可改变的
30.     UIBarButtonItem* rightBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(pressRight)];
31.     //向右侧添加自定义按钮
32.     UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 50, 40)];
33.     label.text = @"矿泉水";
34.     //将文字调至中间位置
35.     label.textAlignment = NSTextAlignmentCenter;
36.     label.textColor = [UIColor blackColor];
37.     //UIView的子类都可以被添加
38.     UIBarButtonItem* item = [[UIBarButtonItem alloc] initWithCustomView:label];
39.     //数组展现顺序从右至左
40.     NSArray* array = [NSArray arrayWithObjects:item, rightBtn, nil];
41.     //将右侧按钮数组赋值
42.     self.navigationItem.rightBarButtonItems = array;
43.     //self.navigationItem.rightBarButtonItem = rightBtn;
44. }
46. -(void) pressLeft
47. {
48.     NSLog(@"按下了左侧按钮");
49. }
51. -(void) pressRight
52. {
53.     NSLog(@"按下了右侧按钮");
54. }

复制代码

效果图：

导航控制器切换

navigationBar：导航栏对象
navigationItem：导航元素项对象
translucent：导航栏透明度
pushViewController：推入视图控制器
popViewController：推出视图控制器
首先创建三个视图
根视图VCRoot.m：

1. #import "VCRoot.h"
2. #import "VCTwo.h"
3. @interface VCRoot ()
5. @end
7. @implementation VCRoot
9. - (void)viewDidLoad {
10.     [super viewDidLoad];
11.     // Do any additional setup after loading the view.
12.     self.view.backgroundColor = [UIColor greenColor];
13.     //设置导航栏的透明度，默认为YES：可透明的；NO：不可透明的
14.     self.navigationController.navigationBar.translucent = NO;
15.     self.title = @"哦哦哦";
16.     //设置导航栏的风格颜色，默认为Default
17.     self.navigationController.navigationBar.barStyle = UIBarStyleDefault;
18.     //为根视图的导航控制器设置右侧按钮
19.     UIBarButtonItem* rightBtn = [[UIBarButtonItem alloc] initWithTitle:@"下一页" style:UIBarButtonItemStylePlain target:self action:@selector(pressRight)];
20.     self.navigationItem.rightBarButtonItem = rightBtn;
21. }
23. -(void) pressRight
24. {
25.     //创建新的视图控制器
26.     VCTwo* vcTwo = [[VCTwo alloc] init];
27.     //使用当前视图控制器的导航控制器对象
28.     [self.navigationController pushViewController:vcTwo animated:YES];
29. }

复制代码

第二个视图VCTwo.h：

1. #import "VCTwo.h"
2. #import "VCRoot.h"
3. #import "VCThree.h"
4. @interface VCTwo ()
6. @end
8. @implementation VCTwo
9. @synthesize elertView = _elertView;
10. - (void)viewDidLoad {
11.     [super viewDidLoad];
12.     // Do any additional setup after loading the view.
13.     //设置视图二的标题和颜色
14.     self.view.backgroundColor = [UIColor blueColor];
15.     UIBarButtonItem* leftBtn = [[UIBarButtonItem alloc] initWithTitle:@"上一页" style:UIBarButtonItemStylePlain target:self action:@selector(pressLeft)];
16.     UIBarButtonItem* rightBtn = [[UIBarButtonItem alloc] initWithTitle:@"下一页" style:UIBarButtonItemStylePlain target:self action:@selector(pressRight)];
17.     self.navigationItem.leftBarButtonItem = leftBtn;
18.     //[self create];
19.     self.navigationItem.rightBarButtonItem = rightBtn;
20. }
22. -(void) pressLeft
23. {
24.      //弹出当前视图控制器，返回上一个界面
25.     [self.navigationController popViewControllerAnimated:YES];
26. }
28. -(void) pressRight
29. {
30.     VCThree* vcThree = [[VCThree alloc] init];
31.     //推入第三个视图控制器对象
32.     [self.navigationController pushViewController:vcThree animated:YES];
33. }

复制代码

第三个视图VCThree.h：

1. #import "VCThree.h"
2. #import "VCRoot.h"
3. #import "VCTwo.h"
4. @interface VCThree ()
6. @end
8. @implementation VCThree
10. - (void)viewDidLoad {
11.     [super viewDidLoad];
12.     // Do any additional setup after loading the view.
13.     self.view.backgroundColor = [UIColor redColor];
14.     UIBarButtonItem* leftBtn = [[UIBarButtonItem alloc] initWithTitle:@"上一页" style:UIBarButtonItemStylePlain target:self action:@selector(pressLeft)];
15.     UIBarButtonItem* rightBtn = [[UIBarButtonItem alloc] initWithTitle:@"下一页" style:UIBarButtonItemStylePlain target:self action:@selector(pressRight)];
16.     self.navigationItem.leftBarButtonItem = leftBtn;
17.     self.navigationItem.rightBarButtonItem = rightBtn;
18. }
20. -(void) pressLeft
21. {
22.     [self.navigationController popViewControllerAnimated:YES];
23. }
25. -(void) pressRight
26. {
27.     //弹出当前视图，返回根视图
28.     [self.navigationController popToRootViewControllerAnimated:YES];
29. }

复制代码

效果图：

导航栏和工具栏

ScenDelegate.m：

1. #import "SceneDelegate.h"
2. #import "VCRoot.h"
3. @interface SceneDelegate ()
5. @end
7. @implementation SceneDelegate
10. - (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
11.     VCRoot* vac = [[VCRoot alloc] init];
12.     UINavigationController* ans = [[UINavigationController alloc] initWithRootViewController:vac];
13.     self.window.rootViewController = ans;
14.     [self.window makeKeyAndVisible];
15. }
18. - (void)sceneDidDisconnect:(UIScene *)scene {
19.     // Called as the scene is being released by the system.
20.     // This occurs shortly after the scene enters the background, or when its session is discarded.
21.     // Release any resources associated with this scene that can be re-created the next time the scene connects.
22.     // The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).
23. }
26. - (void)sceneDidBecomeActive:(UIScene *)scene {
27.     // Called when the scene has moved from an inactive state to an active state.
28.     // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
29. }
32. - (void)sceneWillResignActive:(UIScene *)scene {
33.     // Called when the scene will move from an active state to an inactive state.
34.     // This may occur due to temporary interruptions (ex. an incoming phone call).
35. }
38. - (void)sceneWillEnterForeground:(UIScene *)scene {
39.     // Called as the scene transitions from the background to the foreground.
40.     // Use this method to undo the changes made on entering the background.
41. }
44. - (void)sceneDidEnterBackground:(UIScene *)scene {
45.     // Called as the scene transitions from the foreground to the background.
46.     // Use this method to save data, release shared resources, and store enough scene-specific state information
47.     // to restore the scene back to its current state.
48. }
51. @end

复制代码

VCRoot.h：

1. #import "VCRoot.h"
2. #import "VCSecond.h"
3. @interface VCRoot ()
5. @end
7. @implementation VCRoot
9. - (void)viewDidLoad {
10.     [super viewDidLoad];
11.     // Do any additional setup after loading the view.
12.     self.view.backgroundColor = [UIColor yellowColor];
13.    
14.     self.title = @"根视图";
15.    
16.     UIBarButtonItem* btn = [[UIBarButtonItem alloc] initWithTitle:@"Right" style:UIBarButtonItemStylePlain target:nil action:nil];
17.    
18.     self.navigationItem.rightBarButtonItem = btn;
19.     UINavigationBarAppearance* appearance = [[UINavigationBarAppearance alloc] init];
20.     //设置该对象的背景颜色
21.     appearance.backgroundColor = [UIColor redColor];
22.     //创建该对象的阴影图像
23.     appearance.shadowImage = [[UIImage alloc] init];
24.     //设置该对象的阴影颜色
25.     appearance.shadowColor = nil;
26.     //设置导航栏按钮的颜色
27.     self.navigationController.navigationBar.tintColor = [UIColor blueColor];
28.     //设置普通样式导航栏
29.     self.navigationController.navigationBar.standardAppearance = appearance;
30.     //设置滚动样式导航栏
31.     self.navigationController.navigationBar.scrollEdgeAppearance = appearance;
32.    
33.     self.navigationController.navigationBar.hidden = NO;
34.    
35.     self.navigationController.navigationBarHidden = NO;
36.     //显示工具栏对象
37.     //默认工具栏是隐藏的
38.     self.navigationController.toolbarHidden = NO;
39.     //设置工具栏是否透明
40.     self.navigationController.toolbar.translucent = NO;
41.     //向工具栏添加第一个按钮
42.     UIBarButtonItem* btn1 = [[UIBarButtonItem alloc] initWithTitle:@"left" style:UIBarButtonItemStylePlain target:nil action:nil];
43.     //向工具栏添加第二个按钮
44.     UIBarButtonItem* btn2 = [[UIBarButtonItem alloc] initWithTitle:@"right" style:UIBarButtonItemStylePlain target:nil action:@selector(press)];
45.     //添加一个自定义按钮
46.     UIButton *btnC = [UIButton buttonWithType: UIButtonTypeCustom];
47.     [btnC setImage: [UIImage imageNamed: @"12.png"] forState: UIControlStateNormal];
48.     btnC.frame = CGRectMake(0, 0, 60, 60);
49.         
50.     UIBarButtonItem *btn3 = [[UIBarButtonItem alloc] initWithCustomView: btnC];
51.         
52.     //设置一个占位按钮，放到数组中可以用来分隔开各按钮
53.     //设置宽度固定按钮
54.     UIBarButtonItem *btnF1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemFixedSpace target: nil action: nil];
55.     btnF1.width = 110;
56.         
57.     //设置自动计算宽度按钮
58.     UIBarButtonItem *btnF2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemFlexibleSpace target: nil action: nil];
59.     //按钮数组的创建
60.     NSArray *arrayBtn = [NSArray arrayWithObjects: btn1, btnF2, btn3, btnF2, btn2, nil];
61.         
62.     self.toolbarItems = arrayBtn;
64.    
65. }

复制代码

效果图：

分栏控制器

分栏控制器是管理多个视图控制器的管理控制器，通过数组的方式管理多个平行关系的视图控制器，与导航控制器的区别在于：导航控制器管理的是有层级关系的控制器。
   注意：
分栏控制器在同一界面最多显示5个控制器切换按钮，超过5个时会自动创建一个新的导航控制器来管理其余的控制器。
  分栏控制器基础

UITabBarItem:分栏按钮元素对象
badgeValue：分栏按钮提示信息
selectedIndex:分栏控制器选中的控制器索引
viewControllers：分栏控制器管理数组
selectedViewController:分栏控制器选中的控制器对象
VCone类

1. #import "VCone.h"
3. @interface VCone ()
5. @end
7. @implementation VCone
9. - (void)viewDidLoad {
10.     [super viewDidLoad];
11.     // Do any additional setup after loading the view.
12.     //创建一个分栏按钮对象
13.     //P1:显示的文字
14.     //P2:显示图片图标
15.     //P3:设置按钮的tag
16.     UITabBarItem* tab = [[UITabBarItem alloc] initWithTitle:@"111" image:nil tag:101];
17.    
18.     self.tabBarItem = tab;
19. }
20. @end

复制代码

VCtow类：

1. #import "VCtwo.h"
3. @interface VCtwo ()
5. @end
7. @implementation VCtwo
9. - (void)viewDidLoad {
10.     [super viewDidLoad];
11.     // Do any additional setup after loading the view.
12.     //根据系统风格创建分栏按钮
13.     //P1:系统风格设定
14.     UITabBarItem* tab = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemContacts tag:111];
15.     tab.badgeValue = @"11";
16.    
17.     self.tabBarItem = tab;
18. }
19. @end

复制代码

VCthree类：

1. #import "VCthree.h"
3. @interface VCthree ()
5. @end
7. @implementation VCthree
9. - (void)viewDidLoad {
10.     [super viewDidLoad];
11.     // Do any additional setup after loading the view.
12. }
14. /*
15. #pragma mark - Navigation
17. // In a storyboard-based application, you will often want to do a little preparation before navigation
18. - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
19.     // Get the new view controller using [segue destinationViewController].
20.     // Pass the selected object to the new view controller.
21. }
22. */
24. @end

复制代码

SceneDelegate.m：

1. #import "SceneDelegate.h"
2. #import "VCone.h"
3. #import "VCtwo.h"
4. #import "VCthree.h"
6. @interface SceneDelegate ()
8. @end
10. @implementation SceneDelegate
13. - (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
14.     //创建视图控制器1、2、3
15.     VCone* vc1 = [[VCone alloc] init];
16.    
17.     vc1.title = @"视图一";
18.     vc1.view.backgroundColor = [UIColor whiteColor];
19.    
20.     VCtwo* vc2 = [[VCtwo alloc] init];
21.     vc2.title = @"视图二";
22.     vc2.view.backgroundColor = [UIColor redColor];
23.    
24.     VCthree* vc3 = [[VCthree alloc] init];
25.     vc3.view.backgroundColor = [UIColor orangeColor];
26.     vc3.title = @"视图三";
27.     //创建分栏控制器对象
28.     UITabBarController* tbController = [[UITabBarController alloc] init];
29.    
30.     //创建一个控制器数组对象
31.     //将所有要被分栏控制器管理的对象添加到数组中去
32.     NSArray* arrVC = [NSArray arrayWithObjects:vc1, vc2, vc3, nil];
33.     //给分栏控制器管理数组赋值
34.     tbController.viewControllers = arrVC;
35.     //将分栏控制器作为根视图控制器
36.     self.window.rootViewController = tbController;
37.     //设置选中的视图控制器的索引
38.     tbController.selectedIndex = 2;
39.     //当前显示的控制器对象
40.     if(tbController.selectedViewController == vc3) {
41.         NSLog(@"Right");
42.     }
43.     //是否分栏控制器的工具栏的透明度
44.     tbController.tabBar.translucent = NO;
45.     //分栏控制器的颜色
46.     tbController.tabBar.backgroundColor = [UIColor whiteColor];
47.    
48.    
49.    
50.    
51. }
54. - (void)sceneDidDisconnect:(UIScene *)scene {
55.     // Called as the scene is being released by the system.
56.     // This occurs shortly after the scene enters the background, or when its session is discarded.
57.     // Release any resources associated with this scene that can be re-created the next time the scene connects.
58.     // The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).
59. }
62. - (void)sceneDidBecomeActive:(UIScene *)scene {
63.     // Called when the scene has moved from an inactive state to an active state.
64.     // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
65. }
68. - (void)sceneWillResignActive:(UIScene *)scene {
69.     // Called when the scene will move from an active state to an inactive state.
70.     // This may occur due to temporary interruptions (ex. an incoming phone call).
71. }
74. - (void)sceneWillEnterForeground:(UIScene *)scene {
75.     // Called as the scene transitions from the background to the foreground.
76.     // Use this method to undo the changes made on entering the background.
77. }
80. - (void)sceneDidEnterBackground:(UIScene *)scene {
81.     // Called as the scene transitions from the foreground to the background.
82.     // Use this method to save data, release shared resources, and store enough scene-specific state information
83.     // to restore the scene back to its current state.
84. }
87. @end

复制代码

效果图：

分栏控制器高级

willBeginCustomizingViewControllers:即将显示编辑方法
willEndCustomizingViewControllers:即将结束编辑方法
didEndCustomizingViewControllers:已经结束编辑方法
didSelectViewController:选中控制器切换方法
分栏控制器下面的导航栏最多显示5个按钮，超过5个按钮，体系会自动将末了一个按钮更换成more，当点击more时，才可以看到其他的按钮，点开后，右上角有一个Edit按钮，点击可以看到全部的按钮，也可拖动改变前四个按钮显现的是什么视图。
UITabBarControllerDelegate协议：
先创建VCone-Vcsix类，这里指显现VCone类：

1. #import "VCone.h"
3. @interface VCone ()
5. @end
7. @implementation VCone
9. - (void)viewDidLoad {
10.     [super viewDidLoad];
11.     // Do any additional setup after loading the view.
12. }
14. /*
15. #pragma mark - Navigation
17. // In a storyboard-based application, you will often want to do a little preparation before navigation
18. - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
19.     // Get the new view controller using [segue destinationViewController].
20.     // Pass the selected object to the new view controller.
21. }
22. */
24. @end

复制代码

SceneDelegate.m：

1. #import "SceneDelegate.h"
2. #import "VCone.h"
3. #import "VCtwo.h"
4. #import "VCthree.h"
5. #import "VCfour.h"
6. #import "VCfive.h"
7. #import "VCsix.h"
8. @interface SceneDelegate ()
10. @end
12. @implementation SceneDelegate
15. - (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
16.     VCone* vc1 = [[VCone alloc] init];
17.     vc1.title = @"视图1";
18.     vc1.view.backgroundColor = [UIColor redColor];
19.    
20.     VCtwo* vc2 = [[VCtwo alloc] init];
21.     vc2.title = @"视图2";
22.     vc2.view.backgroundColor = [UIColor orangeColor];
23.    
24.     VCthree* vc3 = [[VCthree alloc] init];
25.     vc3.title = @"视图3";
26.     vc3.view.backgroundColor = [UIColor blueColor];
27.    
28.     VCfour* vc4 = [[VCfour alloc] init];
29.     vc4.title = @"视图4";
30.     vc4.view.backgroundColor = [UIColor greenColor];
31.    
32.     VCfive* vc5 = [[VCfive alloc] init];
33.     vc5.title = @"视图5";
34.     vc5.view.backgroundColor = [UIColor grayColor];
35.    
36.     VCsix* vc6 = [[VCsix alloc] init];
37.     vc6.title = @"视图6";
38.     vc6.view.backgroundColor = [UIColor yellowColor];
39.    
40.    
41.     NSArray* arrVC = [NSArray arrayWithObjects:vc1, vc2, vc3, vc4, vc5, vc6, nil];
42.     UITabBarController* tb = [[UITabBarController alloc] init];
43.     tb.viewControllers = arrVC;
44.     tb.tabBar.translucent = NO;
45.     tb.tabBar.backgroundColor = [UIColor whiteColor];
46.     self.window.rootViewController = tb;
47.     //设置代理
48.     //处理UITabBarControllerDelegate协议函数
49.     tb.delegate = self;
50. }
51. //开始编译前调用此协议函数
52. -(void) tabBarController:(UITabBarController *)tabBarController willBeginCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers
53. {
54.     NSLog(@"编辑前");
55. }
56. //即将结束编译前调用此协议函数
57. -(void) tabBarController:(UITabBarController *)tabBarController willEndCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers changed:(BOOL)changed
58. {
59.     NSLog(@"即将结束前");
60. }
61. //结束编译后调用此协议函数
62. -(void) tabBarController:(UITabBarController *)tabBarController didEndCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers changed:(BOOL)changed
63. {
64.     if(changed == YES) {
65.         NSLog(@"顺序发生改变");
66.     }
67.     NSLog(@"已经结束编辑");
68. }
69. //选中控制器对象调用此协议函数
70. -(void) tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController
71. {
72.     NSLog(@"选中控制器对象");
73. }
76. - (void)sceneDidDisconnect:(UIScene *)scene {
77.     // Called as the scene is being released by the system.
78.     // This occurs shortly after the scene enters the background, or when its session is discarded.
79.     // Release any resources associated with this scene that can be re-created the next time the scene connects.
80.     // The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).
81. }
84. - (void)sceneDidBecomeActive:(UIScene *)scene {
85.     // Called when the scene has moved from an inactive state to an active state.
86.     // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
87. }
90. - (void)sceneWillResignActive:(UIScene *)scene {
91.     // Called when the scene will move from an active state to an inactive state.
92.     // This may occur due to temporary interruptions (ex. an incoming phone call).
93. }
96. - (void)sceneWillEnterForeground:(UIScene *)scene {
97.     // Called as the scene transitions from the background to the foreground.
98.     // Use this method to undo the changes made on entering the background.
99. }
102. - (void)sceneDidEnterBackground:(UIScene *)scene {
103.     // Called as the scene transitions from the foreground to the background.
104.     // Use this method to save data, release shared resources, and store enough scene-specific state information
105.     // to restore the scene back to its current state.
106. }
109. @end

复制代码

效果图：

点击more后：

点击Edit后：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。