ios开发系列-TabBarController
2015-11-03 15:39
459 查看
TabBarController是一个布局控件,提供底部的菜单控件。微信的首页就是这种构造。我们为项目拖入一个TabBarController,效果如下图。这里说个小技巧,我们的故事版也就是stroryboard的编辑页面是可以双击缩小的,这样让你拖入控件的时候定位跟方便。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/692f593bc72d9d2917f7f7941cd1e93e.png)
如上图所见,拖入的TabBarController会包含3个页面,准确的的说其实只有第一个页面才是TabBarController,他相当于一个壳。另外的两个页面(viewController)是他装载的内容,由于我们接下来装载的布局会是tableviewController,所以可以将这两个页面删除。选中页面,按Delete键即可。我们的目标是仿照微信的效果,所以我们拖入4个tableviewController。然后选中TabBarController,按住ctrl键不放,拖到到我们新建的tableviewController上。在弹出的菜单中选择RelationShipSegue下的viewControllers.按以上的操作连接好4个tableviewController。效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/efcb938c24eaa60855c4ab842dfdaf63.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/272bd5776af689cbbdbc76ef7a1b2b5b.png)
最终效果如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/a64671e58c1364104d4e677487b20843.png)
为了后面方便区分,我们为4个tableviewcontroller设置id和title.id的设置是在右侧属性设置的第3项中,title是在第4项中。如下图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/294a147c751c7dc4c9049cf9ddc8416d.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/d72e8024e6b20f4ca4baff9dc22f959d.png)
我将4个tableviewcontroller的id分别设置为MessageList,AddressList,FindList,UserInfo.对应的titile为微信,通讯录,发现,我。这里说明一下,每个属性设置完成一个最好回车一下。不然有可能丢失。调整完成以后我们再设置下每个tableviewcontroller在tabbarcontroller下显示的名称。选中我们叫微信的那个tableviewcontroller.如下图,左侧的列表区,我们的微信下有个item的组件,他就是我们在tabbar那边显示的效果,选中中,然后讲title设置为微信。按以上的操作,对4个页面做对应的设置。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/e347cef0a5522c24dd5cab77bb36a7ee.png)
最后效果如下图。细心的同学会发现,我们下面的菜单顺序和微信的顺序不太一样啊。,没关系。将下面的tab拖动下,调整好即可。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/7b5039237f07a9735a66e4b3673c4498.png)
调整完毕以后感觉还是少了些什么?哦,少了菜单图标。先去网上找下对应的图标吧.说到这里。不同位置的图标格式标准可以参考这篇文章:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html.找好图标,放入图片文件夹以后就开始设置吧,其实很多同学在设置菜单名称的时候估计就已经发现了,他是有image属性的,设置一下即可,如果你想交互更漂亮一点就再设置下选中时候的图片。可以参考下微信下部菜单的效果。如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/159af565b9db27903d65dd5b37888dd0.png)
设置完后的效果是这个样子的:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/6e09b7c30d08fc327fb8a16b6d0cf7e6.png)
为了快速看到效果,我们先将tabbarcontroller设置为起始页面。设置方式前面有提到过,这里再说一次。选中tabbarcontroller。勾选Is Initial View Controller属性即可。如下图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/3d0e948188d512a8d0e92ab61a2121ba.png)
我们用模拟器来跑下效果吧:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/0b2db1fa1db3f14eff9bf537d293293f.png)
最后还差了一点,就是微信选中效果为绿色。而系统默认是蓝色。很遗憾这个属性需要代码才能修改。所以我们创建一个tabbarviewcontroller的后台文件。见下图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/ab64ff936501f1551394fc1a427e535f.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/e00846a69ab92b75cfe3be17c3b5af66.png)
代码见下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/9964e98eccf4677855d3545c3f1554de.png)
最后将tabbarcontroller与后台文件关联,见下图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/6403f21a0fd6220f0eb3e9fa480a0cae.png)
最后看下运行效果。最终的效果说实话有浓浓的山寨味,要想精致一点就需要找美工来做图和配色了。这就不是本人的擅长了,大家将就的看一下
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/7f438405b80751d3ad511ef123ae23bf.png)
代码地址:https://github.com/xing98218/FirstClass
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/692f593bc72d9d2917f7f7941cd1e93e.png)
如上图所见,拖入的TabBarController会包含3个页面,准确的的说其实只有第一个页面才是TabBarController,他相当于一个壳。另外的两个页面(viewController)是他装载的内容,由于我们接下来装载的布局会是tableviewController,所以可以将这两个页面删除。选中页面,按Delete键即可。我们的目标是仿照微信的效果,所以我们拖入4个tableviewController。然后选中TabBarController,按住ctrl键不放,拖到到我们新建的tableviewController上。在弹出的菜单中选择RelationShipSegue下的viewControllers.按以上的操作连接好4个tableviewController。效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/efcb938c24eaa60855c4ab842dfdaf63.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/272bd5776af689cbbdbc76ef7a1b2b5b.png)
最终效果如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/a64671e58c1364104d4e677487b20843.png)
为了后面方便区分,我们为4个tableviewcontroller设置id和title.id的设置是在右侧属性设置的第3项中,title是在第4项中。如下图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/294a147c751c7dc4c9049cf9ddc8416d.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/d72e8024e6b20f4ca4baff9dc22f959d.png)
我将4个tableviewcontroller的id分别设置为MessageList,AddressList,FindList,UserInfo.对应的titile为微信,通讯录,发现,我。这里说明一下,每个属性设置完成一个最好回车一下。不然有可能丢失。调整完成以后我们再设置下每个tableviewcontroller在tabbarcontroller下显示的名称。选中我们叫微信的那个tableviewcontroller.如下图,左侧的列表区,我们的微信下有个item的组件,他就是我们在tabbar那边显示的效果,选中中,然后讲title设置为微信。按以上的操作,对4个页面做对应的设置。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/e347cef0a5522c24dd5cab77bb36a7ee.png)
最后效果如下图。细心的同学会发现,我们下面的菜单顺序和微信的顺序不太一样啊。,没关系。将下面的tab拖动下,调整好即可。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/7b5039237f07a9735a66e4b3673c4498.png)
调整完毕以后感觉还是少了些什么?哦,少了菜单图标。先去网上找下对应的图标吧.说到这里。不同位置的图标格式标准可以参考这篇文章:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html.找好图标,放入图片文件夹以后就开始设置吧,其实很多同学在设置菜单名称的时候估计就已经发现了,他是有image属性的,设置一下即可,如果你想交互更漂亮一点就再设置下选中时候的图片。可以参考下微信下部菜单的效果。如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/159af565b9db27903d65dd5b37888dd0.png)
设置完后的效果是这个样子的:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/6e09b7c30d08fc327fb8a16b6d0cf7e6.png)
为了快速看到效果,我们先将tabbarcontroller设置为起始页面。设置方式前面有提到过,这里再说一次。选中tabbarcontroller。勾选Is Initial View Controller属性即可。如下图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/3d0e948188d512a8d0e92ab61a2121ba.png)
我们用模拟器来跑下效果吧:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/0b2db1fa1db3f14eff9bf537d293293f.png)
最后还差了一点,就是微信选中效果为绿色。而系统默认是蓝色。很遗憾这个属性需要代码才能修改。所以我们创建一个tabbarviewcontroller的后台文件。见下图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/ab64ff936501f1551394fc1a427e535f.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/e00846a69ab92b75cfe3be17c3b5af66.png)
代码见下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/9964e98eccf4677855d3545c3f1554de.png)
最后将tabbarcontroller与后台文件关联,见下图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/6403f21a0fd6220f0eb3e9fa480a0cae.png)
最后看下运行效果。最终的效果说实话有浓浓的山寨味,要想精致一点就需要找美工来做图和配色了。这就不是本人的擅长了,大家将就的看一下
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/02/7f438405b80751d3ad511ef123ae23bf.png)
代码地址:https://github.com/xing98218/FirstClass
相关文章推荐
- ios平移与抖动动画的简单实现
- iOS 集成环信(四) 群聊
- iOS数据持久化存储 (1)-- Plist 、归档、NSUserDefaults、NSFileManager
- IOS 启动画面和图标设置(适配IOS7 and Xcode5)
- iOS QQ第三方登实现
- iOS开发
- IOS 本地储存(数据持久化)
- iOS中自定义导航控制器NavigationController
- cocoapods使用方法
- IOS开发常用的调试命令
- IOS学习之ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结
- IOS 30多个iOS常用动画,带详细注释
- IOS各种调试技巧豪华套餐(好东西)
- iOS开发中,在Xcode6中如何添加pch文件
- 最值得程序猿学习的几个iOS 开源项目
- iOS加载图片imageNamed方法还是imageWithContentsOfFile
- iOS学习笔记--右滑返回
- iOS runtime攻击-cycript
- 《iOS总结》 <Error>: CGContextSaveGState: invalid context 0x0.
- IOS键盘弹出、隐藏