Storyboard教程-创建Tab Bar控制器和Web视图 (2)

你可以使用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。保存Storyboard，再次运行App，难道你没有看到一个新的More tab么？

使用UIWebView创建About页面

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

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

和我们之前做的一样，选择Relationship-View Controllers选项，建立两个控制器之间的关系。

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

赋值新的视图控制器类

前面的教程中解释过，一个空白的视图控制器赋值为默认的UIViewController类，它仅仅提供了基本的视图管理模型。显然，它没有提供控制UIWebView的变量。我们必须创建一个新的视图控制器类，继承自UIViewController类。
在项目导航栏中，右击 RecipeBook 文件夹，选择New File ……

选择Cocoa Touch 栏目下面的Objective-C Class选择作为类的模板。

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

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

使用UIWebView加载请求

为了请求UIWebView加载Web内容，我们必须编写几行代码。简单来说，我们需要实现3项工作：

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

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

• 使用UIWebView中的loadRequest: 方法加载web内容；

添加About.html文件

UIWebView 类允许你加载本地的或者远程的web内容。你可以向它发送HTTP请求（如 http://www.google.com）加载远程web站点，或者告诉UIWebView加载App中的web页面。对于本示例教程，我们将about.html页面添加到App中。
你可以创建自己的about.html页面。为了你方便一点，你可以直接下载about.zip文件，解压并添加所有文件到Xcode项目中。

为UIWebView 创建一个变量

选择AboutViewController.h文件，为UIWebView添加一个新的property：
@interface AboutViewController : UIViewController
@property (nonatomic, strong) IBOutlet UIWebView *webView;
@end

切换到 AboutViewController.m文件，为该变量添加synthesis指令。确保你添加的代码在@implementation AboutViewController 下面：
@implementation AboutViewController
@synthesize webView;

如果你忘记了接口和实现的概念，请返回相关教程，重新回顾学习。

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

加载Web内容

在viewDidLoad方法，添加如下代码加载about.html页面内容：
- (void)viewDidLoad
{
[super viewDidLoad];
// Add 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 对象发送请求。

最后运行效果

点击Run 按钮尝试运行App。如果一些运行正常，最后App运行界面如下所示。在选择More tab标签时，将自动加载about.html页面。

总 结

Storyboard简化了iOS App用户界面设计。从本教程中你可以看出，没有编写任何一行代码，你创建了tab bar 控制器，并嵌入了其他控制器到tab子项中。我们也演示了如何使用UIWebView控件加载web内容。UIWebView提供了移动浏览器的基本功能。任何时候你需要在App中显示web页面时，嵌入web view控件，并发送请求即可完成。