美文网首页APP 的编程学习
5.编写Home页面 -上导航栏

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

作者: whong736 | 来源:发表于2017-06-03 08:23 被阅读14次

    效果:


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

    相关文章

      网友评论

        本文标题:5.编写Home页面 -上导航栏

        本文链接:https://www.haomeiwen.com/subject/mjqpfxtx.html