這是故事版系列的第三篇文章。上一次，我們討論了如何給用聯線（Segue）連接的視圖控制器之間的數據傳遞。它應該很容易吧？現在，讓我們繼續進行我們的故事板項目，看你怎么可以在iPhone的應用程序創建其他兩個常見的UI元素。
在本教程中，您將了解到：
>如何創建一個標簽欄控制器(Tab Bar)
>如何創建一個“關於”頁面使用的UIWebView
如果你是新學故事板的，我建議你從我的第一個教程開始。因為討論的材料是基於我們之前做過的工作。
標簽欄控制器(Tab Bar Controller)和網頁視圖(UIWebView)
首先，像往常一樣，讓我們對標簽欄控制器和UIWebView進行一個簡短的介紹。你可能不熟悉“標簽欄”，但它經常出現在大多數的iPhone應用程序。只要看看在下面的示例應用程序就行。所有這些都在標簽欄控制器使用標簽以顯示不同的視圖。通常情況下，標簽欄包含至少兩個選項卡，你可以根據您的需要添加五個選項卡。
標簽欄的示例應用程序接口
另一方面，UIWebView是一個方便的加載網頁內容組件。在某些情況下，你要顯示一個單一的網頁在你的本地應用程序，或讓用戶在你的應用程序訪問的外部網頁。你可以簡單地在你的應用程序中嵌入UIWebView對象，它發送一個請求加載的網頁內容。
創建一個標簽欄控制器
現在回到我們的Xcode項目。首先，讓我回顧一下我們做了什么。如果你按照前面的教程中，你應該建立一個簡單的菜單導航界面的應用程序。這沒有完全實現，只是為了演示需要。
在前面的教程中的最后交付程序
在本教程中，我們將要修改應用程序，並創建一個標簽欄界面。你可能會認為這將是很困難的，需要大量的編碼工作。故事板功能引入簡化了一切。導航控制器中嵌入一個標簽欄控制器變得很容易，只需點擊鼠標。
首先，選擇“導航控制器”中MainStoryboard.storyboard。然后選擇“編輯”菜單中，選擇“嵌入”，其次是“標簽欄控制器”。
導航控制器中嵌入標簽欄控制器
如下圖所示，正如你可以看到，Xcode會自動將標簽欄控制器嵌入到導航控制器內。超級簡單的，對不對？你可能會認為這是微不足道的。在蘋果公司推出的故事板功能前，你需要編寫代碼和設計一個獨立的NIB以嵌入導航控制器。
嵌入標簽欄控制器后的導航控制器
改變標簽欄的條目名
默認情況下，標簽欄的條目名是未命名，沒有圖標的。在導航控制器選擇標簽項。你可以自由更改名稱，並在“屬性”檢查器中指定一個圖標。標簽欄項目是默認為“自定義”的標識。當它設置為自定義，這意味着你必須手動指定的標題和圖像。
“自定義”選項卡欄項目
您也可以使用一些內置的標簽欄項目（例如，我的最愛(Favourite)，最精彩的(Top Rated)），已經包含一個圖標。讓我們保持教程的簡單，就利用內置的項目。選擇“精選(Featured)”的標識符,你的屏幕應該看起來像這樣：
更改標簽欄的標識符為特色
運行你的應用程序
點擊“運行”按鈕，看看它的外觀。應用程序應該和我們在前面的教程建立的非常相似的，除了有標簽欄。
添加一個新的標簽
您可以使用選項卡欄界面為不同的操作模式組織你的應用程序。每個選項卡都提供特定的功能。很明顯，至少在有兩個選項卡中使用的應用程序里使用標簽欄控制器。因此，我們要創建一個新的選項卡用於顯示應用程序的“關於”頁面。
將另個“導航器”對象拖動到故事板中。默認的導航控制器，和與之聯系的表視圖控制器。先把他放這里把，待會我們將修改他。
添加一個新的導航控制器
接下來，我們要建立新的導航控制器和現有的標簽欄控制器之間的關系。按住“控制”鍵，單擊標簽欄控制器，拖動鼠標到新的導航控制器。
鏈接標簽欄控制器和導航控制器
松開鼠標，將顯示一個彈窗。選擇“Relationship – View Controllers”選項。這告訴Xcode的標簽欄控制器，新的導航控制器是他的一部分。
建立關系的導航控制器
只要建立的關系，標簽欄控制器會自動添加一個新的標簽並與導航控制器建立聯系。
新標簽頁的標簽欄控制器
更換新的導航控制器標簽的表示符為“更多(More)”選項卡欄項。保存Storyboard，並再次運行該應用程序。這是你是不是看到新的“更多(More)”標簽？
創建“關於”的網頁視圖
“更多”標簽現在是空的。我們打算把“關於”頁面顯示變成一個web視圖。首先，刪除“表視圖控制器”,只需選擇“表視圖控制器”，然后單擊“刪除”按鈕將其刪除。然后點擊對象庫“視圖 - 控制器（View-Controller）”對象,將視圖控制器(View Controller)拖出。
更換表視圖控制器視圖控制器
截至目前，空 的視圖控制器與導航控制器不相關。我們必須將它們連接起來。按住命令鍵，選擇導航控制器，並向視圖控制器拖動。
鏈接視圖控制器和導航控制器
像我們前面做了的那樣，選擇“Relationship-Root View Controller”選項，在兩個控制器之間建立關系。
相關的視圖控制器之間建立關系
這個視圖控制器的主要目的是顯示“關於”網頁。iOS的SDK有一個內置的UIWebView對象可以用來顯示網頁內容。您可以簡單地將lUIWebView對象嵌入在任何視圖控制器中。然后你向它發送一個HTTP請求，它會自動加載網頁內容。在對象庫中找到“WebView”，並把它添加到視圖控制器中。
添加Web視圖 - 視圖 - 控制器
分配一個新的視圖控制器類
正如在前面的教程中講過，一個空白的視圖控制器默認為UIViewController類，只提供了基本視圖的管理模式。很顯然，它沒有一個變量來控制UIWebView。因此，我們必須創建一個新的從UIViewController繼承的視圖控制器類。
在項目瀏覽器中，用鼠標右鍵單擊“RecipeBook”文件夾並選擇“New File ...”。
在Xcode項目中創建新文件
選擇“Objective-C類的類模板”下的Cocoa Touch的。
選擇目標C類
將該類命名為為“AboutViewController”，並設置他為“UIViewController”的子類。請確保取消選中“XIB用戶界面”的選項。我們正在使用演示板設計用戶界面，我們不需要創建一個單獨的界面生成器文件。單擊“下一步”，在你的項目文件夾中保存。
創建一個新類 - AboutViewController
接下來，將拖拽的WebView指定為新建的視圖控制器“AboutViewController”。回到故事板編輯器，選擇視圖控制器。在身份檢查器（identity inspector），改變類為“AboutViewController”。
設置自定義類AboutViewController
使用UIWebView加載網頁
要請求UIWebView加載網頁內容，我們需要寫幾行代碼。簡單地說，我們需要實現的有兩樣東西：
>聲明一個變量給UIWebView，將它與故事板中的Web視圖對象聯系
>使用loadRequest：在UIWebView中加載web內容的方法
添加'About.html“
UIWebView類允許你加載在本地和遠程的網頁內容。你可以向它發送一個HTTP請求（例如http://www.google.com）來加載一個遠程網站。或者，你可以告訴UIWebView加載在你的應用程序中的網頁。
指定UIWebView的一個變量
選擇“AboutViewController.h”，並添加一個新的屬性給UIWebView：
|
1
2 3 4 5 |
@interface
AboutViewController
:
UIViewController
@property (nonatomic, strong ) IBOutlet UIWebView *webView; @end |
轉到的“AboutViewController.m”，並添加如下代碼。確保你的代碼放在“@implement AboutViewController”下：
|
1
2 3 |
@implementation
AboutViewController
@synthesize webView; |
像往常一樣，它需要“webView”變量和WebView之間建立連接。在故事板編輯器，按命令鍵，然后點擊“視圖 - 控制器”圖標(剛添加的View Controller最下角的圓圈)，將其拖動到Web視圖對象。放開兩個按鈕，彈出一個顯示變量的選擇。選擇“WEBVIEW”變量。
鏈接UIWebView和WEBVIEW變量
加載Web內容
viewDidLoad方法內，添加下面的代碼：
|
1
2 3 4 5 6 7 8 |
-
(
void
)viewDidLoad
{ [super viewDidLoad ]; // Add code to load web content in UIWebView NSURL *url = [ NSURL URLWithString:@http://www.baidu.com ] ]; NSURLRequest *request = [ NSURLRequest requestWithURL :url ]; [webView loadRequest :request ]; } |
The UIWebView class
UIWebView類提供了一個方便的方法名為“loadRequest：”加載網頁內容。你需要做的，就是提供給URL請求。第5行代碼，得到一個百度的URL路徑。第6行代碼，將NSURL轉換為webview可識別的NSURLRequest。第7行代碼，webview處理請求。
最終成品
點擊“運行”按鈕，並嘗試應用程序。如果你有一切正常，您的最終可交付成果應該看起來像下面，當然這不是百度了，我這是放的一個自己的關於頁面，然后加載自己的網頁。
總結
故事板簡化了iOS應用程序的用戶界面設計。正如你從本教程中可以看到的，不要寫很多代碼，你可以創建一個標簽欄控制器並將其他控制器嵌入在標簽項目。我們還展示了如何使用UIWebView中加載web內容。UIWebView為移動瀏覽器提供了基本功能。當你需要在你的應用程序中顯示網頁，或嵌入web視圖，只需用它就行。
在后面的教程中，我們將繼續探索其他新功能的演示圖板。敬請關注，.