包括一些顶部栏的基操、以及自定义的和HZNavigationBar的pod库的使用

反正也是瞎写写啦~︿(￣︶￣)︿

顶部栏的一些设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .cyan
        
        navigationItem.title = "知乎日报"
                
        // 添加导航条上方的提示，这个属性被设置后，导航栏的高度将增加到74
        navigationItem.prompt = "正在使用您的位置..."
        // 设置导航栏不透明
        navigationController?.navigationBar.isTranslucent = false
        // 设置导航条样式
        navigationController?.navigationBar.barStyle = UIBarStyle.black
        // 设置导航栏关键元素颜色，tintColor属性是View专门用来指定所包含的关键元素的颜色
        navigationController?.navigationBar.tintColor = UIColor.white
        // 设置导航栏背景图片
        navigationController?.navigationBar.setBackgroundImage(UIImage(named:""), for: .any, barMetrics: .default)
        
        // 设置导航栏 title 的 Font
        navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.font:UIFont.boldSystemFont(ofSize: 18)]
        // 设置导航栏 title 的 Color
        navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.white]
        
        // 设置导航栏阴影部分图片，也就是导航栏下面那条细线
        navigationController?.navigationBar.shadowImage = UIImage(named:"")
        // 设置导航栏阴影颜色
        navigationController?.navigationBar.layer.shadowColor = UIColor.green.cgColor
        // 设置导航栏阴影偏移
        navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0, height: 10)
        // 设置导航栏阴影透明度
        navigationController?.navigationBar.layer.shadowOpacity = 0.2


    }
override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        navigationController?.setNavigationBarHidden(true, animated: false)
    }

这里如果想要设置Title的颜色，参考https://www.crifan.com/swift_set_navigationbar_title_text_color/，渐变色炫酷状态栏(diss by Jason: 被设计打死)https://www.crifan.com/swift_set_navigationbar_title_text_color/

使用titleView和customView

这两个可以模仿UI控件的外形，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let title = UILabel()
        title.text = "知乎日报"
        title.textColor = .darkGray
        title.font = UIFont.systemFont(ofSize: 28, weight: .heavy)
        title.textAlignment = .left
        title.sizeToFit()
        navigationItem.titleView = title
        let date = Date.init()
        let timeFormatter = DateFormatter.init()
        timeFormatter.dateFormat="MM月\ndd日"
        let time = timeFormatter.string(from: date)
        let dateLabel = UILabel()
        dateLabel.text = time
        dateLabel.textColor = .black
        dateLabel.numberOfLines = 0
        dateLabel.frame = CGRect(x: 20, y: 200, width: 100, height: 60)
        navigationItem.leftBarButtonItem = UIBarButtonItem(customView: dateLabel)

HZNavigationBar

老方法在Podfile中添加pod 'HZNavigationBar’然后install

基础设置看这里

让 NavigationBar 变透明

1
2
3
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

导航栏样式修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
   *// *修改导航背景色
   self.navigationController?.navigationBar.barTintColor = UIColor.blackColor()
   
   *// *修改导航栏文字颜色
   self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.whiteColor()]
   
   *// *修改导航栏按钮颜色
   self.navigationController?.navigationBar.tintColor = UIColor.whiteColor()
   
   *// *修改导航背景图片*  *不包含状态栏：*44*点（*88*像素）*  *包含状态栏：*64*点*(128*像素）
   self.navigationController?.navigationBar
       .setBackgroundImage(UIImage(named: "bg"), forBarMetrics: .Default)
       //导航栏去黑线
navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
navigationController?.navigationBar.shadowImage = UIImage()

参考：UINavigationController的常用属性

修改导航栏“返回”按钮

1
2
self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "返回", style: .plain, target: self, action: nil)
// 如果想要只有箭头的话 那就把 title 设置为 ""

更多 例如 在子页面（栈）添加不同的顶部栏 访问https://www.hangge.com/blog/cache/detail_957.html