首页导航栏设置

重点掌握内容

导航栏添加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]
}

小码哥-玩转【斗鱼直播APP】系列之首页导航栏设置相关推荐

玩转【斗鱼直播APP】系列之首页导航栏设置
首页导航栏设置重点掌握内容导航栏添加Items 给系统的类扩充方法扩充便利构造函数效果展示在iOS开发中,导航栏的设置是必不可少的一部分. 通常导航栏中会放很多的UIBarButtonIte ...
小码哥-玩转【斗鱼直播APP】系列之项目部署
项目部署目的任何一个项目最好使用源代码管理工具源代码管理工具可以帮助我们解决备份.版本回退等等问题因为是非基础篇,因此具体好处不在累述常见的源代码管理工具: SVN: 集中式源代码管理工具 G ...
小码哥-玩转【斗鱼直播APP】系列之获取APP图片资源
重要提醒原作者的代码有少许问题, 可能会崩溃我已经在我fork的代码中修复了问题. 请大家去我的Github上下载该工具. 如果对你有帮助, 可以star一下哈. Github地址: coderw ...
小码哥-玩转【斗鱼直播APP】系列之利用青花瓷抓取数据
利用青花瓷抓取数据青花瓷是什么? 当然这里可不是周董的歌曲, 而是我们用于抓取接口的工具. 安装一下这个软件百度搜索该工具会找到很多绿色版(破解版的文艺说法). 安装即可, 不再累述. 手机端配置 ...
小码哥-玩转【斗鱼直播APP】系列之实现无限轮播
实现无限轮播生活杂谈最近很多童鞋私信我,Swift项目有些语法跟不上.希望我出OC版的(OC版我会在后续推出),但是以我的考虑来说,Swift在语言排行版上面其实已经超过OC,另外国内现在新项目一 ...
小码哥-玩转【斗鱼直播APP】系列之框架搭建
搭建效果展示框架搭建分析首先最底部是一个UITabbar,因此我们可以用一个UITabBarController作为启动控制器分别添加子控制器HomeVc.LiveVc.FollowVc.Pro ...
小码哥-玩转【斗鱼直播APP】系列之首页布局分析实现
本帖最后由王红元老师于 2016-9-14 21:25 编辑布局首页分析实现完成最终效果这个效果还是挺常见的哈效果分析: 顶部是一个工具类,并且为了该工具类可以复用.(其他界面也用到)最好 ...
小码哥-玩转【斗鱼直播APP】系列之布局推荐界面
布局推荐界面实现效果今天内容完成效果推荐界面分析上层有无限轮播器(之后再完成) 滚动的UIScrollView或者UICollectionView(之后再完成) 下面是UICollection ...
小码哥-玩转【斗鱼直播APP】系列之项目基本设置
设置的内容任何一个项目在新建之后都有很多东西需要进行设置. 比如版本号.BundleID.部署版本等等设置BundleID.部署版本.横竖屏等设置图标.启动图片设置项目名称 Info.plis ...

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

首页导航栏设置

重点掌握内容

效果展示

直接实现（最low方式）

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

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

小码哥-玩转【斗鱼直播APP】系列之首页导航栏设置相关推荐

最新文章

热门文章