小码哥-玩转【斗鱼直播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]

}