iOS之tab bar

原文链接:http://blog.csdn.net/pony_maggie/article/details/28129473

什么是tabbar? 先几张图:

    

 

上图中蓝色框起来的部分就是tabbar, 它有如下几个特征：

 

1 它通常位于屏幕的最下方，不是必然，但大部分情况是这样。

 

2 tab bar的每个选项卡通常表示不同的功能，这也是它与segmentedcontrol最重要的区别， 后者强调的是同一功能不同类别的区分，前者则是不同功能的区分。拿开头两个图作为例子，看看他们上面红色框起来的部分，叫segmentedcontrol。

 

3 因为2的原因，tab bar的不同选项卡通常对应不同的视图。

 

4 tab bar的每个选项卡一般都有图标，有些是图标+文字(比如最上面两个图),一般不会只有文字。这个也是和segmentedcontrol的一个区别。

 

我今天写的这个demo,为了涉及面比较广一些，我会分别用一个系统的图标，两个自定义的图标（一个带文字和图片，一个只有文字）， 来设置不同的tabbar item。最终效果如下:

       

 

 

开发环境

mac os + xcode5.0 + ios7模拟器

 

tab bar上的图标大小大一般是30*30,tab bar的整体高度是49。如果需要自定义图标，请参考这个大小比例。

 

新建一个single View的工程， 然后拖一个tabbar controller到storyboard。你会发现这个tabbar controller还同时带着两个viewController过来，并自动关连到item。 这个”擅自做主”的行为并不会引起我们的反感，因为我们几乎总是需要这样做。

 

为了便于区分， 我们设置两个view的背景色，最终如下图所示(初始的那个viewcontroller已经被我删除):

 

 

然后我们再增加一个item。

拖一个viewcontroller过来，设置一下背景色。然后按住conrol键，从tabbar controller拖到这个viewcontroller, 选择最下面的”relationship”,如下图所示:

 

然后最终的storyboard如下图所示：

 

好了，编译运行，一切OK。有没有注意到我一行代码都没有写，是不是很神奇呢！