在前边的几个章节中,静电与大家一起,从无到有的熟悉了Xcode这个神奇的工具,并且教大家在自己的电脑或者手机上亲自运行起iOS的APP,是不是很有成就感?转眼就是这个为设计师准备的xcode教程的第四章了,小伙伴们,隔了这么久,不知道大家是否还记得第三章中,将一个个的界面串起来的例子,但是只有这样显然无法满足大家的需求,在第四章中,我们继续来认识另一个控件,这就是Tab Bar Controller。搞定接下来的教程,拿这个跟同事演示,一定会让他们刮目相看的。
什么是Tab bar Controller呢?举个简单的例子,大家拿起身边的手机,随便打开一个应用,大部分会采用下图这样的布局形式。页面最下方会有若干个图标,点击每个图标会切换不同的页面,这就是xcode里的Tab bar。Tab bar作为一种常见的一级菜单存在在非常多的手机app中。下面,静电就来教大家简单几步在xcode中搞定这样的效果。
这个时候storyboard里什么都没有,ok,下面是重点部分了。上一节中,大家对View Controller这个控件一定都很熟悉了。不过这次有点不同,我们来使用一个新的控件,Tab bar controller。找到下图所示的箭头图标就是这个TBC了(Tab Bar Controller简写,下同)。拖动这个TBC到storyboard中。这下大家应该会明白了,一个具有两个图标的tab导航就出现了。分析一下这个TBC的构成,其实就是一个名为TBC的View,还有两个普通的VC,他们通过一些“电路”链接在一起,链接后,底部就会出现归属于某个页面的tab图标。
可是我们需要的是三个啊! 嗯,少了一个,来手工加上一个。