效果:
1.为home Storyboard 新建单独的控制器,叫 HomeViewController ,新建文件选择的类型是 UIViewCOntroller
2.控制器的类型为 UIViewController
3.将新建的HomeViewController 与 Home Storyboard进行关联,然后在HomeViewController编写逻辑代码
4.进入到HomeViewController编写代码,先删掉无用代码
1.先对HomeViewController控制器进行扩展:
extension HomeViewController
2.定义设置UI的方法类,设置 fileprivate func setupUI()
3.然后在 super.viewDiaLoad 调用 setupUI()
4.定义一个设置上导航栏的方法类,fileprivate func setupNavigationBar ()
5.在fileprivate func setupUI() 调用 setupNavigationBar()
形成一个多级的嵌套函数调用。进行层层分解,最外层页面加载时调通设置UI界面的方法,UI界面方法里又继续调用其他的UI各个部分的设置方法。
我们先设置导航栏,在setupNavigationBar()方法中进行设置我们要的导航栏效果
6.对我们的系统类UIBarButtonItem进行扩展,来实现我们要的方式。使用扩展构造函数的方式进行扩展
新建Tools工具类文件夹,在文件夹中再新建Extension的文件夹,用于存放对系统类的扩展。新建文件,选择swift文件的格式
importUIKit
extension UIBarButtonItem{
//MARK:在extension 中只能构造便利构造函数,便利构造函数: 1> convenience开头2>在构造函数中必须明确调用一个设计的构造函数(self)
//传入默认的图片名,高亮选中图片名,size属性,size设置默认值为=CGSize.zero
convenience init (imageName :String,highImageName :String="", size :CGSize=CGSize.zero) {
// 1.构建UIButton
letbtn =UIButton()
//设置默认的显示图标
btn.setImage(UIImage(named: imageName), for:UIControlState())
//2.设置高亮显示
ifhighImageName !=""{
btn.setImage(UIImage(named: highImageName), for: .highlighted)
}
//3.设置btn的size
ifsize ==CGSize.zero{
btn.sizeToFit()
}
else{
btn.frame=CGRect(origin:CGPoint.zero, size: size)
}
//4.构建UIBarButton
self.init(customView : btn)
}
}
2.准备好我们的上导航图标 导入到我们的资源文件中
3. 在 fileprivate func setupNavigationBar () 设置上导航的方法中,调用之前设计的扩展类,编写具体的设置代码
//设置导航栏
fileprivate func setupNavigationBar(){
//MARK: 1.设置左侧item logo
navigationItem.leftBarButtonItem=UIBarButtonItem(imageName:"logo")
// MARK: 2.设置右侧的Item
//定义item图标的大小
letsize =CGSize(width:40, height:40)
//定义历史搜索图标
lethisttoryItem =UIBarButtonItem(imageName:"image_my_history", highImageName:"image_my_history_click", size: size)
//定义搜索图标
letsearchItem =UIBarButtonItem(imageName:"btn_search", highImageName:"btn_search_clicked", size: size)
//定义扫描图标
letqrcodeItem =UIBarButtonItem(imageName:"image_scan", highImageName:"image_scan_click", size: size)
navigationItem.rightBarButtonItems= [histtoryItem,searchItem, qrcodeItem ]
}
运行效果
拓展:如果想将logo放在 NavigationBar的中间
navigationItem.titleView=UIImageView(image:UIImage(named:"logo"))
即可实现logo在上导航的中部,但是无法点击