小碼哥-玩轉【鬥魚直播APP】系列之首頁導航欄設置

首頁導航欄設置

重點掌握內容

• 導航欄添加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]
    }