下面，我們來繼續(xù)完善Storyboard 項目

?

1）如何創(chuàng)建Tab B ar 控制鍵

2）如何使用UIWebView創(chuàng)建About頁面

?

1.Tab Bar控制器 和UIWebView

?

Tab Bar 控制器在每一個tab中顯示一個獨特的視圖，通常，一個Tab Bar 至少包含2個tab s ，根據(jù)需要最多可以添加5個tabs

?

UIWebView 是加載web內(nèi)容的輕便組組件。在一些情況下，你希望在App中顯示一個單一的web頁面，或者讓用戶在App中訪問外部web頁面。你可以在App中簡單嵌入UIWebView對象，向它發(fā)送請求，加載web內(nèi)容。

?

2.創(chuàng)建Tab Bar控制器

?

現(xiàn)在返回Xcode 項目，首先，選擇MainStoryboard.storyboard 中的Navigation Controller ,接著選擇Editor 菜單下面的 Embed in 子菜單，然后選擇Tab Bar Controller 選項

?

此時，Xcode自動將導(dǎo)航控制器嵌套到一個tab bar控制器中。

?

3.更改Tab Bar 子項名稱

?

默認情況下，Tab Bar 子項沒有名稱，也沒有圖標(biāo)。在導(dǎo)航控制器中選擇tab子項，你可以在Attributes Inspector 窗口，自由修改名稱，并指定圖標(biāo)。Tab Bar 子項默認為custom 標(biāo)識符。當(dāng)設(shè)定為custom時，意味著你需要手動指定標(biāo)題（title）和圖標(biāo)。

?

你也可以使用一些內(nèi)置的tab bar 項目(如More、Favorites 和 T op Rated 等等），這些已經(jīng)包含了圖標(biāo)。這里為了簡化教程，使用這些內(nèi)置的項目。選擇Featured 作為標(biāo)識符

?

?

4.運行App

?

現(xiàn)在可以運行App了。點擊Run按鈕，界面如下：

?

5.添加一個新的Tab

?

你可以使用tab bar 界面來組織不同的操作模式。每一個tab包含特定的功能。顯然，在使用tab bar控制器時，在App中至少包含2個tabs。因此，我們將創(chuàng)建一個新的tab，用于顯示App和About頁面。

?

拖拉一個Navigation Controller 對象到Storyboard中。默認的導(dǎo)航控制器和表視圖（Table View）控制器相關(guān)聯(lián)。

?

接著，我們需要在新的導(dǎo)航控制器（Navigation Controller）和現(xiàn)存的Tab Bar 控制器之間建立關(guān)聯(lián)。按住Control 鍵，點擊Tab Bar 控制器，并拖到新的導(dǎo)航控制器上。

?

釋放按鈕，彈出一個下拉菜單，選擇Relationship-View Controllers 選項，這樣告訴Xcode：新的導(dǎo)航控制器是Tab Bar控制器的一部分。

?

一旦建立上述關(guān)聯(lián)，Tab Bar控制器自動添加一個新的Tab，并關(guān)聯(lián)到新的導(dǎo)航控制器上。

?

更改新的導(dǎo)航控制器的tab bar 子項為More。保存Stroyboard。再次運行App。

?

界面如下：

?

6.使用UIWebView 創(chuàng)建About界面

?

現(xiàn)在More tab 是空白的，我們將實現(xiàn)一個web視圖，顯示App的About頁面，首先，刪除Table View Controller，并替換為一個View Controller。簡單選擇Table View Controller，點擊Delete 按鈕移除它，接著從對象庫拖拉View Controller對象到storyboard界面

?

現(xiàn)在，空白的View Controller 并沒有和導(dǎo)航控制器相關(guān)聯(lián)。我們需要關(guān)聯(lián)它們。按住Control鍵，選擇導(dǎo)航控制器，并拖拉到View Controller上。

?

和我們之前做的一樣，選擇RelationShip - View Controllers 選項。

?

這個視圖控制器的主要目的是呈現(xiàn)About web頁面。iOS SDK 有一個內(nèi)置的UIWebView 對象可用來顯示web內(nèi)容。你可以簡單嵌入UIWebView 對象到任一視圖控制器中，隨后向它發(fā)送一個HTTP請求，它將自動裝在Web內(nèi)容。

?

在對象庫找到Web View控件，并添加到視圖控制器中。

?

7.賦值新的視圖控制器類

?

和前面提到過一樣，一個空白的視圖控制器賦值為默認的UIViewController 類，它僅僅提供了基本的視圖管理模型。顯然，它沒有提供控制UIWebView的變量。我們必須創(chuàng)建一個新的視圖控制器類，繼承自UIViewController類。

?

在項目導(dǎo)航中，右擊RecipeBook 文件夾，選擇New File...

?

設(shè)置類名為AboutViewController，并設(shè)置Subclass of 選項為UIVie wController，確定沒有勾選With XIB for user interface選項。因為我們使用Storyboards 來設(shè)計用戶界面，因此不必創(chuàng)建獨立的interface builder 文件。點擊next 按鈕，并保存文件到項目文件夾中。

?

接著，賦值視圖控制器為AboutViewController類。

?

操作步驟： 返回Storyboards 編輯器，選擇視圖控制器，然后在Identity Inspector窗口，更改class 屬性值為 AboutViewController。

?

8.使用UIWebView加載請求

?

為了請求UIWebView加載Web內(nèi)容，我們必須編寫幾行代碼。

?

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

?

2）為UIWebView 創(chuàng)建一個變量，并和Storyboard 中的Web視圖對象建立關(guān)聯(lián)

?

3）使用UIWebView 中l(wèi)oadRequest：方法加載web內(nèi)容；

?

8.添加About.html 文件

?

文件見附件

?

9.為UIWebView 創(chuàng)建一個變量

?

選擇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圖標(biāo)，拖拉到Web View 對象上，釋放按鈕，在彈出的下拉菜單中，選擇webView變量。

?

10.加載web內(nèi)容

?

在webDidLoad 方法，添加如下代碼加載about.html 頁面內(nèi)容：

?

- ( 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內(nèi)容，你需要做的是傳入一個URL請求，上述代碼首先以NSURL 對象返回about.html 文件的系統(tǒng)路徑，然后使用URL對象創(chuàng)建NSURLRequest對象。 最后一行的向web view 對象發(fā)送請求。

?

11.最后運行效果

?

?

【一步一步學(xué)IOS5 】 Storyboard 創(chuàng)建Tab Bar控制器和Web視圖