1. 页面关系
(1)有层级关系(页面需添加导航):push/pop(有导航能返回)
- push(进栈):从右向左切换到子页面
- pop(出栈):从左向右返回到父页面
self.navigationController?.popViewController(animated: true)//返回父级
(2)无层级关系(页面不用加导航):present/dismiss(无导航不能直接返回)
- present(模态弹出):从下向上弹出新页面
- dismiss(退场):从上向下消失
2. 为当前页面添加导航
在xcode中选中当前页面控制器后点击菜单栏：Editor->Embed ->Navigation Controller。
嵌入导航.png
备注：在场景结构栏中可看到新增的导航场景，导航场景中包含了默认的导航控制器和导航条，即导航的MVC都有了。我们需要设置的是M，即给用户看到的导航条的样式，其它的导航会自动帮我们做好。
3. 设置导航条标题和样式
3.1 为导航栏添加左右2个按钮
(1)在导航栏添加左右2个item(图片类型)
在导航栏添加左右2个item.png
(2)为左右2个item分别添加资源图片
为item添加资源图片.png
现象：为item添加资源图片后，显示的图片色调和原始图片的色调不一样。
资源图片原始样式.png
分析：导航条的主题色tint默认是和系统一样(蓝色)。导航条的主题色默认会把放置在它上面的图片背景颜色同化。
导航条的主题色tint默认是和系统一样.png
需要：根据需求，可能我们需要item的色调和导航保持一致，也可能我们需要保持原始图片的色调。保持原图色调：
// MARK: - 界面加载
override func viewDidLoad() {
super.viewDidLoad()
//设置导航左右图像的渲染模式采用原来的颜色
//self.navigationItem.leftBarButtonItem?.image?.withRenderingMode(.alwaysOriginal)/对storyboard上的的设置没起作用
//self.navigationItem.rightBarButtonItem?.image?.withRenderingMode(.alwaysOriginal)
self.navigationItem.leftBarButtonItem?.image = UIImage(named: "leftTopImage")?.withRenderingMode(.alwaysOriginal)
self.navigationItem.rightBarButtonItem?.image = UIImage(named: "rightTopImage")?.withRenderingMode(.alwaysOriginal)
}
注意：使用代码实现保持原图色调时，storyboard只保留2个空白item，title和image都要置空才起作用。
storyboard只保留2个空白item.png
3.2 设置导航默认的返回文字改为箭头图标
//导航默认的返回文字改为箭头图标
self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
3.3 设置导航条标题(图片版)
备注：默认中间位置是文字
默认导航标题是文字.png
//为导航标题设置一个单独的视图，默认标题(只能是文字)就会不起作用
self.navigationItem.titleView = UIImageView(image: UIImage(named: "ofoLogo"))
self.navigationItem.titleView = UIImageView(image: UIImage(named: "ofoLogo")) //设置导航标题为图片
3.4 设置导航条标题(文字版)
设置导航条标题.png
说明：默认导航是小标题，IOS11后推荐使用大标题。
使用大标题.png
备注：使用大标题时，页面向下滑动默认大标题会切换为小标题，上滑至顶部时恢复大标题。
4. 导航栏定制
4.1. 自定义主题色theme
4.2. 导航栏标题字体颜色使用主题色
(1)通过导航属性栏直接设置标题字体颜色
导航栏标题字体颜色设置.png
备注：运行时报错，属于xcode的bug。可采用代码设置的方式来解决。(2)通过代码来设置导航标题字体颜色
override func viewDidLoad() {
super.viewDidLoad()
//设置大标题字体颜色
navigationController?.navigationBar.largeTitleTextAttributes = [
NSAttributedString.Key.foregroundColor : UIColor(named: "theme")!
]
//设置小标题(默认标题)字体颜色
navigationController?.navigationBar.titleTextAttributes = [
NSAttributedString.Key.foregroundColor : UIColor(named: "theme")!
]
}
4.3. 子页面导航栏透明
//导航栏定制-透明效果(背景图片和阴影图片设为空)
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.shadowImage = UIImage()
备注：tablebiew默认会在导航下面，当设置导航栏透明时，进入子页面时顶部会留白边。
页面的空白解决.png
4.4. 返回按钮标题留空
返回按钮标题留空.png
4.5. 自定义返回按钮图片
自定义返回按钮图片.png
4.6. 设置自定义的返回按钮颜色和主题色相匹配
//导航栏定制-返回按钮颜色和主题色相匹配（导航条的主题色改为app自定义的主题色，而导航条的主题色默认会把返回按钮的颜色同化）
navigationController?.navigationBar.tintColor = UIColor(named: "theme")
4.7. 滑动时隐藏导航
隐藏导航.png
4.8 其它设置
override func viewDidLoad() {
super.viewDidLoad()
//导航栏
self.title = "二维码/条码"
navigationController?.navigationBar.barStyle = .blackTranslucent
navigationController?.navigationBar.tintColor = UIColor.white
//navigationController?.navigationBar.tintColor = UIColor(named: "theme")
}
网友评论