zoukankan      html  css  js  c++  java
  • ios开发系列-TabBarController

          TabBarController是一个布局控件,提供底部的菜单控件。微信的首页就是这种构造。我们为项目拖入一个TabBarController,效果如下图。这里说个小技巧,我们的故事版也就是stroryboard的编辑页面是可以双击缩小的,这样让你拖入控件的时候定位跟方便。

            

           如上图所见,拖入的TabBarController会包含3个页面,准确的的说其实只有第一个页面才是TabBarController,他相当于一个壳。另外的两个页面(viewController)是他装载的内容,由于我们接下来装载的布局会是tableviewController,所以可以将这两个页面删除。选中页面,按Delete键即可。我们的目标是仿照微信的效果,所以我们拖入4个tableviewController。然后选中TabBarController,按住ctrl键不放,拖到到我们新建的tableviewController上。在弹出的菜单中选择RelationShipSegue下的viewControllers.按以上的操作连接好4个tableviewController。效果如下:

    最终效果如下图:

    为了后面方便区分,我们为4个tableviewcontroller设置id和title.id的设置是在右侧属性设置的第3项中,title是在第4项中。如下图

    我将4个tableviewcontroller的id分别设置为MessageList,AddressList,FindList,UserInfo.对应的titile为微信,通讯录,发现,我。这里说明一下,每个属性设置完成一个最好回车一下。不然有可能丢失。调整完成以后我们再设置下每个tableviewcontroller在tabbarcontroller下显示的名称。选中我们叫微信的那个tableviewcontroller.如下图,左侧的列表区,我们的微信下有个item的组件,他就是我们在tabbar那边显示的效果,选中中,然后讲title设置为微信。按以上的操作,对4个页面做对应的设置。

    最后效果如下图。细心的同学会发现,我们下面的菜单顺序和微信的顺序不太一样啊。,没关系。将下面的tab拖动下,调整好即可。

     

    调整完毕以后感觉还是少了些什么?哦,少了菜单图标。先去网上找下对应的图标吧.说到这里。不同位置的图标格式标准可以参考这篇文章:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html.找好图标,放入图片文件夹以后就开始设置吧,其实很多同学在设置菜单名称的时候估计就已经发现了,他是有image属性的,设置一下即可,如果你想交互更漂亮一点就再设置下选中时候的图片。可以参考下微信下部菜单的效果。如下图:

    设置完后的效果是这个样子的:

    为了快速看到效果,我们先将tabbarcontroller设置为起始页面。设置方式前面有提到过,这里再说一次。选中tabbarcontroller。勾选Is Initial View Controller属性即可。如下图

    我们用模拟器来跑下效果吧:

    最后还差了一点,就是微信选中效果为绿色。而系统默认是蓝色。很遗憾这个属性需要代码才能修改。所以我们创建一个tabbarviewcontroller的后台文件。见下图

    代码见下图:

    最后将tabbarcontroller与后台文件关联,见下图

    最后看下运行效果。最终的效果说实话有浓浓的山寨味,要想精致一点就需要找美工来做图和配色了。这就不是本人的擅长了,大家将就的看一下

    代码地址:https://github.com/xing98218/FirstClass

  • 相关阅读:
    递推&&矩阵加速
    洛谷 P1217 [USACO1.5]回文质数 Prime Palindromes
    总结一下当前阶段我认为比较常用的字符串操作
    关于递归与递推
    P1553 数字反转(升级版)
    关于C++读入数字按位取出与进制转换问题
    一本通题库 1058:求一元二次方程
    弄懂goroutine调度原理
    线程实现模型
    gin-jwt对API进行权限控制
  • 原文地址:https://www.cnblogs.com/starwang/p/4933385.html
Copyright © 2011-2022 走看看