正文
iOS - UINavigationController
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
前言
NS_CLASS_AVAILABLE_IOS(2_0) @interface UINavigationController : UIViewController
@available(iOS 2.0, *) public class UINavigationController : UIViewController
-
UINavigationController:容器视图控制器的一种,称之为导航视图控制器,导航视图控制器固定高度是 44。
-
导航视图控制器中存放的是视图控制器。
-
导航条的颜色与状态条相同。
1、navigationController 的创建
-
Objective-C
ViewController1 *viewController1 = [[ViewController1 alloc] init];
// 相当于将 viewController1 对象放到 navigationController 容器中,现在容器中只有一个视图控制器
UINavigationController *navigationController = [[UINavigationController alloc]
initWithRootViewController: viewController1];
// 将 navigationController 添加到 viewController 上
[self addChildViewController:navigationController];
[self.view addSubview:navigationController.view];
// 将 navigationController 做为 window 的根视图控制器
self.window.rootViewController = navigationController;
-
Swift
let viewController1 = ViewController1()
// 相当于将 viewController1 对象放到 navigationController 容器中,现在容器中只有一个视图控制器
let navigationController = UINavigationController(rootViewController: viewController1)
// 将 navigationController 添加到 viewController 上
self.addChildViewController(navigationController)
self.view.addSubview(navigationController.view)
// 将 navigationController 做为 window 的根视图控制器
self.window?.rootViewController = navigationController
2、navigationBar 导航条的设置
-
navigationBar 属性是属于 navigationController 的,不是某个 viewController 的,在一个 viewController 中设置,其他的 viewController 的导航条也会改变。
-
导航条的设置除 appearance 外都在 viewController 中完成设置。
-
Objective-C
// 设置导航条类型
/*
UIBarStyleDefault 白色半透明,默认,不设置时默认为白色半透明
UIBarStyleBlack 灰色半透明
*/
self.navigationController.navigationBar.barStyle = UIBarStyleDefault;
// 设置导航条标题文字的字体和颜色
/*
appearance 用于对没有创建的控件进行统一设置,无法对已经创建的控件进行设置
*/
[UINavigationBar appearance].titleTextAttributes = @{NSFontAttributeName:[UIFont boldSystemFontOfSize:20],
NSForegroundColorAttributeName:[UIColor yellowColor]};
// 设置按钮文字颜色
/*
设置按钮的颜色,默认为蓝色,在 iOS6 中是设置背景颜色
*/
self.navigationController.navigationBar.tintColor = [UIColor redColor];
// 设置导航条背景颜色
/*
默认为白色半透明
*/
self.navigationController.navigationBar.barTintColor = [UIColor lightGrayColor];
// 设置导航条的背景图片
/*
如果图片的高正好是 44,图片与整个导航的高重合,这时候最上面 20 的状态条回到 ios6 以前的效果变成黑色的。
如果图片的高不是 44,哪怕比 44 多一个像素 45,这时候图片往上拉伸,占据状态栏的 20,这时整个高度为 64。
*/
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"pic2"]
forBarMetrics:UIBarMetricsDefault];
// 设置是否关闭导航条半透明状态
/*
NO:关闭,关闭时导航控制器下方视图的 y 坐标为 64,打开时为 20。默认打开
*/
self.navigationController.navigationBar.translucent = NO;
// 设置是否隐藏导航视图控制器
/*
显示时导航控制器下方视图的 y 坐标为 64,隐藏时为 20
*/
self.navigationController.navigationBarHidden = YES;
-
Swift
// 设置导航条类型
/*
Default 白色半透明,默认,不设置时默认为白色半透明
Black 灰色半透明
*/
self.navigationController!.navigationBar.barStyle = UIBarStyle.Default
// 设置导航条标题文字的字体和颜色
/*
appearance 用于对没有创建的控件进行统一设置,无法对已经创建的控件进行设置
*/
UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName:UIFont.boldSystemFontOfSize(20),
NSForegroundColorAttributeName:UIColor.yellowColor()]
// 设置按钮文字颜色
/*
设置按钮的颜色,默认为蓝色,在 iOS6 中是设置背景颜色
*/
self.navigationController!.navigationBar.tintColor = UIColor.redColor()
// 设置导航条背景颜色
/*
默认为白色半透明
*/
self.navigationController!.navigationBar.barTintColor = UIColor.lightGrayColor()
// 设置导航条的背景图片
/*
如果图片的高正好是 44,图片与整个导航的高重合,这时候最上面 20 的状态条回到 ios6 以前的效果变成黑色的。
如果图片的高不是 44 ,哪怕比 44 多一个像素 45,这时候图片往上拉伸,占据状态栏的 20,这时整个高度为 64。
*/
self.navigationController!.navigationBar.setBackgroundImage(UIImage(named: "pic2"),
forBarMetrics: UIBarMetrics.Default)
// 设置是否关闭导航条半透明状态
/*
false:关闭,关闭时导航控制器下方视图的 y 坐标为 64,打开时为 20。默认打开
*/
self.navigationController!.navigationBar.translucent = false
// 设置是否隐藏导航视图控制器
/*
显示时导航控制器下方视图的 y 坐标为 64,隐藏时为 20
*/
self.navigationController!.navigationBarHidden = true
3、navigationItem 导航栏的设置
-
navigationItem 属性不是公有的,是每个 ViewController 都有一个自己 navigationItem,设置自己界面上的 navigationItem 属性不会影响其他的 viewController 界面。
-
导航栏的设置在 viewController 中完成设置。不设置左侧按钮(leftBarButtonItem)时,系统会自动以上一个视图控制器的标题作为左侧按钮,并自带返回响应事件。
-
Objective-C
// 设置导航栏提示内容
/*
导航栏提供了一个很少用的提示模式,该模式将高度扩展了 30 像素
*/
self.navigationItem.prompt = @"hello";
// 设置标题
self.navigationItem.title = @"详情页";
// 设置自定义标题视图
/*
x,y,width 设置无效,图片不会自动压缩
*/
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo_title.png"]];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 0, 35)];
imageView.image = [UIImage imageNamed:@"logo_title.png"];
self.navigationItem.titleView = imageView;
// 设置按钮文字颜色
/*
需要先设置按钮才能生效,iOS6 中是设置背景颜色,在 iOS7 以后变成设置文字颜色
*/
self.navigationItem.leftBarButtonItem.tintColor = [UIColor redColor];
self.navigationItem.rightBarButtonItem.tintColor = [UIColor greenColor];
// 设置导航栏按钮
// 1、通过设置标题文字设置
/*
设置左侧按钮,当设置左按钮的时候,自动隐藏系统自带的返回上一页,需手动设置按钮点击事件
*/
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"返回"
style:UIBarButtonItemStylePlain
target:self
action:@selector(leftButtonClick:)];
// 2、通过系统编辑按钮设置
/*
系统自带的导航专用编辑按钮,点击后变为 Done,再次点击变回 Edit,自带点击响应事件
*/
self.navigationItem.rightBarButtonItem = self.editButtonItem;
// 系统自带编辑按钮点击响应事件,self.editButtonItem 自带的点击事件
- (void)setEditing:(BOOL)editing animated:(BOOL)animated {
// 使用这个方法时,需要让父类也执行一下这个方法
[super setEditing:editing animated:animated];
}
// 3、通过系统提供的样式设置
/*
UIBarButtonSystemItemDone, Done
UIBarButtonSystemItemCancel, Cancel
UIBarButtonSystemItemEdit, Edit
UIBarButtonSystemItemSave, Save
UIBarButtonSystemItemUndo, Undo
UIBarButtonSystemItemRedo, Redo
UIBarButtonSystemItemAdd, 加号 图标按钮
UIBarButtonSystemItemFlexibleSpace, 弹簧 按钮,将 button 推向两边
UIBarButtonSystemItemFixedSpace, 弹簧 按钮,将 button 推向两边,
可设间距 fixedSpaceButton.width = 50;
UIBarButtonSystemItemCompose, 撰写 图标按钮
UIBarButtonSystemItemReply, 答复 图标按钮
UIBarButtonSystemItemAction, 详情 图标按钮
UIBarButtonSystemItemOrganize, 文件夹 图标按钮
UIBarButtonSystemItemBookmarks, 书籍 图标按钮
UIBarButtonSystemItemSearch, 搜索 图标按钮
UIBarButtonSystemItemRefresh, 刷新 图标按钮
UIBarButtonSystemItemStop, X 号 图标按钮
UIBarButtonSystemItemCamera, 相机 图标按钮
UIBarButtonSystemItemTrash, 删除 图标按钮
UIBarButtonSystemItemPlay, 播放 图标按钮
UIBarButtonSystemItemPause, 暂停 图标按钮
UIBarButtonSystemItemRewind, 快退 图标按钮
UIBarButtonSystemItemFastForward, 快进 图标按钮
*/
self.navigationItem.rightBarButtonItem =[[UIBarButtonItem alloc]
initWithBarButtonSystemItem: UIBarButtonSystemItemCamera
target: self
action: @selector(rightButtonClick:)];
// 4、通过图片设置
/*
处理阴影,如果直接设置 image 出现阴影,这时候需要设置图片渲染方式
*/
UIImage *image = [[UIImage imageNamed:@"main_right_nav.png"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]
initWithImage: image
style: UIBarButtonItemStylePlain
target: self
action: @selector(rightButtonClick:)];
// 5、通过自定义视图设置
/*
前两个坐标设置无效,图片会自动压缩
*/
UIButton *myView = [UIButton buttonWithType:UIButtonTypeCustom];
myView.frame = CGRectMake(0, 0, 50, 30);
[myView setBackgroundImage:[UIImage imageNamed:@"pic1"] forState:UIControlStateNormal];
[myView addTarget:self action:@selector(rightButtonClick:) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:myView];
-
Swift
// 设置导航栏提示内容
/*
导航栏提供了一个很少用的提示模式,该模式将高度扩展了 30 像素
*/
self.navigationItem.prompt = "hello"
// 设置标题
self.navigationItem.title = "详情页"
// 设置自定义视图标题
/*
x,y,width 设置无效,图片不会自动压缩
*/
self.navigationItem.titleView = UIImageView(image: UIImage(named: "logo_title.png"))
let imageView = UIImageView(frame: CGRectMake(0, 0, 0, 35))
imageView.image = UIImage(named: "logo_title.png")
self.navigationItem.titleView = imageView
// 设置按钮文字颜色
/*
需要先设置按钮才能生效,在 iOS6 中是设置背景颜色,在 iOS7 以后变成设置文字颜色
*/
self.navigationItem.leftBarButtonItem?.tintColor = UIColor.redColor()
self.navigationItem.rightBarButtonItem?.tintColor = UIColor.greenColor()
// 设置导航栏按钮
// 1、通过设置标题文字设置
/*
设置左侧按钮,当设置左按钮的时候,自动隐藏系统自带的返回上一页,需手动设置按钮点击事件
*/
self.navigationItem.leftBarButtonItem = UIBarButtonItem(title: "返回",
style: .Plain,
target: self,
action: #selector(ViewController2.leftButtonClick(_:)))
// 2、通过系统编辑按钮设置
/*
系统自带的导航专用编辑按钮,点击后变为 Done,再次点击变回 Edit,自带点击响应事件
*/
self.navigationItem.rightBarButtonItem = self.editButtonItem();
// 3、通过系统提供的样式设置
/*
Done, Done
Cancel, Cancel
Edit, Edit
Save, Save
Undo, Undo
Redo, Redo
Add, 加号 图标按钮
FlexibleSpace, 弹簧 空按钮,将 button 推向两边
FixedSpace, 弹簧 空按钮,将 button 推向两边,可设置间距 fixedSpaceButton.width = 50;
Compose, 撰写 图标按钮
Reply, 答复 图标按钮
Action, 详情 图标按钮
Organize, 文件夹 图标按钮
Bookmarks, 书籍 图标按钮
Search, 搜索 图标按钮
Refresh, 刷新 图标按钮
Stop, X 号 图标按钮
Camera, 相机 图标按钮
Trash, 删除 图标按钮
Play, 播放 图标按钮
Pause, 暂停 图标按钮
Rewind, 快退 图标按钮
FastForward, 快进 图标按钮  
*/
self.navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .Camera,
target: self,
action: #selector(ViewController2.rightButtonClick(_:)))
// 4、通过图片设置
/*
处理阴影,如果直接设置 image 出现阴影,这时候需要设置图片渲染方式
*/
let image = UIImage(named: "main_right_nav.png")?.imageWithRenderingMode(.AlwaysOriginal)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: image,
style: .Plain,
target: self,
action: #selector(ViewController2.rightButtonClick(_:)))
// 5、通过自定义视图设置
/*
前两个坐标设置无效,图片会自动压缩
*/
let myView = UIButton(type: .Custom) myView.frame = CGRectMake(0, 0, 50, 30)
myView.setBackgroundImage(UIImage(named: "pic1"), forState: UIControlState.Normal)
myView.addTarget(self, action: #selector(ViewController2.rightButtonClick(_:)),
forControlEvents: .TouchUpInside)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: myView)
4、toolBar 工具条的设置
-
navigationController 自带的 toolbar 属性是所有添加在 navigationController 上的视图所共用的,是属于 navigationController 的,不是属于每个 ViewController 的,但 toolbar 上显示的内容的是每个 ViewController 的,需要在每个 ViewController 上单独设置。
-
toolbar 的显示状态会被带到已经显示过的 ViewController 上,跳转到未显示过的 ViewController 时,toolbar 再次被隐藏。
-
Objective-C
// 显示 toolBar
/*
toolBar 默认是隐藏的,首先需要让它显示出来,默认在屏幕的最下方
*/
self.navigationController.toolbarHidden = NO;
// 向 toolBar 添加按钮
/*
往 toolBar 上添加按钮,最多只能显示8个,往 self.navigationController.toolbarItems 上添加时无用
*/
self.toolbarItems = buttonArray;
-
Swift
// 显示 toolBar
/*
toolBar 默认是隐藏的,首先需要让它显示出来,默认在屏幕的最下方
*/
self.navigationController!.toolbarHidden = false
// 向 toolBar 添加按钮
/*
往 toolBar 上添加按钮,最多只能显示8个,往 self.navigationController.toolbarItems 上添加时无用
*/
self.toolbarItems = buttonArray
5、NC 中 viewController 页面设置
-
Objective-C
// 设置标题
/*
标题会显示在导航视图控制器中根视图的导航条中
*/
viewController1.title = @"vc1 title";
viewController1.navigationItem.title = @"vc1";
// 隐藏分栏视图控制器
/*
导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
*/
viewController1.hidesBottomBarWhenPushed = YES;
-
Swift
// 设置标题
/*
标题会显示在导航视图控制器中根视图的导航条中
*/
viewController1.title = "vc1 title"
viewController1.navigationItem.title = "vc1"
// 隐藏分栏视图控制器
/*
导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
*/
viewController1.hidesBottomBarWhenPushed = true
6、NC 中 viewController 页面跳转
-
跳转到未设置背景颜色(包含 clearColor)的 ViewController 界面时,会发生卡顿的现象。
-
Objective-C
// 跳转到新页
// 推出新页
/*
自动将 otherViewController 添加到 navigationController 容器中
*/
[self.navigationController pushViewController:otherViewController animated:YES];
// 跳转到已添加页
// 返回上一页
[self.navigationController popViewControllerAnimated:YES];
// 返回到指定页
/*
viewController 添加在容器视图中的顺序已知
*/
[self.navigationController popToViewController:self.navigationController.viewControllers[1]
animated:YES];
// 返回到指定页
/*
viewController 添加在容器视图中的顺序未知
*/
for (UIViewController *viewController in self.navigationController.viewControllers) {
if ([viewController isKindOfClass:[ViewController3 class]]) {
// 回到指定的某一页
[self.navigationController popToViewController:viewController animated:YES];
}
}
// 返回到根视图
[self.navigationController popToRootViewControllerAnimated:YES];
-
Swift
// 跳转到新页
// 推出新页
/*
自动将 otherViewController 添加到 navigationController 容器中
*/
self.navigationController!.pushViewController(otherViewController, animated: true)
// 跳转到已添加页
// 返回上一页
self.navigationController!.popViewControllerAnimated(true)
// 返回到指定页
/*
viewController 添加在容器视图中的顺序已知
*/
self.navigationController!.popToViewController(self.navigationController!.viewControllers[1],
animated: true)
// 返回到指定页
/*
viewController 添加在容器视图中的顺序未知
*/
for viewController in self.navigationController!.viewControllers {
if viewController.isKindOfClass(ViewController3.self) {
// 回到指定的某一页
self.navigationController!.popToViewController(viewController, animated: true)
}
}
// 返回到根视图
self.navigationController?.popToRootViewControllerAnimated(true)
7、创建假导航
-
由假导航跳转到已经存在的 ViewController 界面时,需要在要跳转到的 ViewController 界面中打开显示原生导航。
-
Objective-C
// 隐藏原生导航
/*
从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
*/
- (void)viewWillAppear:(BOOL)animated {
self.navigationController.navigationBarHidden = YES;
}
// 显示原生导航
/*
退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
*/
- (void)viewWillDisappear:(BOOL)animated {
self.navigationController.navigationBarHidden = NO;
}
// 创建假导航
- (void)createCustomNavigationController {
UIImageView *imageView = [[UIImageView alloc]
initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 44)];
imageView.image = [UIImage imageNamed:@"pic1"];
imageView.userInteractionEnabled = YES;
UIButton *lastButton = [UIButton buttonWithType:UIButtonTypeCustom];
lastButton.frame = CGRectMake(10, 7, 60, 30);
[lastButton setTitle:@"上一页" forState:UIControlStateNormal];
[lastButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[lastButton addTarget:self action:@selector(lastClick:) forControlEvents:UIControlEventTouchUpInside];
[imageView addSubview:lastButton];
UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30);
[nextButton setTitle:@"下一页" forState:UIControlStateNormal];
[nextButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[nextButton addTarget:self action:@selector(nextClick:) forControlEvents:UIControlEventTouchUpInside];
[imageView addSubview:nextButton];
// 添加自定义视图
[self.view addSubview:imageView];
}
-
Swift
// 隐藏原生导航
/*
从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
*/
override func viewWillAppear(animated: Bool) {
self.navigationController!.navigationBarHidden = true
}
// 显示原生导航
/*
退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
*/
override func viewWillDisappear(animated: Bool) {
self.navigationController!.navigationBarHidden = false
}
// 创建假导航
func createCustomNavigationController() {
let imageView = UIImageView(frame: CGRectMake(0, 20, self.view.frame.size.width, 44))
imageView.image = UIImage(named: "pic1")
imageView.userInteractionEnabled = true
let lastButton = UIButton(type: .Custom)
lastButton.frame = CGRectMake(10, 7, 60, 30)
lastButton.setTitle("上一页", forState:UIControlState.Normal)
lastButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
lastButton.addTarget(self, action: #selector(ViewController5.lastClick(_:)), forControlEvents: UIControlEvents.TouchUpInside)
imageView.addSubview(lastButton)
let nextButton = UIButton(type: .Custom)
nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30)
nextButton.setTitle("下一页", forState:UIControlState.Normal)
nextButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
nextButton.addTarget(self, action: #selector(ViewController5.nextClick(_:)), forControlEvents: UIControlEvents.TouchUpInside)
imageView.addSubview(nextButton)
// 添加自定义视图
self.view.addSubview(imageView)
}
8、设置转场动画
-
添加上一个页面 push 到本页面的动画效果。
-
Objective-C
// 创建动画
CATransition *animation = [CATransition animation];
// 设置动画时间
animation.duration = 1;
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop;
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn;
animation.type = @"pageCurl";
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
[self.navigationController.view.layer addAnimation:animation forKey:@"animation"];
-
Swift
// 创建动画
let animation = CATransition()
// 设置动画时间
animation.duration = 1
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn
animation.type = "pageCurl"
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
self.navigationController?.view.layer.addAnimation(animation, forKey: "animation")
9、Storyboard 中设置
-
在 Storyboard 场景中设置
-
Navigation Controller
Bar Visibility
可见性
-- Shows Navigation Bar
显示导航条
-- Shows Toolbar
显示工具条
|
Hide Bars |
-- On Swipe | 滑动时隐藏导航条
-- On Tap | 点击时隐藏导航条
-- When Keyboard Appears | 键盘显示时隐藏导航条
-- When Vertically Compact | 垂直滑动时隐藏导航条
-
Navigation Item
-
要在 Controller 的导航工具条上添加 Bar Button Item,需要先添加 Navigation Item
Title
导航条标题
Prompt
导航条提示信息
Back Buttom
自定义导航条返回按钮
-
在 Storyboard 场景绑定的 Controller 中设置
/*
navigationItem 设置使用 self.navigationController.navigationItem 无效
*/
self.navigationController.navigationBar.tintColor = [UIColor redColor];
self.navigationItem.title = @"主页";
NS_CLASS_AVAILABLE_IOS(2_0) @interface UINavigationController : UIViewController
@available(iOS 2.0, *) public class UINavigationController : UIViewController
UINavigationController:容器视图控制器的一种,称之为导航视图控制器,导航视图控制器固定高度是 44。
导航视图控制器中存放的是视图控制器。
导航条的颜色与状态条相同。
-
Objective-C
ViewController1 *viewController1 = [[ViewController1 alloc] init]; // 相当于将 viewController1 对象放到 navigationController 容器中,现在容器中只有一个视图控制器
UINavigationController *navigationController = [[UINavigationController alloc]
initWithRootViewController: viewController1]; // 将 navigationController 添加到 viewController 上
[self addChildViewController:navigationController];
[self.view addSubview:navigationController.view]; // 将 navigationController 做为 window 的根视图控制器
self.window.rootViewController = navigationController;
-
Swift
let viewController1 = ViewController1() // 相当于将 viewController1 对象放到 navigationController 容器中,现在容器中只有一个视图控制器
let navigationController = UINavigationController(rootViewController: viewController1) // 将 navigationController 添加到 viewController 上
self.addChildViewController(navigationController)
self.view.addSubview(navigationController.view) // 将 navigationController 做为 window 的根视图控制器
self.window?.rootViewController = navigationController
2、navigationBar 导航条的设置
-
navigationBar 属性是属于 navigationController 的,不是某个 viewController 的,在一个 viewController 中设置,其他的 viewController 的导航条也会改变。
-
导航条的设置除 appearance 外都在 viewController 中完成设置。
-
Objective-C
// 设置导航条类型
/*
UIBarStyleDefault 白色半透明,默认,不设置时默认为白色半透明
UIBarStyleBlack 灰色半透明
*/
self.navigationController.navigationBar.barStyle = UIBarStyleDefault;
// 设置导航条标题文字的字体和颜色
/*
appearance 用于对没有创建的控件进行统一设置,无法对已经创建的控件进行设置
*/
[UINavigationBar appearance].titleTextAttributes = @{NSFontAttributeName:[UIFont boldSystemFontOfSize:20],
NSForegroundColorAttributeName:[UIColor yellowColor]};
// 设置按钮文字颜色
/*
设置按钮的颜色,默认为蓝色,在 iOS6 中是设置背景颜色
*/
self.navigationController.navigationBar.tintColor = [UIColor redColor];
// 设置导航条背景颜色
/*
默认为白色半透明
*/
self.navigationController.navigationBar.barTintColor = [UIColor lightGrayColor];
// 设置导航条的背景图片
/*
如果图片的高正好是 44,图片与整个导航的高重合,这时候最上面 20 的状态条回到 ios6 以前的效果变成黑色的。
如果图片的高不是 44,哪怕比 44 多一个像素 45,这时候图片往上拉伸,占据状态栏的 20,这时整个高度为 64。
*/
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"pic2"]
forBarMetrics:UIBarMetricsDefault];
// 设置是否关闭导航条半透明状态
/*
NO:关闭,关闭时导航控制器下方视图的 y 坐标为 64,打开时为 20。默认打开
*/
self.navigationController.navigationBar.translucent = NO;
// 设置是否隐藏导航视图控制器
/*
显示时导航控制器下方视图的 y 坐标为 64,隐藏时为 20
*/
self.navigationController.navigationBarHidden = YES;
-
Swift
// 设置导航条类型
/*
Default 白色半透明,默认,不设置时默认为白色半透明
Black 灰色半透明
*/
self.navigationController!.navigationBar.barStyle = UIBarStyle.Default
// 设置导航条标题文字的字体和颜色
/*
appearance 用于对没有创建的控件进行统一设置,无法对已经创建的控件进行设置
*/
UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName:UIFont.boldSystemFontOfSize(20),
NSForegroundColorAttributeName:UIColor.yellowColor()]
// 设置按钮文字颜色
/*
设置按钮的颜色,默认为蓝色,在 iOS6 中是设置背景颜色
*/
self.navigationController!.navigationBar.tintColor = UIColor.redColor()
// 设置导航条背景颜色
/*
默认为白色半透明
*/
self.navigationController!.navigationBar.barTintColor = UIColor.lightGrayColor()
// 设置导航条的背景图片
/*
如果图片的高正好是 44,图片与整个导航的高重合,这时候最上面 20 的状态条回到 ios6 以前的效果变成黑色的。
如果图片的高不是 44 ,哪怕比 44 多一个像素 45,这时候图片往上拉伸,占据状态栏的 20,这时整个高度为 64。
*/
self.navigationController!.navigationBar.setBackgroundImage(UIImage(named: "pic2"),
forBarMetrics: UIBarMetrics.Default)
// 设置是否关闭导航条半透明状态
/*
false:关闭,关闭时导航控制器下方视图的 y 坐标为 64,打开时为 20。默认打开
*/
self.navigationController!.navigationBar.translucent = false
// 设置是否隐藏导航视图控制器
/*
显示时导航控制器下方视图的 y 坐标为 64,隐藏时为 20
*/
self.navigationController!.navigationBarHidden = true
3、navigationItem 导航栏的设置
-
navigationItem 属性不是公有的,是每个 ViewController 都有一个自己 navigationItem,设置自己界面上的 navigationItem 属性不会影响其他的 viewController 界面。
-
导航栏的设置在 viewController 中完成设置。不设置左侧按钮(leftBarButtonItem)时,系统会自动以上一个视图控制器的标题作为左侧按钮,并自带返回响应事件。
-
Objective-C
// 设置导航栏提示内容
/*
导航栏提供了一个很少用的提示模式,该模式将高度扩展了 30 像素
*/
self.navigationItem.prompt = @"hello";
// 设置标题
self.navigationItem.title = @"详情页";
// 设置自定义标题视图
/*
x,y,width 设置无效,图片不会自动压缩
*/
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo_title.png"]];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 0, 35)];
imageView.image = [UIImage imageNamed:@"logo_title.png"];
self.navigationItem.titleView = imageView;
// 设置按钮文字颜色
/*
需要先设置按钮才能生效,iOS6 中是设置背景颜色,在 iOS7 以后变成设置文字颜色
*/
self.navigationItem.leftBarButtonItem.tintColor = [UIColor redColor];
self.navigationItem.rightBarButtonItem.tintColor = [UIColor greenColor];
// 设置导航栏按钮
// 1、通过设置标题文字设置
/*
设置左侧按钮,当设置左按钮的时候,自动隐藏系统自带的返回上一页,需手动设置按钮点击事件
*/
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"返回"
style:UIBarButtonItemStylePlain
target:self
action:@selector(leftButtonClick:)];
// 2、通过系统编辑按钮设置
/*
系统自带的导航专用编辑按钮,点击后变为 Done,再次点击变回 Edit,自带点击响应事件
*/
self.navigationItem.rightBarButtonItem = self.editButtonItem;
// 系统自带编辑按钮点击响应事件,self.editButtonItem 自带的点击事件
- (void)setEditing:(BOOL)editing animated:(BOOL)animated {
// 使用这个方法时,需要让父类也执行一下这个方法
[super setEditing:editing animated:animated];
}
// 3、通过系统提供的样式设置
/*
UIBarButtonSystemItemDone, Done
UIBarButtonSystemItemCancel, Cancel
UIBarButtonSystemItemEdit, Edit
UIBarButtonSystemItemSave, Save
UIBarButtonSystemItemUndo, Undo
UIBarButtonSystemItemRedo, Redo
UIBarButtonSystemItemAdd, 加号 图标按钮
UIBarButtonSystemItemFlexibleSpace, 弹簧 按钮,将 button 推向两边
UIBarButtonSystemItemFixedSpace, 弹簧 按钮,将 button 推向两边,
可设间距 fixedSpaceButton.width = 50;
UIBarButtonSystemItemCompose, 撰写 图标按钮
UIBarButtonSystemItemReply, 答复 图标按钮
UIBarButtonSystemItemAction, 详情 图标按钮
UIBarButtonSystemItemOrganize, 文件夹 图标按钮
UIBarButtonSystemItemBookmarks, 书籍 图标按钮
UIBarButtonSystemItemSearch, 搜索 图标按钮
UIBarButtonSystemItemRefresh, 刷新 图标按钮
UIBarButtonSystemItemStop, X 号 图标按钮
UIBarButtonSystemItemCamera, 相机 图标按钮
UIBarButtonSystemItemTrash, 删除 图标按钮
UIBarButtonSystemItemPlay, 播放 图标按钮
UIBarButtonSystemItemPause, 暂停 图标按钮
UIBarButtonSystemItemRewind, 快退 图标按钮
UIBarButtonSystemItemFastForward, 快进 图标按钮
*/
self.navigationItem.rightBarButtonItem =[[UIBarButtonItem alloc]
initWithBarButtonSystemItem: UIBarButtonSystemItemCamera
target: self
action: @selector(rightButtonClick:)];
// 4、通过图片设置
/*
处理阴影,如果直接设置 image 出现阴影,这时候需要设置图片渲染方式
*/
UIImage *image = [[UIImage imageNamed:@"main_right_nav.png"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]
initWithImage: image
style: UIBarButtonItemStylePlain
target: self
action: @selector(rightButtonClick:)];
// 5、通过自定义视图设置
/*
前两个坐标设置无效,图片会自动压缩
*/
UIButton *myView = [UIButton buttonWithType:UIButtonTypeCustom];
myView.frame = CGRectMake(0, 0, 50, 30);
[myView setBackgroundImage:[UIImage imageNamed:@"pic1"] forState:UIControlStateNormal];
[myView addTarget:self action:@selector(rightButtonClick:) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:myView];
-
Swift
// 设置导航栏提示内容
/*
导航栏提供了一个很少用的提示模式,该模式将高度扩展了 30 像素
*/
self.navigationItem.prompt = "hello"
// 设置标题
self.navigationItem.title = "详情页"
// 设置自定义视图标题
/*
x,y,width 设置无效,图片不会自动压缩
*/
self.navigationItem.titleView = UIImageView(image: UIImage(named: "logo_title.png"))
let imageView = UIImageView(frame: CGRectMake(0, 0, 0, 35))
imageView.image = UIImage(named: "logo_title.png")
self.navigationItem.titleView = imageView
// 设置按钮文字颜色
/*
需要先设置按钮才能生效,在 iOS6 中是设置背景颜色,在 iOS7 以后变成设置文字颜色
*/
self.navigationItem.leftBarButtonItem?.tintColor = UIColor.redColor()
self.navigationItem.rightBarButtonItem?.tintColor = UIColor.greenColor()
// 设置导航栏按钮
// 1、通过设置标题文字设置
/*
设置左侧按钮,当设置左按钮的时候,自动隐藏系统自带的返回上一页,需手动设置按钮点击事件
*/
self.navigationItem.leftBarButtonItem = UIBarButtonItem(title: "返回",
style: .Plain,
target: self,
action: #selector(ViewController2.leftButtonClick(_:)))
// 2、通过系统编辑按钮设置
/*
系统自带的导航专用编辑按钮,点击后变为 Done,再次点击变回 Edit,自带点击响应事件
*/
self.navigationItem.rightBarButtonItem = self.editButtonItem();
// 3、通过系统提供的样式设置
/*
Done, Done
Cancel, Cancel
Edit, Edit
Save, Save
Undo, Undo
Redo, Redo
Add, 加号 图标按钮
FlexibleSpace, 弹簧 空按钮,将 button 推向两边
FixedSpace, 弹簧 空按钮,将 button 推向两边,可设置间距 fixedSpaceButton.width = 50;
Compose, 撰写 图标按钮
Reply, 答复 图标按钮
Action, 详情 图标按钮
Organize, 文件夹 图标按钮
Bookmarks, 书籍 图标按钮
Search, 搜索 图标按钮
Refresh, 刷新 图标按钮
Stop, X 号 图标按钮
Camera, 相机 图标按钮
Trash, 删除 图标按钮
Play, 播放 图标按钮
Pause, 暂停 图标按钮
Rewind, 快退 图标按钮
FastForward, 快进 图标按钮  
*/
self.navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .Camera,
target: self,
action: #selector(ViewController2.rightButtonClick(_:)))
// 4、通过图片设置
/*
处理阴影,如果直接设置 image 出现阴影,这时候需要设置图片渲染方式
*/
let image = UIImage(named: "main_right_nav.png")?.imageWithRenderingMode(.AlwaysOriginal)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: image,
style: .Plain,
target: self,
action: #selector(ViewController2.rightButtonClick(_:)))
// 5、通过自定义视图设置
/*
前两个坐标设置无效,图片会自动压缩
*/
let myView = UIButton(type: .Custom) myView.frame = CGRectMake(0, 0, 50, 30)
myView.setBackgroundImage(UIImage(named: "pic1"), forState: UIControlState.Normal)
myView.addTarget(self, action: #selector(ViewController2.rightButtonClick(_:)),
forControlEvents: .TouchUpInside)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: myView)
4、toolBar 工具条的设置
-
navigationController 自带的 toolbar 属性是所有添加在 navigationController 上的视图所共用的,是属于 navigationController 的,不是属于每个 ViewController 的,但 toolbar 上显示的内容的是每个 ViewController 的,需要在每个 ViewController 上单独设置。
-
toolbar 的显示状态会被带到已经显示过的 ViewController 上,跳转到未显示过的 ViewController 时,toolbar 再次被隐藏。
-
Objective-C
// 显示 toolBar
/*
toolBar 默认是隐藏的,首先需要让它显示出来,默认在屏幕的最下方
*/
self.navigationController.toolbarHidden = NO;
// 向 toolBar 添加按钮
/*
往 toolBar 上添加按钮,最多只能显示8个,往 self.navigationController.toolbarItems 上添加时无用
*/
self.toolbarItems = buttonArray;
-
Swift
// 显示 toolBar
/*
toolBar 默认是隐藏的,首先需要让它显示出来,默认在屏幕的最下方
*/
self.navigationController!.toolbarHidden = false
// 向 toolBar 添加按钮
/*
往 toolBar 上添加按钮,最多只能显示8个,往 self.navigationController.toolbarItems 上添加时无用
*/
self.toolbarItems = buttonArray
5、NC 中 viewController 页面设置
-
Objective-C
// 设置标题
/*
标题会显示在导航视图控制器中根视图的导航条中
*/
viewController1.title = @"vc1 title";
viewController1.navigationItem.title = @"vc1";
// 隐藏分栏视图控制器
/*
导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
*/
viewController1.hidesBottomBarWhenPushed = YES;
-
Swift
// 设置标题
/*
标题会显示在导航视图控制器中根视图的导航条中
*/
viewController1.title = "vc1 title"
viewController1.navigationItem.title = "vc1"
// 隐藏分栏视图控制器
/*
导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
*/
viewController1.hidesBottomBarWhenPushed = true
6、NC 中 viewController 页面跳转
-
跳转到未设置背景颜色(包含 clearColor)的 ViewController 界面时,会发生卡顿的现象。
-
Objective-C
// 跳转到新页
// 推出新页
/*
自动将 otherViewController 添加到 navigationController 容器中
*/
[self.navigationController pushViewController:otherViewController animated:YES];
// 跳转到已添加页
// 返回上一页
[self.navigationController popViewControllerAnimated:YES];
// 返回到指定页
/*
viewController 添加在容器视图中的顺序已知
*/
[self.navigationController popToViewController:self.navigationController.viewControllers[1]
animated:YES];
// 返回到指定页
/*
viewController 添加在容器视图中的顺序未知
*/
for (UIViewController *viewController in self.navigationController.viewControllers) {
if ([viewController isKindOfClass:[ViewController3 class]]) {
// 回到指定的某一页
[self.navigationController popToViewController:viewController animated:YES];
}
}
// 返回到根视图
[self.navigationController popToRootViewControllerAnimated:YES];
-
Swift
// 跳转到新页
// 推出新页
/*
自动将 otherViewController 添加到 navigationController 容器中
*/
self.navigationController!.pushViewController(otherViewController, animated: true)
// 跳转到已添加页
// 返回上一页
self.navigationController!.popViewControllerAnimated(true)
// 返回到指定页
/*
viewController 添加在容器视图中的顺序已知
*/
self.navigationController!.popToViewController(self.navigationController!.viewControllers[1],
animated: true)
// 返回到指定页
/*
viewController 添加在容器视图中的顺序未知
*/
for viewController in self.navigationController!.viewControllers {
if viewController.isKindOfClass(ViewController3.self) {
// 回到指定的某一页
self.navigationController!.popToViewController(viewController, animated: true)
}
}
// 返回到根视图
self.navigationController?.popToRootViewControllerAnimated(true)
7、创建假导航
-
由假导航跳转到已经存在的 ViewController 界面时,需要在要跳转到的 ViewController 界面中打开显示原生导航。
-
Objective-C
// 隐藏原生导航
/*
从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
*/
- (void)viewWillAppear:(BOOL)animated {
self.navigationController.navigationBarHidden = YES;
}
// 显示原生导航
/*
退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
*/
- (void)viewWillDisappear:(BOOL)animated {
self.navigationController.navigationBarHidden = NO;
}
// 创建假导航
- (void)createCustomNavigationController {
UIImageView *imageView = [[UIImageView alloc]
initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 44)];
imageView.image = [UIImage imageNamed:@"pic1"];
imageView.userInteractionEnabled = YES;
UIButton *lastButton = [UIButton buttonWithType:UIButtonTypeCustom];
lastButton.frame = CGRectMake(10, 7, 60, 30);
[lastButton setTitle:@"上一页" forState:UIControlStateNormal];
[lastButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[lastButton addTarget:self action:@selector(lastClick:) forControlEvents:UIControlEventTouchUpInside];
[imageView addSubview:lastButton];
UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30);
[nextButton setTitle:@"下一页" forState:UIControlStateNormal];
[nextButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[nextButton addTarget:self action:@selector(nextClick:) forControlEvents:UIControlEventTouchUpInside];
[imageView addSubview:nextButton];
// 添加自定义视图
[self.view addSubview:imageView];
}
-
Swift
// 隐藏原生导航
/*
从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
*/
override func viewWillAppear(animated: Bool) {
self.navigationController!.navigationBarHidden = true
}
// 显示原生导航
/*
退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
*/
override func viewWillDisappear(animated: Bool) {
self.navigationController!.navigationBarHidden = false
}
// 创建假导航
func createCustomNavigationController() {
let imageView = UIImageView(frame: CGRectMake(0, 20, self.view.frame.size.width, 44))
imageView.image = UIImage(named: "pic1")
imageView.userInteractionEnabled = true
let lastButton = UIButton(type: .Custom)
lastButton.frame = CGRectMake(10, 7, 60, 30)
lastButton.setTitle("上一页", forState:UIControlState.Normal)
lastButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
lastButton.addTarget(self, action: #selector(ViewController5.lastClick(_:)), forControlEvents: UIControlEvents.TouchUpInside)
imageView.addSubview(lastButton)
let nextButton = UIButton(type: .Custom)
nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30)
nextButton.setTitle("下一页", forState:UIControlState.Normal)
nextButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
nextButton.addTarget(self, action: #selector(ViewController5.nextClick(_:)), forControlEvents: UIControlEvents.TouchUpInside)
imageView.addSubview(nextButton)
// 添加自定义视图
self.view.addSubview(imageView)
}
8、设置转场动画
-
添加上一个页面 push 到本页面的动画效果。
-
Objective-C
// 创建动画
CATransition *animation = [CATransition animation];
// 设置动画时间
animation.duration = 1;
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop;
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn;
animation.type = @"pageCurl";
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
[self.navigationController.view.layer addAnimation:animation forKey:@"animation"];
-
Swift
// 创建动画
let animation = CATransition()
// 设置动画时间
animation.duration = 1
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn
animation.type = "pageCurl"
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
self.navigationController?.view.layer.addAnimation(animation, forKey: "animation")
9、Storyboard 中设置
-
在 Storyboard 场景中设置
-
Navigation Controller
Bar Visibility
可见性
-- Shows Navigation Bar
显示导航条
-- Shows Toolbar
显示工具条
|
Hide Bars |
-- On Swipe | 滑动时隐藏导航条
-- On Tap | 点击时隐藏导航条
-- When Keyboard Appears | 键盘显示时隐藏导航条
-- When Vertically Compact | 垂直滑动时隐藏导航条
-
Navigation Item
-
要在 Controller 的导航工具条上添加 Bar Button Item,需要先添加 Navigation Item
Title
导航条标题
Prompt
导航条提示信息
Back Buttom
自定义导航条返回按钮
-
在 Storyboard 场景绑定的 Controller 中设置
/*
navigationItem 设置使用 self.navigationController.navigationItem 无效
*/
self.navigationController.navigationBar.tintColor = [UIColor redColor];
self.navigationItem.title = @"主页";
navigationBar 属性是属于 navigationController 的,不是某个 viewController 的,在一个 viewController 中设置,其他的 viewController 的导航条也会改变。
导航条的设置除 appearance 外都在 viewController 中完成设置。
Objective-C
// 设置导航条类型
/*
UIBarStyleDefault 白色半透明,默认,不设置时默认为白色半透明
UIBarStyleBlack 灰色半透明
*/
self.navigationController.navigationBar.barStyle = UIBarStyleDefault;
// 设置导航条标题文字的字体和颜色
/*
appearance 用于对没有创建的控件进行统一设置,无法对已经创建的控件进行设置
*/
[UINavigationBar appearance].titleTextAttributes = @{NSFontAttributeName:[UIFont boldSystemFontOfSize:20],
NSForegroundColorAttributeName:[UIColor yellowColor]};
// 设置按钮文字颜色
/*
设置按钮的颜色,默认为蓝色,在 iOS6 中是设置背景颜色
*/
self.navigationController.navigationBar.tintColor = [UIColor redColor];
// 设置导航条背景颜色
/*
默认为白色半透明
*/
self.navigationController.navigationBar.barTintColor = [UIColor lightGrayColor];
// 设置导航条的背景图片
/*
如果图片的高正好是 44,图片与整个导航的高重合,这时候最上面 20 的状态条回到 ios6 以前的效果变成黑色的。
如果图片的高不是 44,哪怕比 44 多一个像素 45,这时候图片往上拉伸,占据状态栏的 20,这时整个高度为 64。
*/
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"pic2"]
forBarMetrics:UIBarMetricsDefault];
// 设置是否关闭导航条半透明状态
/*
NO:关闭,关闭时导航控制器下方视图的 y 坐标为 64,打开时为 20。默认打开
*/
self.navigationController.navigationBar.translucent = NO;
// 设置是否隐藏导航视图控制器
/*
显示时导航控制器下方视图的 y 坐标为 64,隐藏时为 20
*/
self.navigationController.navigationBarHidden = YES;
Swift
// 设置导航条类型
/*
Default 白色半透明,默认,不设置时默认为白色半透明
Black 灰色半透明
*/
self.navigationController!.navigationBar.barStyle = UIBarStyle.Default
// 设置导航条标题文字的字体和颜色
/*
appearance 用于对没有创建的控件进行统一设置,无法对已经创建的控件进行设置
*/
UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName:UIFont.boldSystemFontOfSize(20),
NSForegroundColorAttributeName:UIColor.yellowColor()]
// 设置按钮文字颜色
/*
设置按钮的颜色,默认为蓝色,在 iOS6 中是设置背景颜色
*/
self.navigationController!.navigationBar.tintColor = UIColor.redColor()
// 设置导航条背景颜色
/*
默认为白色半透明
*/
self.navigationController!.navigationBar.barTintColor = UIColor.lightGrayColor()
// 设置导航条的背景图片
/*
如果图片的高正好是 44,图片与整个导航的高重合,这时候最上面 20 的状态条回到 ios6 以前的效果变成黑色的。
如果图片的高不是 44 ,哪怕比 44 多一个像素 45,这时候图片往上拉伸,占据状态栏的 20,这时整个高度为 64。
*/
self.navigationController!.navigationBar.setBackgroundImage(UIImage(named: "pic2"),
forBarMetrics: UIBarMetrics.Default)
// 设置是否关闭导航条半透明状态
/*
false:关闭,关闭时导航控制器下方视图的 y 坐标为 64,打开时为 20。默认打开
*/
self.navigationController!.navigationBar.translucent = false
// 设置是否隐藏导航视图控制器
/*
显示时导航控制器下方视图的 y 坐标为 64,隐藏时为 20
*/
self.navigationController!.navigationBarHidden = true
-
navigationItem 属性不是公有的,是每个 ViewController 都有一个自己 navigationItem,设置自己界面上的 navigationItem 属性不会影响其他的 viewController 界面。
-
导航栏的设置在 viewController 中完成设置。不设置左侧按钮(leftBarButtonItem)时,系统会自动以上一个视图控制器的标题作为左侧按钮,并自带返回响应事件。
-
Objective-C
// 设置导航栏提示内容
/*
导航栏提供了一个很少用的提示模式,该模式将高度扩展了 30 像素
*/
self.navigationItem.prompt = @"hello"; // 设置标题
self.navigationItem.title = @"详情页"; // 设置自定义标题视图
/*
x,y,width 设置无效,图片不会自动压缩
*/
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo_title.png"]]; UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 0, 35)];
imageView.image = [UIImage imageNamed:@"logo_title.png"];
self.navigationItem.titleView = imageView; // 设置按钮文字颜色
/*
需要先设置按钮才能生效,iOS6 中是设置背景颜色,在 iOS7 以后变成设置文字颜色
*/
self.navigationItem.leftBarButtonItem.tintColor = [UIColor redColor];
self.navigationItem.rightBarButtonItem.tintColor = [UIColor greenColor]; // 设置导航栏按钮 // 1、通过设置标题文字设置
/*
设置左侧按钮,当设置左按钮的时候,自动隐藏系统自带的返回上一页,需手动设置按钮点击事件
*/
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"返回"
style:UIBarButtonItemStylePlain
target:self
action:@selector(leftButtonClick:)]; // 2、通过系统编辑按钮设置
/*
系统自带的导航专用编辑按钮,点击后变为 Done,再次点击变回 Edit,自带点击响应事件
*/
self.navigationItem.rightBarButtonItem = self.editButtonItem; // 系统自带编辑按钮点击响应事件,self.editButtonItem 自带的点击事件
- (void)setEditing:(BOOL)editing animated:(BOOL)animated { // 使用这个方法时,需要让父类也执行一下这个方法
[super setEditing:editing animated:animated];
} // 3、通过系统提供的样式设置
/*
UIBarButtonSystemItemDone, Done
UIBarButtonSystemItemCancel, Cancel
UIBarButtonSystemItemEdit, Edit
UIBarButtonSystemItemSave, Save
UIBarButtonSystemItemUndo, Undo
UIBarButtonSystemItemRedo, Redo
UIBarButtonSystemItemAdd, 加号 图标按钮
UIBarButtonSystemItemFlexibleSpace, 弹簧 按钮,将 button 推向两边
UIBarButtonSystemItemFixedSpace, 弹簧 按钮,将 button 推向两边,
可设间距 fixedSpaceButton.width = 50;
UIBarButtonSystemItemCompose, 撰写 图标按钮
UIBarButtonSystemItemReply, 答复 图标按钮
UIBarButtonSystemItemAction, 详情 图标按钮
UIBarButtonSystemItemOrganize, 文件夹 图标按钮
UIBarButtonSystemItemBookmarks, 书籍 图标按钮
UIBarButtonSystemItemSearch, 搜索 图标按钮
UIBarButtonSystemItemRefresh, 刷新 图标按钮
UIBarButtonSystemItemStop, X 号 图标按钮
UIBarButtonSystemItemCamera, 相机 图标按钮
UIBarButtonSystemItemTrash, 删除 图标按钮
UIBarButtonSystemItemPlay, 播放 图标按钮
UIBarButtonSystemItemPause, 暂停 图标按钮
UIBarButtonSystemItemRewind, 快退 图标按钮
UIBarButtonSystemItemFastForward, 快进 图标按钮
*/ self.navigationItem.rightBarButtonItem =[[UIBarButtonItem alloc]
initWithBarButtonSystemItem: UIBarButtonSystemItemCamera
target: self
action: @selector(rightButtonClick:)]; // 4、通过图片设置
/*
处理阴影,如果直接设置 image 出现阴影,这时候需要设置图片渲染方式
*/
UIImage *image = [[UIImage imageNamed:@"main_right_nav.png"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]
initWithImage: image
style: UIBarButtonItemStylePlain
target: self
action: @selector(rightButtonClick:)]; // 5、通过自定义视图设置
/*
前两个坐标设置无效,图片会自动压缩
*/
UIButton *myView = [UIButton buttonWithType:UIButtonTypeCustom];
myView.frame = CGRectMake(0, 0, 50, 30);
[myView setBackgroundImage:[UIImage imageNamed:@"pic1"] forState:UIControlStateNormal];
[myView addTarget:self action:@selector(rightButtonClick:) forControlEvents:UIControlEventTouchUpInside]; self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:myView];
-
Swift
// 设置导航栏提示内容
/*
导航栏提供了一个很少用的提示模式,该模式将高度扩展了 30 像素
*/
self.navigationItem.prompt = "hello" // 设置标题
self.navigationItem.title = "详情页" // 设置自定义视图标题
/*
x,y,width 设置无效,图片不会自动压缩
*/
self.navigationItem.titleView = UIImageView(image: UIImage(named: "logo_title.png")) let imageView = UIImageView(frame: CGRectMake(0, 0, 0, 35))
imageView.image = UIImage(named: "logo_title.png")
self.navigationItem.titleView = imageView // 设置按钮文字颜色
/*
需要先设置按钮才能生效,在 iOS6 中是设置背景颜色,在 iOS7 以后变成设置文字颜色
*/
self.navigationItem.leftBarButtonItem?.tintColor = UIColor.redColor()
self.navigationItem.rightBarButtonItem?.tintColor = UIColor.greenColor() // 设置导航栏按钮 // 1、通过设置标题文字设置
/*
设置左侧按钮,当设置左按钮的时候,自动隐藏系统自带的返回上一页,需手动设置按钮点击事件
*/
self.navigationItem.leftBarButtonItem = UIBarButtonItem(title: "返回",
style: .Plain,
target: self,
action: #selector(ViewController2.leftButtonClick(_:))) // 2、通过系统编辑按钮设置
/*
系统自带的导航专用编辑按钮,点击后变为 Done,再次点击变回 Edit,自带点击响应事件
*/
self.navigationItem.rightBarButtonItem = self.editButtonItem(); // 3、通过系统提供的样式设置
/*
Done, Done
Cancel, Cancel
Edit, Edit
Save, Save
Undo, Undo
Redo, Redo
Add, 加号 图标按钮
FlexibleSpace, 弹簧 空按钮,将 button 推向两边
FixedSpace, 弹簧 空按钮,将 button 推向两边,可设置间距 fixedSpaceButton.width = 50;
Compose, 撰写 图标按钮
Reply, 答复 图标按钮
Action, 详情 图标按钮
Organize, 文件夹 图标按钮
Bookmarks, 书籍 图标按钮
Search, 搜索 图标按钮
Refresh, 刷新 图标按钮
Stop, X 号 图标按钮
Camera, 相机 图标按钮
Trash, 删除 图标按钮
Play, 播放 图标按钮
Pause, 暂停 图标按钮
Rewind, 快退 图标按钮
FastForward, 快进 图标按钮  
*/
self.navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .Camera,
target: self,
action: #selector(ViewController2.rightButtonClick(_:))) // 4、通过图片设置
/*
处理阴影,如果直接设置 image 出现阴影,这时候需要设置图片渲染方式
*/
let image = UIImage(named: "main_right_nav.png")?.imageWithRenderingMode(.AlwaysOriginal) self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: image,
style: .Plain,
target: self,
action: #selector(ViewController2.rightButtonClick(_:))) // 5、通过自定义视图设置
/*
前两个坐标设置无效,图片会自动压缩
*/
let myView = UIButton(type: .Custom) myView.frame = CGRectMake(0, 0, 50, 30)
myView.setBackgroundImage(UIImage(named: "pic1"), forState: UIControlState.Normal)
myView.addTarget(self, action: #selector(ViewController2.rightButtonClick(_:)),
forControlEvents: .TouchUpInside) self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: myView)
4、toolBar 工具条的设置
-
navigationController 自带的 toolbar 属性是所有添加在 navigationController 上的视图所共用的,是属于 navigationController 的,不是属于每个 ViewController 的,但 toolbar 上显示的内容的是每个 ViewController 的,需要在每个 ViewController 上单独设置。
-
toolbar 的显示状态会被带到已经显示过的 ViewController 上,跳转到未显示过的 ViewController 时,toolbar 再次被隐藏。
-
Objective-C
// 显示 toolBar
/*
toolBar 默认是隐藏的,首先需要让它显示出来,默认在屏幕的最下方
*/
self.navigationController.toolbarHidden = NO;
// 向 toolBar 添加按钮
/*
往 toolBar 上添加按钮,最多只能显示8个,往 self.navigationController.toolbarItems 上添加时无用
*/
self.toolbarItems = buttonArray;
-
Swift
// 显示 toolBar
/*
toolBar 默认是隐藏的,首先需要让它显示出来,默认在屏幕的最下方
*/
self.navigationController!.toolbarHidden = false
// 向 toolBar 添加按钮
/*
往 toolBar 上添加按钮,最多只能显示8个,往 self.navigationController.toolbarItems 上添加时无用
*/
self.toolbarItems = buttonArray
5、NC 中 viewController 页面设置
-
Objective-C
// 设置标题
/*
标题会显示在导航视图控制器中根视图的导航条中
*/
viewController1.title = @"vc1 title";
viewController1.navigationItem.title = @"vc1";
// 隐藏分栏视图控制器
/*
导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
*/
viewController1.hidesBottomBarWhenPushed = YES;
-
Swift
// 设置标题
/*
标题会显示在导航视图控制器中根视图的导航条中
*/
viewController1.title = "vc1 title"
viewController1.navigationItem.title = "vc1"
// 隐藏分栏视图控制器
/*
导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
*/
viewController1.hidesBottomBarWhenPushed = true
6、NC 中 viewController 页面跳转
-
跳转到未设置背景颜色(包含 clearColor)的 ViewController 界面时,会发生卡顿的现象。
-
Objective-C
// 跳转到新页
// 推出新页
/*
自动将 otherViewController 添加到 navigationController 容器中
*/
[self.navigationController pushViewController:otherViewController animated:YES];
// 跳转到已添加页
// 返回上一页
[self.navigationController popViewControllerAnimated:YES];
// 返回到指定页
/*
viewController 添加在容器视图中的顺序已知
*/
[self.navigationController popToViewController:self.navigationController.viewControllers[1]
animated:YES];
// 返回到指定页
/*
viewController 添加在容器视图中的顺序未知
*/
for (UIViewController *viewController in self.navigationController.viewControllers) {
if ([viewController isKindOfClass:[ViewController3 class]]) {
// 回到指定的某一页
[self.navigationController popToViewController:viewController animated:YES];
}
}
// 返回到根视图
[self.navigationController popToRootViewControllerAnimated:YES];
-
Swift
// 跳转到新页
// 推出新页
/*
自动将 otherViewController 添加到 navigationController 容器中
*/
self.navigationController!.pushViewController(otherViewController, animated: true)
// 跳转到已添加页
// 返回上一页
self.navigationController!.popViewControllerAnimated(true)
// 返回到指定页
/*
viewController 添加在容器视图中的顺序已知
*/
self.navigationController!.popToViewController(self.navigationController!.viewControllers[1],
animated: true)
// 返回到指定页
/*
viewController 添加在容器视图中的顺序未知
*/
for viewController in self.navigationController!.viewControllers {
if viewController.isKindOfClass(ViewController3.self) {
// 回到指定的某一页
self.navigationController!.popToViewController(viewController, animated: true)
}
}
// 返回到根视图
self.navigationController?.popToRootViewControllerAnimated(true)
7、创建假导航
-
由假导航跳转到已经存在的 ViewController 界面时,需要在要跳转到的 ViewController 界面中打开显示原生导航。
-
Objective-C
// 隐藏原生导航
/*
从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
*/
- (void)viewWillAppear:(BOOL)animated {
self.navigationController.navigationBarHidden = YES;
}
// 显示原生导航
/*
退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
*/
- (void)viewWillDisappear:(BOOL)animated {
self.navigationController.navigationBarHidden = NO;
}
// 创建假导航
- (void)createCustomNavigationController {
UIImageView *imageView = [[UIImageView alloc]
initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 44)];
imageView.image = [UIImage imageNamed:@"pic1"];
imageView.userInteractionEnabled = YES;
UIButton *lastButton = [UIButton buttonWithType:UIButtonTypeCustom];
lastButton.frame = CGRectMake(10, 7, 60, 30);
[lastButton setTitle:@"上一页" forState:UIControlStateNormal];
[lastButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[lastButton addTarget:self action:@selector(lastClick:) forControlEvents:UIControlEventTouchUpInside];
[imageView addSubview:lastButton];
UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30);
[nextButton setTitle:@"下一页" forState:UIControlStateNormal];
[nextButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[nextButton addTarget:self action:@selector(nextClick:) forControlEvents:UIControlEventTouchUpInside];
[imageView addSubview:nextButton];
// 添加自定义视图
[self.view addSubview:imageView];
}
-
Swift
// 隐藏原生导航
/*
从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
*/
override func viewWillAppear(animated: Bool) {
self.navigationController!.navigationBarHidden = true
}
// 显示原生导航
/*
退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
*/
override func viewWillDisappear(animated: Bool) {
self.navigationController!.navigationBarHidden = false
}
// 创建假导航
func createCustomNavigationController() {
let imageView = UIImageView(frame: CGRectMake(0, 20, self.view.frame.size.width, 44))
imageView.image = UIImage(named: "pic1")
imageView.userInteractionEnabled = true
let lastButton = UIButton(type: .Custom)
lastButton.frame = CGRectMake(10, 7, 60, 30)
lastButton.setTitle("上一页", forState:UIControlState.Normal)
lastButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
lastButton.addTarget(self, action: #selector(ViewController5.lastClick(_:)), forControlEvents: UIControlEvents.TouchUpInside)
imageView.addSubview(lastButton)
let nextButton = UIButton(type: .Custom)
nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30)
nextButton.setTitle("下一页", forState:UIControlState.Normal)
nextButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
nextButton.addTarget(self, action: #selector(ViewController5.nextClick(_:)), forControlEvents: UIControlEvents.TouchUpInside)
imageView.addSubview(nextButton)
// 添加自定义视图
self.view.addSubview(imageView)
}
8、设置转场动画
-
添加上一个页面 push 到本页面的动画效果。
-
Objective-C
// 创建动画
CATransition *animation = [CATransition animation];
// 设置动画时间
animation.duration = 1;
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop;
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn;
animation.type = @"pageCurl";
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
[self.navigationController.view.layer addAnimation:animation forKey:@"animation"];
-
Swift
// 创建动画
let animation = CATransition()
// 设置动画时间
animation.duration = 1
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn
animation.type = "pageCurl"
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
self.navigationController?.view.layer.addAnimation(animation, forKey: "animation")
9、Storyboard 中设置
-
在 Storyboard 场景中设置
-
Navigation Controller
Bar Visibility
可见性
-- Shows Navigation Bar
显示导航条
-- Shows Toolbar
显示工具条
|
Hide Bars |
-- On Swipe | 滑动时隐藏导航条
-- On Tap | 点击时隐藏导航条
-- When Keyboard Appears | 键盘显示时隐藏导航条
-- When Vertically Compact | 垂直滑动时隐藏导航条
-
Navigation Item
-
要在 Controller 的导航工具条上添加 Bar Button Item,需要先添加 Navigation Item
Title
导航条标题
Prompt
导航条提示信息
Back Buttom
自定义导航条返回按钮
-
在 Storyboard 场景绑定的 Controller 中设置
/*
navigationItem 设置使用 self.navigationController.navigationItem 无效
*/
self.navigationController.navigationBar.tintColor = [UIColor redColor];
self.navigationItem.title = @"主页";
navigationController 自带的 toolbar 属性是所有添加在 navigationController 上的视图所共用的,是属于 navigationController 的,不是属于每个 ViewController 的,但 toolbar 上显示的内容的是每个 ViewController 的,需要在每个 ViewController 上单独设置。
toolbar 的显示状态会被带到已经显示过的 ViewController 上,跳转到未显示过的 ViewController 时,toolbar 再次被隐藏。
Objective-C
// 显示 toolBar
/*
toolBar 默认是隐藏的,首先需要让它显示出来,默认在屏幕的最下方
*/
self.navigationController.toolbarHidden = NO;
// 向 toolBar 添加按钮
/*
往 toolBar 上添加按钮,最多只能显示8个,往 self.navigationController.toolbarItems 上添加时无用
*/
self.toolbarItems = buttonArray;
Swift
// 显示 toolBar
/*
toolBar 默认是隐藏的,首先需要让它显示出来,默认在屏幕的最下方
*/
self.navigationController!.toolbarHidden = false
// 向 toolBar 添加按钮
/*
往 toolBar 上添加按钮,最多只能显示8个,往 self.navigationController.toolbarItems 上添加时无用
*/
self.toolbarItems = buttonArray
-
Objective-C
// 设置标题
/*
标题会显示在导航视图控制器中根视图的导航条中
*/
viewController1.title = @"vc1 title";
viewController1.navigationItem.title = @"vc1"; // 隐藏分栏视图控制器
/*
导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
*/
viewController1.hidesBottomBarWhenPushed = YES;
-
Swift
// 设置标题
/*
标题会显示在导航视图控制器中根视图的导航条中
*/
viewController1.title = "vc1 title"
viewController1.navigationItem.title = "vc1" // 隐藏分栏视图控制器
/*
导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
*/
viewController1.hidesBottomBarWhenPushed = true
6、NC 中 viewController 页面跳转
-
跳转到未设置背景颜色(包含 clearColor)的 ViewController 界面时,会发生卡顿的现象。
-
Objective-C
// 跳转到新页
// 推出新页
/*
自动将 otherViewController 添加到 navigationController 容器中
*/
[self.navigationController pushViewController:otherViewController animated:YES];
// 跳转到已添加页
// 返回上一页
[self.navigationController popViewControllerAnimated:YES];
// 返回到指定页
/*
viewController 添加在容器视图中的顺序已知
*/
[self.navigationController popToViewController:self.navigationController.viewControllers[1]
animated:YES];
// 返回到指定页
/*
viewController 添加在容器视图中的顺序未知
*/
for (UIViewController *viewController in self.navigationController.viewControllers) {
if ([viewController isKindOfClass:[ViewController3 class]]) {
// 回到指定的某一页
[self.navigationController popToViewController:viewController animated:YES];
}
}
// 返回到根视图
[self.navigationController popToRootViewControllerAnimated:YES];
-
Swift
// 跳转到新页
// 推出新页
/*
自动将 otherViewController 添加到 navigationController 容器中
*/
self.navigationController!.pushViewController(otherViewController, animated: true)
// 跳转到已添加页
// 返回上一页
self.navigationController!.popViewControllerAnimated(true)
// 返回到指定页
/*
viewController 添加在容器视图中的顺序已知
*/
self.navigationController!.popToViewController(self.navigationController!.viewControllers[1],
animated: true)
// 返回到指定页
/*
viewController 添加在容器视图中的顺序未知
*/
for viewController in self.navigationController!.viewControllers {
if viewController.isKindOfClass(ViewController3.self) {
// 回到指定的某一页
self.navigationController!.popToViewController(viewController, animated: true)
}
}
// 返回到根视图
self.navigationController?.popToRootViewControllerAnimated(true)
7、创建假导航
-
由假导航跳转到已经存在的 ViewController 界面时,需要在要跳转到的 ViewController 界面中打开显示原生导航。
-
Objective-C
// 隐藏原生导航
/*
从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
*/
- (void)viewWillAppear:(BOOL)animated {
self.navigationController.navigationBarHidden = YES;
}
// 显示原生导航
/*
退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
*/
- (void)viewWillDisappear:(BOOL)animated {
self.navigationController.navigationBarHidden = NO;
}
// 创建假导航
- (void)createCustomNavigationController {
UIImageView *imageView = [[UIImageView alloc]
initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 44)];
imageView.image = [UIImage imageNamed:@"pic1"];
imageView.userInteractionEnabled = YES;
UIButton *lastButton = [UIButton buttonWithType:UIButtonTypeCustom];
lastButton.frame = CGRectMake(10, 7, 60, 30);
[lastButton setTitle:@"上一页" forState:UIControlStateNormal];
[lastButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[lastButton addTarget:self action:@selector(lastClick:) forControlEvents:UIControlEventTouchUpInside];
[imageView addSubview:lastButton];
UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30);
[nextButton setTitle:@"下一页" forState:UIControlStateNormal];
[nextButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[nextButton addTarget:self action:@selector(nextClick:) forControlEvents:UIControlEventTouchUpInside];
[imageView addSubview:nextButton];
// 添加自定义视图
[self.view addSubview:imageView];
}
-
Swift
// 隐藏原生导航
/*
从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
*/
override func viewWillAppear(animated: Bool) {
self.navigationController!.navigationBarHidden = true
}
// 显示原生导航
/*
退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
*/
override func viewWillDisappear(animated: Bool) {
self.navigationController!.navigationBarHidden = false
}
// 创建假导航
func createCustomNavigationController() {
let imageView = UIImageView(frame: CGRectMake(0, 20, self.view.frame.size.width, 44))
imageView.image = UIImage(named: "pic1")
imageView.userInteractionEnabled = true
let lastButton = UIButton(type: .Custom)
lastButton.frame = CGRectMake(10, 7, 60, 30)
lastButton.setTitle("上一页", forState:UIControlState.Normal)
lastButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
lastButton.addTarget(self, action: #selector(ViewController5.lastClick(_:)), forControlEvents: UIControlEvents.TouchUpInside)
imageView.addSubview(lastButton)
let nextButton = UIButton(type: .Custom)
nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30)
nextButton.setTitle("下一页", forState:UIControlState.Normal)
nextButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
nextButton.addTarget(self, action: #selector(ViewController5.nextClick(_:)), forControlEvents: UIControlEvents.TouchUpInside)
imageView.addSubview(nextButton)
// 添加自定义视图
self.view.addSubview(imageView)
}
8、设置转场动画
-
添加上一个页面 push 到本页面的动画效果。
-
Objective-C
// 创建动画
CATransition *animation = [CATransition animation];
// 设置动画时间
animation.duration = 1;
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop;
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn;
animation.type = @"pageCurl";
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
[self.navigationController.view.layer addAnimation:animation forKey:@"animation"];
-
Swift
// 创建动画
let animation = CATransition()
// 设置动画时间
animation.duration = 1
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn
animation.type = "pageCurl"
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
self.navigationController?.view.layer.addAnimation(animation, forKey: "animation")
9、Storyboard 中设置
-
在 Storyboard 场景中设置
-
Navigation Controller
Bar Visibility
可见性
-- Shows Navigation Bar
显示导航条
-- Shows Toolbar
显示工具条
|
Hide Bars |
-- On Swipe | 滑动时隐藏导航条
-- On Tap | 点击时隐藏导航条
-- When Keyboard Appears | 键盘显示时隐藏导航条
-- When Vertically Compact | 垂直滑动时隐藏导航条
-
Navigation Item
-
要在 Controller 的导航工具条上添加 Bar Button Item,需要先添加 Navigation Item
Title
导航条标题
Prompt
导航条提示信息
Back Buttom
自定义导航条返回按钮
-
在 Storyboard 场景绑定的 Controller 中设置
/*
navigationItem 设置使用 self.navigationController.navigationItem 无效
*/
self.navigationController.navigationBar.tintColor = [UIColor redColor];
self.navigationItem.title = @"主页";
跳转到未设置背景颜色(包含 clearColor)的 ViewController 界面时,会发生卡顿的现象。
Objective-C
// 跳转到新页
// 推出新页
/*
自动将 otherViewController 添加到 navigationController 容器中
*/
[self.navigationController pushViewController:otherViewController animated:YES];
// 跳转到已添加页
// 返回上一页
[self.navigationController popViewControllerAnimated:YES];
// 返回到指定页
/*
viewController 添加在容器视图中的顺序已知
*/
[self.navigationController popToViewController:self.navigationController.viewControllers[1]
animated:YES];
// 返回到指定页
/*
viewController 添加在容器视图中的顺序未知
*/
for (UIViewController *viewController in self.navigationController.viewControllers) {
if ([viewController isKindOfClass:[ViewController3 class]]) {
// 回到指定的某一页
[self.navigationController popToViewController:viewController animated:YES];
}
}
// 返回到根视图
[self.navigationController popToRootViewControllerAnimated:YES];
Swift
// 跳转到新页
// 推出新页
/*
自动将 otherViewController 添加到 navigationController 容器中
*/
self.navigationController!.pushViewController(otherViewController, animated: true)
// 跳转到已添加页
// 返回上一页
self.navigationController!.popViewControllerAnimated(true)
// 返回到指定页
/*
viewController 添加在容器视图中的顺序已知
*/
self.navigationController!.popToViewController(self.navigationController!.viewControllers[1],
animated: true)
// 返回到指定页
/*
viewController 添加在容器视图中的顺序未知
*/
for viewController in self.navigationController!.viewControllers {
if viewController.isKindOfClass(ViewController3.self) {
// 回到指定的某一页
self.navigationController!.popToViewController(viewController, animated: true)
}
}
// 返回到根视图
self.navigationController?.popToRootViewControllerAnimated(true)
-
由假导航跳转到已经存在的 ViewController 界面时,需要在要跳转到的 ViewController 界面中打开显示原生导航。
-
Objective-C
// 隐藏原生导航
/*
从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
*/
- (void)viewWillAppear:(BOOL)animated {
self.navigationController.navigationBarHidden = YES;
} // 显示原生导航
/*
退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
*/
- (void)viewWillDisappear:(BOOL)animated {
self.navigationController.navigationBarHidden = NO;
} // 创建假导航
- (void)createCustomNavigationController { UIImageView *imageView = [[UIImageView alloc]
initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 44)];
imageView.image = [UIImage imageNamed:@"pic1"];
imageView.userInteractionEnabled = YES; UIButton *lastButton = [UIButton buttonWithType:UIButtonTypeCustom];
lastButton.frame = CGRectMake(10, 7, 60, 30);
[lastButton setTitle:@"上一页" forState:UIControlStateNormal];
[lastButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[lastButton addTarget:self action:@selector(lastClick:) forControlEvents:UIControlEventTouchUpInside];
[imageView addSubview:lastButton]; UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30);
[nextButton setTitle:@"下一页" forState:UIControlStateNormal];
[nextButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[nextButton addTarget:self action:@selector(nextClick:) forControlEvents:UIControlEventTouchUpInside];
[imageView addSubview:nextButton]; // 添加自定义视图
[self.view addSubview:imageView];
}
-
Swift
// 隐藏原生导航
/*
从其它视图控制器进入该视图控制器时隐藏原生导航,在该视图控制器中显示自定义的假导航
*/
override func viewWillAppear(animated: Bool) {
self.navigationController!.navigationBarHidden = true
} // 显示原生导航
/*
退出该视图控制器时打开显示,在其它的视图控制其中继续显示原生导航
*/
override func viewWillDisappear(animated: Bool) {
self.navigationController!.navigationBarHidden = false
} // 创建假导航
func createCustomNavigationController() { let imageView = UIImageView(frame: CGRectMake(0, 20, self.view.frame.size.width, 44))
imageView.image = UIImage(named: "pic1")
imageView.userInteractionEnabled = true let lastButton = UIButton(type: .Custom)
lastButton.frame = CGRectMake(10, 7, 60, 30)
lastButton.setTitle("上一页", forState:UIControlState.Normal)
lastButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
lastButton.addTarget(self, action: #selector(ViewController5.lastClick(_:)), forControlEvents: UIControlEvents.TouchUpInside)
imageView.addSubview(lastButton) let nextButton = UIButton(type: .Custom)
nextButton.frame = CGRectMake(self.view.frame.size.width - 70, 7, 60, 30)
nextButton.setTitle("下一页", forState:UIControlState.Normal)
nextButton.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
nextButton.addTarget(self, action: #selector(ViewController5.nextClick(_:)), forControlEvents: UIControlEvents.TouchUpInside)
imageView.addSubview(nextButton) // 添加自定义视图
self.view.addSubview(imageView)
}
8、设置转场动画
-
添加上一个页面 push 到本页面的动画效果。
-
Objective-C
// 创建动画
CATransition *animation = [CATransition animation];
// 设置动画时间
animation.duration = 1;
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop;
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn;
animation.type = @"pageCurl";
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
[self.navigationController.view.layer addAnimation:animation forKey:@"animation"];
-
Swift
// 创建动画
let animation = CATransition()
// 设置动画时间
animation.duration = 1
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn
animation.type = "pageCurl"
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
self.navigationController?.view.layer.addAnimation(animation, forKey: "animation")
9、Storyboard 中设置
-
在 Storyboard 场景中设置
-
Navigation Controller
Bar Visibility
可见性
-- Shows Navigation Bar
显示导航条
-- Shows Toolbar
显示工具条
|
Hide Bars |
-- On Swipe | 滑动时隐藏导航条
-- On Tap | 点击时隐藏导航条
-- When Keyboard Appears | 键盘显示时隐藏导航条
-- When Vertically Compact | 垂直滑动时隐藏导航条
-
Navigation Item
-
要在 Controller 的导航工具条上添加 Bar Button Item,需要先添加 Navigation Item
Title
导航条标题
Prompt
导航条提示信息
Back Buttom
自定义导航条返回按钮
-
在 Storyboard 场景绑定的 Controller 中设置
/*
navigationItem 设置使用 self.navigationController.navigationItem 无效
*/
self.navigationController.navigationBar.tintColor = [UIColor redColor];
self.navigationItem.title = @"主页";
添加上一个页面 push 到本页面的动画效果。
Objective-C
// 创建动画
CATransition *animation = [CATransition animation];
// 设置动画时间
animation.duration = 1;
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop;
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn;
animation.type = @"pageCurl";
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
[self.navigationController.view.layer addAnimation:animation forKey:@"animation"];
Swift
// 创建动画
let animation = CATransition()
// 设置动画时间
animation.duration = 1
// 设置动画方向
/*
四种预设,某些类型中此设置无效:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom
*/
animation.subtype = kCATransitionFromTop
// 设置动画类型
/*
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade moveIn push reveal 和系统自带的四种一样
pageCurl pageUnCurl 翻页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube alignedCube 立方体效果
flip alignedFlip oglFlip 翻转效果
rotate 旋转
cameraIris cameraIrisHollowOpen cameraIrisHollowClose 相机
*/
animation.type = kCATransitionMoveIn
animation.type = "pageCurl"
// 添加动画效果
/*
向导航视图控制器上添加动画效果,添加完后再进行跳转
*/
self.navigationController?.view.layer.addAnimation(animation, forKey: "animation")
-
在 Storyboard 场景中设置
-
Navigation Controller
Bar Visibility 可见性 -- Shows Navigation Bar 显示导航条 -- Shows Toolbar 显示工具条 |
Hide Bars |
-- On Swipe | 滑动时隐藏导航条
-- On Tap | 点击时隐藏导航条
-- When Keyboard Appears | 键盘显示时隐藏导航条
-- When Vertically Compact | 垂直滑动时隐藏导航条 -
Navigation Item
- 要在 Controller 的导航工具条上添加 Bar Button Item,需要先添加 Navigation Item
Title 导航条标题 Prompt 导航条提示信息 Back Buttom 自定义导航条返回按钮
-
-
在 Storyboard 场景绑定的 Controller 中设置
/*
navigationItem 设置使用 self.navigationController.navigationItem 无效
*/ self.navigationController.navigationBar.tintColor = [UIColor redColor]; self.navigationItem.title = @"主页";