APP 的编程学习

5.编写Home页面 -上导航栏

2017-06-03  本文已影响14人  whong736

效果:


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在上导航的中部,但是无法点击

上一篇下一篇

猜你喜欢

热点阅读