用Storyboard构建标签栏多页面应用程序UI

注：

貌似CSDN的显示效果不佳，假设有须要的话我能够上传pdf格式的；

另外假设文章中有错误还请给位多多提意见，谢谢。

pdf格式文档：http://download.csdn.net/detail/vesper305/7808837；

主要内容

• 标签栏多视图和导航栏多视图的差别
• 用Storyboard构建标签栏多视图应用程序

简述

标签栏应用程序是一种多视图应用程序，它在屏幕底端显示一行button，称为标签栏（tab bar）。单机某个button就会激活一个新的视图控制器（标签页），并显示一个新视图，同一时候底部任然保留着标签栏。

例如以下图所看到的的3个标签栏。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdmVzcGVyMzA1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-family:Arial,Helvetica,sans-serif; font-size:12px">

还有一种常见的多视图iPhone应用程序是基于导航的应用程序，这类应用程序拥有一个导航控制器，使用导航栏控制一系列分层的视图。导航控制器跟踪所在的视图深度，并且向你提供控制权。让你能够回到之前的视图。而标签栏用于从两个或很多其它选项中选择一个选项，并且仅仅能选择一个（标签栏多是用于并列平行的页面间的选择）。

參考：该简述主要參考《精通iOS开发》第六章：多视图应用程序

Storyboard构建标签栏

这里我们讲述一下用Storyboard构建标签栏多视图应用程序UI的方法。

1选择Tab Bar Controller

首先在Storyboard的对象选择中选择一个Tab Bar Controller：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdmVzcGVyMzA1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-family:Arial,Helvetica,sans-serif; font-size:12px">

在Storyboard中我们能够看到例如以下图所看到的的UI界面。第一个页面（Tab
Bar Controller）我们不须要对它进行操作。由于我们对它的标签页（后面两个页面）的操作会自己主动更新到Tab Bar Controller上面。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdmVzcGVyMzA1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-family:Arial,Helvetica,sans-serif; font-size:12px">

2加入我们自己的TableView Controller

从上图能够看到Tab Bar Controller拖入Storyboard中的时候就自带了两个标签页。其类型为View
Controller，我们能够将其删除然后依照我们的须要加入我们自己的视图控制器。

首先我们删除第一个自带的View Controller。然后从右边拖入一个TableView Controller；

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdmVzcGVyMzA1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-family:Arial,Helvetica,sans-serif; font-size:12px">

如上图所看到的。加入自己的TableView Controller之后。从Tab Bar Controller到TableViewController建立跳转（按住Control，从Tab
Bar Controller向TableViewController拖线），从上图我们我们能够看到除了寻常的push、modal、custom三种方式之外，多出了一个View
Controllers，这里我们应该选择这样的连接；

3改动标签栏中的标签样式

选中我们刚才加入的TableViewController中的标签图标（Tab Bar Item）。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdmVzcGVyMzA1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-family:Arial,Helvetica,sans-serif; font-size:12px">

在属性检查器中查看属性：

这里我们能够改动上面标出的两个项。第一个是标签图标以下显示的文字，第二个是图标ICON。以下是我们改动后的效果：

这时。我们查看Tab Bar Controller中的标签栏已经自己主动更新（这就是我们前面提到的不须要改动Tab BarController）：

相同，我们能够删掉其自带的还有一个ViewController然后加入我们须要的TableViewController，然后反复我们刚才的操作：

4加入一个新的Controller

在前面我们拖入的Tab BarController仅仅有两个View Controller，同一时候标签栏中也仅仅有两个标签图标。这里我们加入一个新的视图控制器TableViewController

这里我们能够看到，在未连接新加入的TableView Controller课Tab Bar Controller的时候，标签栏仅仅有两个标签，同一时候新加入的TableView
Controller中也没有标签栏。然后我们依照刚才的方法连接Tab Bar Controller，操作全然一致。

能够看到当连接Tab Bar Controller和TableView Controller之后Tab
Bar Controller中的标签栏标签数自己主动变成了3个。相同我们能够改动新加入的TableViewController中的标签样式。

到此时一个有3个TableView标签页的标签栏多页面UI就做好了，后面的工作就是加入Controller和Model了。这里我们不做介绍。

5执行

为了看出标签页的切换，我们再每一个页面中加入了Label。表面页面的切换：

6參考

具体的做法也能够參考这个视频，讲的比較具体：

http://teamtreehouse.com/library/build-a-selfdestructing-message-iphone-app-2/designing-and-starting-the-app/a-storyboard-with-a-tab-bar-controller

备注

这里的标签栏多页面应用程序仅仅是一个单独的标签栏显示。详细怎样进入标签栏页。用什么方式进入，各有什么差别，我们尚未提及，后面《Tab Bar Controller与导航栏》一文中会详述。

该Demo源码能够再这里下载：http://download.csdn.net/detail/vesper305/7808097。

Guo Liu

于8/24/2014星期日第三次编辑