玩转【斗鱼直播APP】系列之首页导航栏设置

iOS导航栏定制

最新推荐文章于 2024-07-04 06:17:13 发布

转载最新推荐文章于 2024-07-04 06:17:13 发布 · 3.9k 阅读

转载专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何在iOS应用中定制导航栏，包括左侧logo和右侧功能按钮的设置，并提供了一种简便的方法来减少代码重复。

首页导航栏设置

重点掌握内容

导航栏添加Items
给系统的类扩充方法
扩充便利构造函数

效果展示

在iOS开发中，导航栏的设置是必不可少的一部分。
通常导航栏中会放很多的UIBarButtonItem，以方便用于操作对应的功能
斗鱼首页导航条展示

直接实现（最low方式）

不管是左侧logo的Item，还是右侧的三个Item都是有点击效果的。
因此在实现时，最好创建UIButton，通过给UIButton设置图片来实现。并且让UIButton作为UIBarButtonItem的customView
实现代码如下：

// MARK:- 设置导航栏内容
extension HomeViewController {
    // MARK: 设置导航栏
    private func setupNavigationBar() {
        setupNavigationLeftBar()
        setupNavigationRightBar()
    }

    private func setupNavigationLeftBar() {

        let btn = UIButton()
        btn.setImage(UIImage(named: "logo"), forState: .Normal)
        btn.sizeToFit()
        btn.addTarget(self, action: #selector(self.leftItemClick), forControlEvents: .TouchUpInside)

        navigationItem.leftBarButtonItem = UIBarButtonItem(customView: btn)
    }

    private func setupNavigationRightBar() {
        // 1.确定UIButton的尺寸
        let size = CGSize(width: 40, height: 44)

        // 2.创建历史的Item
        let historyBtn = UIButton()
        historyBtn.setImage(UIImage(named: "image_my_history"), forState: .Normal)
        historyBtn.setImage(UIImage(named: "image_my_history_click"), forState: .Highlighted)
        historyBtn.addTarget(self, action: #selector(self.historyItemClick), forControlEvents: .TouchUpInside)
        historyBtn.frame = CGRect(origin: CGPointZero, size: size)
        let historyItem = UIBarButtonItem(customView: historyBtn)

        // 3.创建搜索的Item
        let searchBtn = UIButton()
        searchBtn.setImage(UIImage(named: "btn_search"), forState: .Normal)
        searchBtn.setImage(UIImage(named: "btn_search_clicked"), forState: .Highlighted)
        searchBtn.addTarget(self, action: #selector(self.searchItemClick), forControlEvents: .TouchUpInside)
        searchBtn.frame = CGRect(origin: CGPointZero, size: size)
        let searchItem = UIBarButtonItem(customView: searchBtn)

        // 4.创建二维码的Item
        let qrcodeBtn = UIButton()
        qrcodeBtn.setImage(UIImage(named: "image_scan"), forState: .Normal)
        qrcodeBtn.setImage(UIImage(named: "image_scan_click"), forState: .Highlighted)
        qrcodeBtn.addTarget(self, action: #selector(self.qrCodeItemClick), forControlEvents: .TouchUpInside)
        qrcodeBtn.frame = CGRect(origin: CGPointZero, size: size)
        let qrcodeItem = UIBarButtonItem(customView: qrcodeBtn)

        navigationItem.rightBarButtonItems = [historyItem, searchItem , qrcodeItem]
    }

    // MARK: 导航栏的事件处理
    @objc private func leftItemClick() {
        print("点击了logo")
    }

    @objc private func qrCodeItemClick() {
        print("点击了二维码")
    }

    @objc private func searchItemClick() {
        print("点击了搜索")
    }

    @objc private func historyItemClick() {
        print("点击了历史")
    }
}

优化上述代码（系统类扩充方法）

上述方式虽然实现了功能，但是我们发现重复代码太多。
并且如果其他地方也用到类似的功能，还是要写大量代码。
最好的方式就是进行抽取？
如何抽取呢？
- 在OC中我们通常给系统的类抽取分类，在分类中给系统的类扩充方法
- Swift也是类似，只是Swift使用extension，表示对系统的类进行扩充
比如我们给系统的类抽取类方法，代码如下：
给系统类扩充类方法

extension UIBarButtonItem {

    class func createBarButtonItem(imageName : String, highImageName : String = "", size : CGSize = CGSizeZero, target : AnyObject? = nil, action : Selector = nil) -> UIBarButtonItem {
        // 1.创建UIButton
        let btn = UIButton(type: .Custom)

        // 2.给UIButton设置属性
        btn.setImage(UIImage(named: imageName), forState: .Normal)
        if highImageName != "" {
            btn.setImage(UIImage(named: highImageName), forState: .Highlighted)
        }

        // 3.设置尺寸
        if size == CGSizeZero {
            btn.sizeToFit()
        } else {
            btn.frame = CGRect(origin: CGPointZero, size: size)
        }

        // 4.监听点击
        btn.addTarget(target, action: action, forControlEvents: .TouchUpInside)

        return UIBarButtonItem(customView: btn)
    }

}

使用方式:

    // MARK: 设置导航栏
    private func setupNavigationBar() {
        setupNavigationLeftBar()
        setupNavigationRightBar()
    }

    private func setupNavigationLeftBar() {
        navigationItem.leftBarButtonItem = UIBarButtonItem.createBarButtonItem("logo", target: self, action: #selector(self.leftItemClick))
    }

    private func setupNavigationRightBar() {
        let size = CGSize(width: 40, height: 44)
        let historyItem = UIBarButtonItem.createBarButtonItem("image_my_history", highImageName: "image_my_history_click", size: size, target: self, action: #selector(self.historyItemClick))
        let searchItem = UIBarButtonItem.createBarButtonItem("btn_search", highImageName: "btn_search_click", size: size, target: self, action: #selector(self.searchItemClick))
        let qrCodeItem = UIBarButtonItem.createBarButtonItem("image_scan", highImageName: "image_scan_click", size: size, target: self, action: #selector(self.qrCodeItemClick))

        navigationItem.rightBarButtonItems = [historyItem, searchItem , qrCodeItem]
    }

扩充遍历构造函数（推荐做法）

遍历构造函数特点
- 构造函数前以convenience开头
- 必须明确调用设计构造函数：例如self.init()
构造函数写法：

extension UIBarButtonItem {

    convenience init(imageName : String, highImageName : String = "", size : CGSize = CGSizeZero, target : AnyObject? = nil, action : Selector = nil) {
        let btn = UIButton(type: .Custom)
        btn.setImage(UIImage(named: imageName), forState: .Normal)
        if highImageName != "" {
            btn.setImage(UIImage(named: highImageName), forState: .Highlighted)
        }

        if size == CGSizeZero {
            btn.sizeToFit()
        } else {
            btn.frame = CGRect(origin: CGPointZero, size: size)
        }

        btn.addTarget(target, action: action, forControlEvents: .TouchUpInside)

        self.init(customView: btn)
    }
}

使用方式：

// MARK: 设置导航栏
    private func setupNavigationBar() {
        setupNavigationLeftBar()
        setupNavigationRightBar()
    }

    private func setupNavigationLeftBar() {

        navigationItem.leftBarButtonItem = UIBarButtonItem(imageName: "logo", target: self, action: #selector(self.leftItemClick))
    }

    private func setupNavigationRightBar() {
        let size = CGSize(width: 40, height: 44)
        let historyItem = UIBarButtonItem(imageName: "image_my_history", highImageName: "image_my_history_click", size: size, target: self, action: #selector(self.historyItemClick))
        let searchItem = UIBarButtonItem(imageName: "btn_search", highImageName: "btn_search_click", size: size, target: self, action: #selector(self.searchItemClick))
        let qrCodeItem = UIBarButtonItem(imageName: "image_scan", highImageName: "image_scan_click", size: size, target: self, action: #selector(self.qrCodeItemClick))

        navigationItem.rightBarButtonItems = [historyItem, searchItem , qrCodeItem]
    }