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控件，併發送請求便可完成。