前言
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 = @"主页";