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

键盘敲没电2024-06-06 23:56

UI学习（三）

导航控制器

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

导航控制器基础

objectivec 复制代码 
#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类

objectivec 复制代码 
#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(@"按下了右侧按钮");
}

效果图 ：

导航控制器切换

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

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

objectivec 复制代码 
#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：

objectivec 复制代码 
#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：

objectivec 复制代码 
#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：

objectivec 复制代码 
#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：

objectivec 复制代码 
#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类

objectivec 复制代码 
#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类：

objectivec 复制代码 
#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类：

objectivec 复制代码 
#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：

objectivec 复制代码 
#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

效果图 ：

分栏控制器高级

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

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

UITabBarControllerDelegate协议 ：

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

objectivec 复制代码 
#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：

objectivec 复制代码 
#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

效果图 ：

点击more后 ：

点击Edit后 ：

相关推荐
谢白羽34 分钟前
深度神经网络模型压缩学习笔记三：在线量化算法和工具、实现原理和细节
笔记·学习·dnn
楚疏笃1 小时前
鸿蒙学习自由流转与分布式运行环境-价值与架构定义(1)
学习·架构·harmonyos
架构文摘JGWZ1 小时前
替代Postman ,17.3K star！
学习·工具
NightCyberpunk1 小时前
Ajax与Vue初步学习
vue.js·学习·ajax
宇寒风暖1 小时前
软件工程——UML简介
笔记·学习·软件工程
ZZZ_O^O2 小时前
【贪心算法第五弹——300.最长递增子序列】
c++·学习·算法·leetcode·贪心算法
&黄昏的乐师2 小时前
Opencv+ROS实现颜色识别应用
人工智能·opencv·学习·计算机视觉
蒙特网站2 小时前
网站布局编辑器前端开发：设计要点与关键考量
前端·javascript·学习·html
@曲终2 小时前
C语言学习 12（指针学习1）
c语言·经验分享·笔记·学习
一只小菜鸡..3 小时前
241126学习日志——[CSDIY] [ByteDance] 后端训练营 [19]
学习
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02玄机平台应急响应—webshell查杀03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总0404 - matlab m_map地学绘图工具基础函数 - 设置网格05Docker 夺命连环 15 问06PyTorch机器学习实现液态神经网络07鸿蒙LiteOS+Hi3861智能家居网关设计：MQTT协议实现与代码示例08支付宝短视频平台创作分成激励项目09RAG 实践- Ollama+RagFlow 部署本地知识库10编译原生安卓aosp源码，实现硬改以及定位