NavigationView
示例
要运行示例项目,首先克隆仓库,然后从 Example 目录中运行 pod install
要求
安装
NavigationView 可以通过 CocoaPods 获得。要安装它,只需将以下行添加到您的 Podfile 中
pod 'NavigationView'
使用
配置导航栏
// 全局导航配置, 都有默认值
NavigationManager.shared.configNavigation { config in
/// 后退按钮图片名称,默认:"nav_btn_close_pre"
config.backImageName = "nav_btn_close_pre"
/// 左键到屏幕的距离,默认:8 pt
config.leftSpacing = 8
/// 右视图到屏幕的距离,默认:8 pt
config.rightSpacing = 8
/// 标题颜色,默认:UIColor.black
config.titleColor = UIColor.black
/// 背景色,默认:UIColor.clear
config.backgaroundColor = UIColor.clear
/// 右侧每一项的高度,默认:30 pt
config.rightViewItemsHeight = 30
/// 右侧有多个项目时项目之间的间距,默认:10 pt
config.rightViewItemsSpacing = 10
/// 标题字体,默认:UIFont.systemFont(ofSize: 15, weight: .medium)
config.titleFont = UIFont.systemFont(ofSize: 15, weight: .medium)
}
初始化导航控制器
window = UIWindow(frame: UIScreen.main.bounds)
window?.backgroundColor = .white
window?.rootViewController = UINavigationController(rootViewController: AViewController())
window?.makeKeyAndVisible()
控制器中的导航栏设置
导航栏默认没有底部线条,如果需要的话,使用变量接收
1. 导航条控件设置
a: 设置有标题的导航
// 此方法返回一个UIButton对象, 可用变量接收后添加自定义编辑
title("AViewController")
b: 设置没有标题的导航
// 此方法返回一个UIButton对象, 可用变量接收后添加自定义编辑
title("")
或者
// 此方法返回一个NavigationView对象, 可用变量接收后添加自定义控件
let naviView = navigationView()
naviView.backgroundColor = .red
2. 左侧返回按钮的展示
a: 正常返回按钮
// 此方法返回一个UIButton对象, 可用变量接收后添加自定义编辑
showBackButton()
b: 当前页面自定义返回按钮,例如,模态一个 NavigationController,左上角返回按钮图标可能是 X
// 以下两种方法效果相同
// 区别:
// 方法1会如果不传参数会使用导航条配置中的返回按钮icon
// 1.使用返回按钮的方法
// 此方法返回一个UIButton对象, 可用变量接收后添加自定义编辑
// 如果NavigationManager配置了返回按钮的icon名称 使用:
showBackButton()
// 如果在当前页面返回icon有区别于配置的icon名称, 使用以下两种方法
showBackButton(image: UIImage(named: "ex_image_name"))
// 2.或者使用左侧按钮的方法
// 此方法返回一个UIButton对象, 可用变量接收后添加自定义编辑
showLeftButton(image: UIImage(named: "ex_image_name"))
补充:返回(左侧)按钮的事件,在 UIViewController 中按需重写
override func popViewController() {
super.popViewController()
// 返回事件里添加自己的代码
}
3. 右侧返回按钮的展示
需要手动添加回调事件方法
// 右侧按钮是一个icon
let rightImgBtn = addRightBtn(image: UIImage(named: "ex_image_name"))
rightImgBtn.addTarget(self, action: #selector(rightBtnAction), for: .touchUpInside)
// 右侧按钮仅文本
let rightTitleBtn = addRightBtn(title: "右侧按钮")
rightImgBtn.addTarget(self, action: #selector(rightBtnAction), for: .touchUpInside)
// 注意: 以上两种均返回UIButton对象, 接收后可设置属性
布局
添加导航栏后,当前 ViewController 的 view 是全屏的
因此需要在 ViewController 的 View 子控件布局顶部为导航栏保留高度
附上导航栏精确高度定义,包括刘海屏和非刘海屏
/// 状态栏高度
let StatusBarHeight: CGFloat = UIApplication.shared.statusBarFrame.size.height
/// 导航栏高度: 状态栏高度 + 44
let NavigationHeight: CGFloat = StatusBarHeight + 44
布局示例 demo
// 使用SnapKit布局
// top.equalTo(NavigationHeight) 留出导航条的高度
view.addSubview(iMainTb)
iMainTb.snp.makeConstraints { (make) in
make.top.equalTo(NavigationHeight)
make.left.right.bottom.equalToSuperview()
}
// 使用CGRect布局
// y: 导航条高度, 留出导航条的高度
iMainTb.frame = CGRect(x: 0,
y: NavigationHeight,
width: UIScreen.main.bounds.width,
height: UIScreen.main.bounds.height - NavigationHeight)
导航条上的重新布局
如果导航条的设计比较复杂,那么
// 返回NavigationView对象, 实际是UIView
let naviView = navigationView()
// 更改导航条背景色
naviView.backgroundColor = .red
// 添加子控件
naviView.addSubview(subView)
作者
cpcoder, [email protected]
许可证
NavigationView 可在 MIT 许可证下获得。有关更多信息,请参阅 LICENSE 文件。