【一步一步学IOS5】Storyboard创建TabBar控

下面，我们来继续完善Storyboard 项目

1）如何创建Tab B ar 控制键

2）如何使用UIWebView创建About页面

1.Tab Bar控制器 和UIWebView

Tab Bar 控制器在每一个tab中显示一个独特的视图，通常，一个Tab Bar 至少包含2个tab s ，根据需要最多可以添加5个tabs

UIWebView 是加载web内容的轻便组组件。在一些情况下，你希望在App中显示一个单一的web页面，或者让用户在App中访问外部web页面。你可以在App中简单嵌入UIWebView对象，向它发送请求，加载web内容。

2.创建Tab Bar控制器

现在返回Xcode 项目，首先，选择MainStoryboard.storyboard 中的Navigation Controller ,接着选择Editor 菜单下面的 Embed in 子菜单，然后选择Tab Bar Controller 选项

此时，Xcode自动将导航控制器嵌套到一个tab bar控制器中。

3.更改Tab Bar 子项名称

默认情况下，Tab Bar 子项没有名称，也没有图标。在导航控制器中选择tab子项，你可以在Attributes Inspector 窗口，自由修改名称，并指定图标。Tab Bar 子项默认为custom 标识符。当设定为custom时，意味着你需要手动指定标题（title）和图标。

你也可以使用一些内置的tab bar 项目(如More、Favorites 和 T op Rated 等等），这些已经包含了图标。这里为了简化教程，使用这些内置的项目。选择Featured 作为标识符

4.运行App

现在可以运行App了。点击Run按钮，界面如下：

5.添加一个新的Tab

你可以使用tab bar 界面来组织不同的操作模式。每一个tab包含特定的功能。显然，在使用tab bar控制器时，在App中至少包含2个tabs。因此，我们将创建一个新的tab，用于显示App和About页面。

拖拉一个Navigation Controller 对象到Storyboard中。默认的导航控制器和表视图（Table View）控制器相关联。

接着，我们需要在新的导航控制器（Navigation Controller）和现存的Tab Bar 控制器之间建立关联。按住Control 键，点击Tab Bar 控制器，并拖到新的导航控制器上。

释放按钮，弹出一个下拉菜单，选择Relationship-View Controllers 选项，这样告诉Xcode：新的导航控制器是Tab Bar控制器的一部分。

一旦建立上述关联，Tab Bar控制器自动添加一个新的Tab，并关联到新的导航控制器上。

更改新的导航控制器的tab bar 子项为More。保存Stroyboard。再次运行App。

界面如下：

6.使用UIWebView 创建About界面

现在More tab 是空白的，我们将实现一个web视图，显示App的About页面，首先，删除Table View Controller，并替换为一个View Controller。简单选择Table View Controller，点击Delete 按钮移除它，接着从对象库拖拉View Controller对象到storyboard界面

现在，空白的View Controller 并没有和导航控制器相关联。我们需要关联它们。按住Control键，选择导航控制器，并拖拉到View Controller上。

和我们之前做的一样，选择RelationShip - View Controllers 选项。

这个视图控制器的主要目的是呈现About web页面。iOS SDK 有一个内置的UIWebView 对象可用来显示web内容。你可以简单嵌入UIWebView 对象到任一视图控制器中，随后向它发送一个HTTP请求，它将自动装在Web内容。

在对象库找到Web View控件，并添加到视图控制器中。

7.赋值新的视图控制器类

和前面提到过一样，一个空白的视图控制器赋值为默认的UIViewController 类，它仅仅提供了基本的视图管理模型。显然，它没有提供控制UIWebView的变量。我们必须创建一个新的视图控制器类，继承自UIViewController类。

在项目导航中，右击RecipeBook 文件夹，选择New File...

设置类名为AboutViewController，并设置Subclass of 选项为UIVie wController，确定没有勾选With XIB for user interface选项。因为我们使用Storyboards 来设计用户界面，因此不必创建独立的interface builder 文件。点击next 按钮，并保存文件到项目文件夹中。

接着，赋值视图控制器为AboutViewController类。

操作步骤： 返回Storyboards 编辑器，选择视图控制器，然后在Identity Inspector窗口，更改class 属性值为 AboutViewController。

8.使用UIWebView加载请求

为了请求UIWebView加载Web内容，我们必须编写几行代码。

1）在Xcode 项目中添加about.html 页面 和about.jpg 文件

2）为UIWebView 创建一个变量，并和Storyboard 中的Web视图对象建立关联

3）使用UIWebView 中loadRequest：方法加载web内容；

8.添加About.html 文件

文件见附件

9.为UIWebView 创建一个变量

选择AboutViewController.h 文件，为UIWebView 添加一个property

@interface

AboutViewController :

UIViewController

@property

(

nonatomic

,

strong

)

IBOutlet



UIWebView


*webView;

@end

切换到AboutViewController.m 文件。添加 synthesize 指令

@implementation AboutViewController

@synthesize

webView;

和通常一样，需要建立webView 变量和可视化web视图控件之间的连接。在Storyboards 编辑器，按住Control键，并点击View Controller图标，拖拉到Web View 对象上，释放按钮，在弹出的下拉菜单中，选择webView变量。

10.加载web内容

在webDidLoad 方法，添加如下代码加载about.html 页面内容：

- (

void

)viewDidLoad

{

    [


super



viewDidLoad

];

//And code to load web content in UIWebView

   


NSURL


*url = [


NSURL



fileURLWithPath

:[[


NSBundle



mainBundle

]

pathForResource

:


@"about.html"



ofType

:


nil


]];

   

NSURLRequest

*request = [

NSURLRequest


requestWithURL

:url];

    [

webView


loadRequest

:request];

}

UIWebView 类提供了一个便利的方法loadRequest: 来加载web内容，你需要做的是传入一个URL请求，上述代码首先以NSURL 对象返回about.html 文件的系统路径，然后使用URL对象创建NSURLRequest对象。 最后一行的向web view 对象发送请求。

11.最后运行效果

【一步一步学IOS5 】 Storyboard 创建Tab Bar控制器和Web视图