Swift 自定义导航条

2022-05-05  本文已影响0人  YourSummer

NavigationView

pod 'NavigationView'

Usage

配置导航条

NavigationManager.shared.configNavigation { (config) in
    // 非必须, 默认black
    config.titleColor = .red
    // 必须
    config.backImgName = "nav_btn_close_pre"
    // 非必须, 默认UIFont.systemFont(ofSize: 15, weight: .medium)
    config.titleFont = .systemFont(ofSize: 20, weight: .bold)
}

初始化导航控制器

window = UIWindow(frame: UIScreen.main.bounds)
window?.backgroundColor = .white
//注意: 使用NavigationController初始化
window?.rootViewController = NavigationController(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, 左上角返回按钮icon可能是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"))

补充: 返回(左侧)按钮的事件, 按需重写

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)

查看源码点击=>>> NavigationView

转载注明出处
上一篇下一篇

猜你喜欢

热点阅读