1. 页面关系
(1)有层级关系(页面需添加导航):push/pop(有导航能返回)
- push(进栈):从右向左切换到子页面
- pop(出栈):从左向右返回到父页面
self.navigationController?.popViewController(animated: true)//返回父级
(2)无层级关系(页面不用加导航):present/dismiss(无导航不能直接返回)
- present(模态弹出):从下向上弹出新页面
- dismiss(退场):从上向下消失
2. 为当前页面添加导航
在xcode中选中当前页面控制器后点击菜单栏:Editor->Embed ->Navigation Controller。
备注
:在场景结构栏中可看到新增的导航场景,导航场景中包含了默认的导航控制器和导航条,即导航的MVC都有了。我们需要设置的是M,即给用户看到的导航条的样式,其它的导航会自动帮我们做好。
3. 设置导航条标题和样式
3.1 为导航栏添加左右2个按钮
(1)在导航栏添加左右2个item(图片类型)
(2)为左右2个item分别添加资源图片
现象
:为item添加资源图片后,显示的图片色调和原始图片的色调不一样。分析
:导航条的主题色tint默认是和系统一样(蓝色)。导航条的主题色默认会把放置在它上面的图片背景颜色同化。需要
:根据需求,可能我们需要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都要置空才起作用。
3.2 设置导航默认的返回文字改为箭头图标
//导航默认的返回文字改为箭头图标
self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
3.3 设置导航条标题(图片版)
备注
:默认中间位置是文字
//为导航标题设置一个单独的视图,默认标题(只能是文字)就会不起作用
self.navigationItem.titleView = UIImageView(image: UIImage(named: "ofoLogo"))
self.navigationItem.titleView = UIImageView(image: UIImage(named: "ofoLogo")) //设置导航标题为图片
3.4 设置导航条标题(文字版)
说明
:默认导航是小标题,IOS11后推荐使用大标题。备注
:使用大标题时,页面向下滑动默认大标题会切换为小标题,上滑至顶部时恢复大标题。
4. 导航栏定制
4.1. 自定义主题色theme
4.2. 导航栏标题字体颜色使用主题色
(1)通过导航属性栏直接设置标题字体颜色
备注
:运行时报错,属于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默认会在导航下面,当设置导航栏透明时,进入子页面时顶部会留白边。
4.4. 返回按钮标题留空
4.5. 自定义返回按钮图片
4.6. 设置自定义的返回按钮颜色和主题色相匹配
//导航栏定制-返回按钮颜色和主题色相匹配(导航条的主题色改为app自定义的主题色,而导航条的主题色默认会把返回按钮的颜色同化)
navigationController?.navigationBar.tintColor = UIColor(named: "theme")
4.7. 滑动时隐藏导航
4.8 其它设置
override func viewDidLoad() {
super.viewDidLoad()
//导航栏
self.title = "二维码/条码"
navigationController?.navigationBar.barStyle = .blackTranslucent
navigationController?.navigationBar.tintColor = UIColor.white
//navigationController?.navigationBar.tintColor = UIColor(named: "theme")
}
5. 导航引用(编码给控制器添加导航栏)
参考PageMenu分页控制器(基础篇)-相同分页页面的实现中的问题及解决
6. 拓展
(1)页面标题设置
self.title = "页面标题"