【iOS】UI学习——导航控制器、分栏控制器-个人在线分享

UI学习（三）

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

导航控制器

【iOS】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.title
self.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(@"按下了右侧按钮");
}

效果图：
【iOS】UI学习——导航控制器、分栏控制器插图(1)

导航控制器切换

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 = @"哦哦哦";
//设置导航栏的风格颜色，默认为Default
self.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];
}

效果图：
【iOS】UI学习——导航控制器、分栏控制器插图(2)
【iOS】UI学习——导航控制器、分栏控制器插图(3)
【iOS】UI学习——导航控制器、分栏控制器插图(4)

导航栏和工具栏

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;
}

效果图：
【iOS】UI学习——导航控制器、分栏控制器插图(5)

分栏控制器

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

注意：
分栏控制器在同一界面最多显示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:设置按钮的tag
UITabBarItem* 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、3
VCone* 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

效果图：【iOS】UI学习——导航控制器、分栏控制器插图(6)

分栏控制器高级

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