IOS学习之基于IOS7的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。终于效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcG9ueV9tYWdnaWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">   

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcG9ueV9tYWdnaWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=""> 
  

开发环境

mac os + xcode5.0 + ios7模拟器

tab bar上的图标大小大通常是30*30,tab bar的总体高度是49。

假设须要自己定义图标，请參考这个大小比例。

新建一个single View的project， 然后拖一个tabbar controller到storyboard。你会发现这个tabbar controller还同一时候带着两个viewController过来，并自己主动关连到item。 这个”擅自做主”的行为并不会引起我们的反感，由于我们差点儿总是须要这样做。

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

然后我们再添加一个item。

拖一个viewcontroller过来。设置一下背景色。

然后按住conrol键。从tabbar controller拖到这个viewcontroller, 选择最以下的”relationship”,例如以下图所看到的:

然后终于的storyboard例如以下图所看到的：

好了，编译执行，一切OK。有没有注意到我一行代码都没有写，是不是非常奇妙呢！

代码下载地址:

https://github.com/pony-maggie/TabBarControlDemo

或

http://download.csdn.net/detail/pony_maggie/7439409