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(@"按下了右侧按钮");
}
效果图:
导航控制器切换
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];
}
效果图:
导航栏和工具栏
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:设置按钮的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
效果图:
分栏控制器高级
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
效果图:
点击more后:
点击Edit后: