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

本文主要是介绍【iOS】UI学习——导航控制器、分栏控制器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

UI学习（三）

导航控制器
- 导航控制器基础
- 导航控制器切换
- 导航栏和工具栏
分栏控制器
- 分栏控制器基础
- 分栏控制器高级

导航控制器

在这里插入图片描述
导航控制器负责控制导航栏（navigationBar），导航栏上的按钮叫UINavigationItem（导航元素项）。它还控制着一个视图控制器，即导航栏下面的东西。

导航控制器基础

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

新建一个VCRoot类

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

效果图：
在这里插入图片描述

导航控制器切换

navigationBar：导航栏对象
navigationItem：导航元素项对象
translucent：导航栏透明度
pushViewController：推入视图控制器
popViewController：推出视图控制器

首先创建三个视图
根视图VCRoot.m：

#import "VCRoot.h"
#import "VCTwo.h"
@interface VCRoot ()@end@implementation VCRoot- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.self.view.backgroundColor = [UIColor greenColor];//设置导航栏的透明度，默认为YES：可透明的；NO：不可透明的self.navigationController.navigationBar.translucent = NO;self.title = @"哦哦哦";//设置导航栏的风格颜色，默认为Defaultself.navigationController.navigationBar.barStyle = UIBarStyleDefault;//为根视图的导航控制器设置右侧按钮UIBarButtonItem* rightBtn = [[UIBarButtonItem alloc] initWithTitle:@"下一页" style:UIBarButtonItemStylePlain target:self action:@selector(pressRight)];self.navigationItem.rightBarButtonItem = rightBtn;
}-(void) pressRight
{//创建新的视图控制器VCTwo* vcTwo = [[VCTwo alloc] init];//使用当前视图控制器的导航控制器对象[self.navigationController pushViewController:vcTwo animated:YES];
}

第二个视图VCTwo.h：

#import "VCTwo.h"
#import "VCRoot.h"
#import "VCThree.h"
@interface VCTwo ()@end@implementation VCTwo
@synthesize elertView = _elertView;
- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.//设置视图二的标题和颜色self.view.backgroundColor = [UIColor blueColor];UIBarButtonItem* leftBtn = [[UIBarButtonItem alloc] initWithTitle:@"上一页" style:UIBarButtonItemStylePlain target:self action:@selector(pressLeft)];UIBarButtonItem* rightBtn = [[UIBarButtonItem alloc] initWithTitle:@"下一页" style:UIBarButtonItemStylePlain target:self action:@selector(pressRight)];self.navigationItem.leftBarButtonItem = leftBtn;//[self create];self.navigationItem.rightBarButtonItem = rightBtn;
}-(void) pressLeft
{//弹出当前视图控制器，返回上一个界面[self.navigationController popViewControllerAnimated:YES];
}-(void) pressRight
{VCThree* vcThree = [[VCThree alloc] init];//推入第三个视图控制器对象[self.navigationController pushViewController:vcThree animated:YES];
}

第三个视图VCThree.h：

#import "VCThree.h"
#import "VCRoot.h"
#import "VCTwo.h"
@interface VCThree ()@end@implementation VCThree- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.self.view.backgroundColor = [UIColor redColor];UIBarButtonItem* leftBtn = [[UIBarButtonItem alloc] initWithTitle:@"上一页" style:UIBarButtonItemStylePlain target:self action:@selector(pressLeft)];UIBarButtonItem* rightBtn = [[UIBarButtonItem alloc] initWithTitle:@"下一页" style:UIBarButtonItemStylePlain target:self action:@selector(pressRight)];self.navigationItem.leftBarButtonItem = leftBtn;self.navigationItem.rightBarButtonItem = rightBtn;
}-(void) pressLeft
{[self.navigationController popViewControllerAnimated:YES];
}-(void) pressRight
{//弹出当前视图，返回根视图[self.navigationController popToRootViewControllerAnimated:YES];
}

效果图：
在这里插入图片描述

导航栏和工具栏

ScenDelegate.m：

#import "SceneDelegate.h"
#import "VCRoot.h"
@interface SceneDelegate ()@end@implementation SceneDelegate- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {VCRoot* vac = [[VCRoot alloc] init];UINavigationController* ans = [[UINavigationController alloc] initWithRootViewController:vac];self.window.rootViewController = ans;[self.window makeKeyAndVisible];
}- (void)sceneDidDisconnect:(UIScene *)scene {// Called as the scene is being released by the system.// This occurs shortly after the scene enters the background, or when its session is discarded.// Release any resources associated with this scene that can be re-created the next time the scene connects.// The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).
}- (void)sceneDidBecomeActive:(UIScene *)scene {// Called when the scene has moved from an inactive state to an active state.// Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
}- (void)sceneWillResignActive:(UIScene *)scene {// Called when the scene will move from an active state to an inactive state.// This may occur due to temporary interruptions (ex. an incoming phone call).
}- (void)sceneWillEnterForeground:(UIScene *)scene {// Called as the scene transitions from the background to the foreground.// Use this method to undo the changes made on entering the background.
}- (void)sceneDidEnterBackground:(UIScene *)scene {// Called as the scene transitions from the foreground to the background.// Use this method to save data, release shared resources, and store enough scene-specific state information// to restore the scene back to its current state.
}@end

VCRoot.h：

#import "VCRoot.h"
#import "VCSecond.h"
@interface VCRoot ()@end@implementation VCRoot- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.self.view.backgroundColor = [UIColor yellowColor];self.title = @"根视图";UIBarButtonItem* btn = [[UIBarButtonItem alloc] initWithTitle:@"Right" style:UIBarButtonItemStylePlain target:nil action:nil];self.navigationItem.rightBarButtonItem = btn;UINavigationBarAppearance* appearance = [[UINavigationBarAppearance alloc] init];//设置该对象的背景颜色appearance.backgroundColor = [UIColor redColor];//创建该对象的阴影图像appearance.shadowImage = [[UIImage alloc] init];//设置该对象的阴影颜色appearance.shadowColor = nil;//设置导航栏按钮的颜色self.navigationController.navigationBar.tintColor = [UIColor blueColor];//设置普通样式导航栏self.navigationController.navigationBar.standardAppearance = appearance;//设置滚动样式导航栏self.navigationController.navigationBar.scrollEdgeAppearance = appearance;self.navigationController.navigationBar.hidden = NO;self.navigationController.navigationBarHidden = NO;//显示工具栏对象//默认工具栏是隐藏的self.navigationController.toolbarHidden = NO;//设置工具栏是否透明self.navigationController.toolbar.translucent = NO;//向工具栏添加第一个按钮UIBarButtonItem* btn1 = [[UIBarButtonItem alloc] initWithTitle:@"left" style:UIBarButtonItemStylePlain target:nil action:nil];//向工具栏添加第二个按钮UIBarButtonItem* btn2 = [[UIBarButtonItem alloc] initWithTitle:@"right" style:UIBarButtonItemStylePlain target:nil action:@selector(press)];//添加一个自定义按钮UIButton *btnC = [UIButton buttonWithType: UIButtonTypeCustom];[btnC setImage: [UIImage imageNamed: @"12.png"] forState: UIControlStateNormal];btnC.frame = CGRectMake(0, 0, 60, 60);UIBarButtonItem *btn3 = [[UIBarButtonItem alloc] initWithCustomView: btnC];//设置一个占位按钮，放到数组中可以用来分隔开各按钮//设置宽度固定按钮UIBarButtonItem *btnF1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemFixedSpace target: nil action: nil];btnF1.width = 110;//设置自动计算宽度按钮UIBarButtonItem *btnF2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemFlexibleSpace target: nil action: nil];//按钮数组的创建NSArray *arrayBtn = [NSArray arrayWithObjects: btn1, btnF2, btn3, btnF2, btn2, nil];self.toolbarItems = arrayBtn;}

效果图：
在这里插入图片描述

分栏控制器

分栏控制器是管理多个视图控制器的管理控制器，通过数组的方式管理多个平行关系的视图控制器，与导航控制器的区别在于：导航控制器管理的是有层级关系的控制器。

注意：
分栏控制器在同一界面最多显示5个控制器切换按钮，超过5个时会自动创建一个新的导航控制器来管理其余的控制器。

分栏控制器基础

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

VCone类

#import "VCone.h"@interface VCone ()@end@implementation VCone- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.//创建一个分栏按钮对象//P1:显示的文字//P2:显示图片图标//P3:设置按钮的tagUITabBarItem* tab = [[UITabBarItem alloc] initWithTitle:@"111" image:nil tag:101];self.tabBarItem = tab;
}
@end

VCtow类：

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

VCthree类：

#import "VCthree.h"@interface VCthree ()@end@implementation VCthree- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.
}/*
#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

SceneDelegate.m：

#import "SceneDelegate.h"
#import "VCone.h"
#import "VCtwo.h"
#import "VCthree.h"@interface SceneDelegate ()@end@implementation SceneDelegate- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {//创建视图控制器1、2、3VCone* vc1 = [[VCone alloc] init];vc1.title = @"视图一";vc1.view.backgroundColor = [UIColor whiteColor];VCtwo* vc2 = [[VCtwo alloc] init];vc2.title = @"视图二";vc2.view.backgroundColor = [UIColor redColor];VCthree* vc3 = [[VCthree alloc] init];vc3.view.backgroundColor = [UIColor orangeColor];vc3.title = @"视图三";//创建分栏控制器对象UITabBarController* tbController = [[UITabBarController alloc] init];//创建一个控制器数组对象//将所有要被分栏控制器管理的对象添加到数组中去NSArray* arrVC = [NSArray arrayWithObjects:vc1, vc2, vc3, nil];//给分栏控制器管理数组赋值tbController.viewControllers = arrVC;//将分栏控制器作为根视图控制器self.window.rootViewController = tbController;//设置选中的视图控制器的索引tbController.selectedIndex = 2;//当前显示的控制器对象if(tbController.selectedViewController == vc3) {NSLog(@"Right");}//是否分栏控制器的工具栏的透明度tbController.tabBar.translucent = NO;//分栏控制器的颜色tbController.tabBar.backgroundColor = [UIColor whiteColor];}- (void)sceneDidDisconnect:(UIScene *)scene {// Called as the scene is being released by the system.// This occurs shortly after the scene enters the background, or when its session is discarded.// Release any resources associated with this scene that can be re-created the next time the scene connects.// The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).
}- (void)sceneDidBecomeActive:(UIScene *)scene {// Called when the scene has moved from an inactive state to an active state.// Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
}- (void)sceneWillResignActive:(UIScene *)scene {// Called when the scene will move from an active state to an inactive state.// This may occur due to temporary interruptions (ex. an incoming phone call).
}- (void)sceneWillEnterForeground:(UIScene *)scene {// Called as the scene transitions from the background to the foreground.// Use this method to undo the changes made on entering the background.
}- (void)sceneDidEnterBackground:(UIScene *)scene {// Called as the scene transitions from the foreground to the background.// Use this method to save data, release shared resources, and store enough scene-specific state information// to restore the scene back to its current state.
}@end

效果图：在这里插入图片描述

分栏控制器高级

willBeginCustomizingViewControllers:即将显示编辑方法
willEndCustomizingViewControllers:即将结束编辑方法
didEndCustomizingViewControllers:已经结束编辑方法
didSelectViewController:选中控制器切换方法

分栏控制器下面的导航栏最多显示5个按钮，超过5个按钮，系统会自动将最后一个按钮替换成more，当点击more时，才可以看到其他的按钮，点开后，右上角有一个Edit按钮，点击可以看到所有的按钮，也可拖动改变前四个按钮展现的是什么视图。

UITabBarControllerDelegate协议：
先创建VCone-Vcsix类，这里指展现VCone类：

#import "VCone.h"@interface VCone ()@end@implementation VCone- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.
}/*
#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

SceneDelegate.m：

#import "SceneDelegate.h"
#import "VCone.h"
#import "VCtwo.h"
#import "VCthree.h"
#import "VCfour.h"
#import "VCfive.h"
#import "VCsix.h"
@interface SceneDelegate ()@end@implementation SceneDelegate- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {VCone* vc1 = [[VCone alloc] init];vc1.title = @"视图1";vc1.view.backgroundColor = [UIColor redColor];VCtwo* vc2 = [[VCtwo alloc] init];vc2.title = @"视图2";vc2.view.backgroundColor = [UIColor orangeColor];VCthree* vc3 = [[VCthree alloc] init];vc3.title = @"视图3";vc3.view.backgroundColor = [UIColor blueColor];VCfour* vc4 = [[VCfour alloc] init];vc4.title = @"视图4";vc4.view.backgroundColor = [UIColor greenColor];VCfive* vc5 = [[VCfive alloc] init];vc5.title = @"视图5";vc5.view.backgroundColor = [UIColor grayColor];VCsix* vc6 = [[VCsix alloc] init];vc6.title = @"视图6";vc6.view.backgroundColor = [UIColor yellowColor];NSArray* arrVC = [NSArray arrayWithObjects:vc1, vc2, vc3, vc4, vc5, vc6, nil];UITabBarController* tb = [[UITabBarController alloc] init];tb.viewControllers = arrVC;tb.tabBar.translucent = NO;tb.tabBar.backgroundColor = [UIColor whiteColor];self.window.rootViewController = tb;//设置代理//处理UITabBarControllerDelegate协议函数tb.delegate = self;
}
//开始编译前调用此协议函数
-(void) tabBarController:(UITabBarController *)tabBarController willBeginCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers
{NSLog(@"编辑前");
}
//即将结束编译前调用此协议函数
-(void) tabBarController:(UITabBarController *)tabBarController willEndCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers changed:(BOOL)changed
{NSLog(@"即将结束前");
}
//结束编译后调用此协议函数
-(void) tabBarController:(UITabBarController *)tabBarController didEndCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers changed:(BOOL)changed
{if(changed == YES) {NSLog(@"顺序发生改变");}NSLog(@"已经结束编辑");
}
//选中控制器对象调用此协议函数
-(void) tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController
{NSLog(@"选中控制器对象");
}- (void)sceneDidDisconnect:(UIScene *)scene {// Called as the scene is being released by the system.// This occurs shortly after the scene enters the background, or when its session is discarded.// Release any resources associated with this scene that can be re-created the next time the scene connects.// The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).
}- (void)sceneDidBecomeActive:(UIScene *)scene {// Called when the scene has moved from an inactive state to an active state.// Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
}- (void)sceneWillResignActive:(UIScene *)scene {// Called when the scene will move from an active state to an inactive state.// This may occur due to temporary interruptions (ex. an incoming phone call).
}- (void)sceneWillEnterForeground:(UIScene *)scene {// Called as the scene transitions from the background to the foreground.// Use this method to undo the changes made on entering the background.
}- (void)sceneDidEnterBackground:(UIScene *)scene {// Called as the scene transitions from the foreground to the background.// Use this method to save data, release shared resources, and store enough scene-specific state information// to restore the scene back to its current state.
}@end