故事板(Storyboard)

1 使用Storyboard完成各項常見功能

1.1 問題

故事板Storyboard是IOS5開始引入的一個新的系統，將多個視圖文件（類似xib文件）集中到一個單獨的可視化工作區間，負責創建和管理所有的界面及界面間的跳轉，每一個Storyboard中的單個視圖文件稱之為場景Scene，可以使用Xcode的Interface Builder來進行編輯。

本案例將學習如何使用Storyboard完成場景的創建，並且使用兩種不同的方式實現Modal模式的跳轉，如圖-1所示：

圖-1

1.2 方案

首先創建一個SingleViewApplication項目，會自動幫我們創建好一個TRViewController類，並且自動帶有Storyboard文件，默認情況下Storyboard里面有一個已經創建好的場景，已和TRViewController類綁定。

另外不用在程序的入口方法中創建Window對象和根視圖控制器，StoryBoard會自動幫我們創建。

其次再新創建一個場景，從對象庫中拖放一個視圖控制器對象到StoryBoard中即可，並創建一個視圖控制器類TRViewController2，繼承至UIViewController。

在Storyboard中選中第二個場景，在右邊欄的第三個檢查器中修改類名，將TRViewController2和第二個場景綁定。

然后分別在第一個場景和第二個場景中拖放一個Button控件，在右邊欄的第四個檢查器中設置好相關屬性。

選中第一個場景中的Button控件，按住Control鍵往第二個場景拉線，實現Modal方式的頁面跳轉。給場景二中的Button添加事件方法，通過代碼的方式實現界面的回跳。

最后通過Segue加代碼的方式實現界面跳轉，在場景一中再拖放一個Button控件並關聯成方法。選中場景一上面的黃色圓球按鈕，按住Control鍵往第二個場景上拖拽，釋放鼠標選擇Modal模式跳轉。

選中Segue對象，在右邊欄的檢查器四中給Identifier進行賦值，給Segue對象取一個標識“Segue”，identifier是一個NSString類型的屬性。

在TRViewController.m文件中實現Button的事件方法，使用performSegueWithIdentifier:sender:方法實現頁面跳轉。

1.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：創建一個帶有Storyboard的項目

首先創建一個SingleViewApplication項目，Xcode會自動幫我們創建好一個TRViewController類，並且自動帶有Storyboard文件。

默認情況下Storyboard里面有一個已經創建好的場景，並且已經和TRViewController類綁定。另外不需要再到程序的入口方法中創建Window對象和根視圖控制器對象，StoryBoard會自動幫我們創建，在StoryBoard文件中有一個箭頭指向的場景就是程序的根視圖控制器，如圖-2所示：

圖-2

步驟二：創建第二個場景並和代碼綁定

在Storyboard中創建一個新場景，從對象庫中拖放一個視圖控制器對象到StoryBoard中，如圖-3所示：

圖-3

然后創建一個視圖控制器類TRViewController2，繼承至UIViewController。在Storyboard中選中第二個場景，在右邊欄的第三個檢查器中修改類名，將TRViewController2和第二個場景綁定在一起，如圖-4所示：

圖-4

步驟三：通過Segue實現界面跳轉

StoryBoard中每個視圖上的控件，都和xib文件的操作方式一樣，可以直接拖拽擺放在視圖上，也同樣可以通過拉線的方式關聯成IBOutlet，IBCollectionOutlet以及IBAction等屬性。

首先分別在第一個場景和第二個場景中拖放一個Button控件，在右邊欄的第四個檢查器中設置好相關屬性。

然后選中第一個場景中的Button控件，按住Control鍵往第二個場景拉線，釋放鼠標，在彈出的窗口中選擇Modal方式，如圖-5所示：

圖-5

最后給場景二中的Button添加事件方法back：，在該方法中通過代碼的方式實現界面的回跳，代碼如下所示：

1. - (IBAction)back:(UIButton *)sender {
2. [selfdismissViewControllerAnimated:YEScompletion:nil];
3. }

這里需要注意返回到第一個界面時，不能再繼續使用連線的方式，否則會創建新的視圖控制器對象，而不是返回以前的視圖控制器。

步驟四：通過Segue加代碼的方式實現界面跳轉

首先在場景一中再拖放一個Button控件並關聯成方法goToSecond:。選中場景一上面的黃色圓球按鈕，按住Control鍵往第二個場景上拖拽，釋放鼠標選擇Modal模式跳轉，如圖-6所示：

圖-6

注意此時應該選中的是場景本身，而不再是按鈕。然后選中Segue對象，在右邊欄的檢查器四中給Identifier進行賦值，identifier是Segue對象一個NSString類型的屬性，表示Segue的標識，用於區分不同的Segue對象，本案例給Segue對象取一個標識“Segue”，如圖-7所示：

圖-7

在TRViewController.m文件中實現Button的事件方法goToSecond:，在該方法中使用performSegueWithIdentifier:sender:方法實現頁面跳轉，identifier參數就是剛才設置的Segue的標識，代碼如下所示：

 

1. - (IBAction)goToSecond:(UIButton *)sender {
2. [selfperformSegueWithIdentifier:@"Segue" sender:nil];
3. }

1.4 完整代碼

本案例中，TRViewController.m文件中的完整代碼如下所示：

 

1. #import "TRViewController.h"
3. @interfaceTRViewController ()
4. @end
6. @implementationTRViewController
7. - (IBAction)goToSecond:(UIButton *)sender {
8. [selfperformSegueWithIdentifier:@"Segue" sender:nil];
9. }
10. @end

本案例中，TRViewController2.m文件中的完整代碼如下所示：

 

1. #import "TRViewController2.h"
3. @interface TRViewController2 ()
4. @end
6. @implementation TRViewController2
8. - (IBAction)back:(UIButton *)sender {
9. [selfdismissViewControllerAnimated:YEScompletion:nil];
10. }
11. @end

2 將場景嵌入到導航中並進行Push跳轉

2.1 問題

本案例在StoryBoard中分別使用手動和自動的方式創建帶有導航控制器的場景，並實現Push模式的界面跳轉，如圖-8所示：

圖-8

2.2 方案

首先創建一個帶有Storyboard的SingleViewApplication項目。先使用手動的方式給場景添加導航控制器：

1）從對象庫拖拽一個NavigationController對象到storyboard中，刪除NavigationController自帶的視圖控制器（默認是一個表視圖控制器）；

2）選中NavigationController對象，往自己的視圖控制器上拉線，釋放鼠標，在彈出的對話框中在選擇root view Controller，就完成了添加導航控制器。

然后將上一步拖拽的NavigationController對象刪除，再使用自動嵌入NavigationController的方式給視圖控制器添加導航控制器。

選中需要被導航控制器包含的場景，在Xcode菜單欄中選中Editor選項，然后選中Embed In，最后在彈出的窗口中選中NavigationController即可。

最后再創建一個新的場景，從對象庫拖拽一個視圖控制器對象到storyboard中，在上一個場景中拖拽一個跳轉按鈕，然后選中按鈕按住Control鍵連線到新創建的場景上，在彈出的菜單中選擇Push即可實現界面的跳轉。

2.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：使用手動的方式給場景添加導航控制器

首先創建一個帶有Storyboard的SingleViewApplication項目。從對象庫拖拽一個NavigationController對象到storyboard中，刪除NavigationController自帶的視圖控制器（默認是一個表視圖控制器），如圖-9所示：

圖-9

然后選中storyboard中的NavigationController對象，往自己的視圖控制器上拉線，釋放鼠標，在彈出的對話框中選擇root view Controller，如圖-10所示：

圖-10

最后不要忘了將程序入口的箭頭移動到NavigaitonController的前面，表示程序從此處入口，如圖-11所示：

圖-11

步驟二：使用自動的方式給場景添加導航控制器

先將上一步拖拽的NavigationController對象刪除，然后選中需要被導航控制器包含的場景，在Xcode菜單欄中選中Editor選項，然后選中Embed In，最后在彈出的窗口中選中NavigationController即可，如圖-12所示：

圖-12

步驟三：實現Push模式跳轉

首先創建一個新的場景，從對象庫拖拽一個視圖控制器對象到storyboard中。然后在上一個場景中拖拽一個跳轉按鈕，在右邊欄檢查器四設置按鈕的相關屬性。

最后選中按鈕，按住Control鍵往新創建的場景上拉線，在彈出的菜單中選擇Push即可實現界面的跳轉，如圖-13所示：

圖-13

如果此時入口箭頭消失了，可以在storyboard中選中NavigationController，然后在右邊欄檢查器四中的Is Initial View Controller選擇框上打鈎，如圖-14所示：

圖-14

如果不需要另外寫代碼，可以不用創建視圖控制器類。最后在StoryBoard中完成的界面如圖-15所示：

圖-15

3 給場景添加Title、按鈕、ToolBar等

3.1 問題

本案例直接在上一個案例的基礎上實現，學習如何在Storyboard中給導航欄添加標題和按鈕，並設置ToolBar工具條，如圖-16所示：

圖-16

3.2 方案

首先給導航欄添加標題，選中場景一，雙擊導航欄的中間區域，即可編輯場景一的導航欄所顯示的標題，相當於使用代碼給self.title屬性賦值，也可以在右邊欄的檢查器四中編輯標題。場景二也可以通過同樣的方式編輯標題。

然后給導航欄添加左右按鈕，選中場景一，直接從對象庫中拖拽一個BarButtonItem控件到場景一的NavigationBar的左區域或右區域即可，可以在檢查器四中設置BarButtonItem控件的的相關屬性。

最后設置ToolBar工具條，在StoryBoard中可以直接設置顯ToolBar，選中NavigationController，在右邊欄的檢查器四中的shows ToolBar選擇框上打勾，然后在具體的界面場景中向ToolBar拖放BarButtonItem。

3.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：給導航欄添加標題

首先給導航欄添加標題，選中場景一，雙擊導航欄的中間區域，即可編輯場景一的導航欄所顯示的標題，相當於使用代碼給self.title屬性賦值，如圖-17所示：

圖-17

或者在右邊欄的檢查器四中編輯導航欄的標題，如圖-18所示：

圖-18

用同樣的方式給場景二的導航欄添加標題。

步驟二：給導航欄添加左右按鈕

在Storyboard中選中場景一，從對象庫中拖拽一個BarButtonItem控件到導航欄的左區域上，如圖-19所示：

圖-19

然后在右邊欄的檢查器四中設置BarButtonItem的相關屬性，BarButtonItem的樣式、標題、圖片等都可以直接進行設置，如圖-20，圖-21所示：

圖-20

圖-21

最后按同樣的方式再拖拽一個BarButtonItem控件到導航欄的右區域上，如圖-21所示：

圖-21

在Storyboard中是不能往導航欄拖拽多個左按鈕或右按鈕的，如果需要放置多個按鈕，就只能通過代碼的方式。

步驟三：設置ToolBar工具條

首先讓ToolBar工具條顯示出來，在StoryBoard中可以直接設置顯示ToolBar，選中NavigationController，在右邊欄的檢查器四中的shows ToolBar選擇框上打勾，如圖-22所示：

圖-22

然后選中場景一，向ToolBar依次拖放BarButtonItem，在右邊欄的檢查器四中可以設置BarButtonItem的樣式，完成效果如圖-23所示：

圖-23

4 將場景嵌入到TabBar

4.1 問題

本案例直接在上一個案例的基礎上完成，在StoryBoard中分別使用手動和自動的方式創建帶有標簽控制器的場景，如圖-24所示：

圖-24

4.2 方案

和操作導航控制器類似，首先從對象庫中拖拽一個TabBarController對象到Storyboard中，刪除TabBarController自帶的視圖控制器。

然后選中TabBarController，按住Control鍵連線到場景一的NavigaitionController（ToolBar需要隱藏），釋放鼠標在彈出的窗口中選擇view controllers。

在場景一的NavigationController上選中TabBar的Item，在右邊欄的檢查器四中設置相關屬性，例如按鈕樣式、標題，顯示圖片等。以同樣的方式給TabBarController再添加兩個子視圖控制器。

最后將上一步拖拽的TabBarController對象刪除，再使用自動嵌入TabBarController的方式給視圖控制器添加導航控制器。

選中場景一的導航控制器，在Xcode菜單欄中選中Editor選項，然后選中Embed In，最后在彈出的窗口中選中TabBarController即可。然后以拉線的方式關聯其他子視圖控制器。

4.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：使用手動的方式給場景添加標簽控制器

從對象庫拖拽一個TabBarController對象到storyboard中，刪除TabBarController自帶的視圖控制器，如圖-25所示：

圖-25

然后選中storyboard中的TabBarController對象，往場景一的NavigationController上拉線，釋放鼠標，在彈出的對話框中在選擇root view Controller，如圖-26所示：

圖-26

在場景一的NavigationController上選中TabBar的Item，在右邊欄的檢查器四中設置相關屬性，例如按鈕樣式、標題，顯示圖片等，如圖-27所示：

圖-27

最后以同樣的方式給TabBarController添加兩個子視圖控制器，並將程序入口的箭頭放置到TabBarController的前面，表示程序從此處入口，如圖-28所示：

圖-28

步驟二：使用自動的方式給場景添加標簽控制器

先將上一步拖拽的TabBarController對象刪除，然后選中需要被導航控制器包含的場景，在Xcode菜單欄中選中Editor選項，然后選中Embed In，最后在彈出的窗口中選中TabBarController即可，如圖-29所示：

圖-29

然后以拉線的方式關聯其他子視圖控制器，使用同步驟二相同的方法設置TabBar上Item的屬性。

5 使用segue方式跳轉時的傳值

5.1 問題

Storyboard讓界面跳轉變得更加的簡單，那么同樣也會存在界面之間的正向傳值和反向傳值，本案例使用Segue實現頁面之間的跳轉和正向傳值（反向傳值和之前的方法相同），將第一個界面TextField里面的輸入內容傳遞給第二個界面，如圖-30所示：

圖-30

5.2 方案

首先同樣創建好一個SingleViewApplication項目，在Storyboard里面拖放兩個視圖控制器的場景，分別和兩個視圖控制器類TRFirstViewController和TRSecondViewController綁定。

其次在第一個場景中拖放一個TextField控件和一個Button控件，並將TextField關聯成私有屬性textField。

在第二個場景中拖放一個Label控件和一個Button控件，並將Label關聯成私有屬性label，將Button關聯成方法back：，該方法用於回跳到第一個界面。

然后選中場景一中的Button，按住Control鍵往第二個場景拉線，實現Modal模式的跳轉。

在TRSecondViewController類中定義一個NSString類型的公開屬性massage，用於接收傳遞過來的數據。

最后在TRFirstViewController.m文件中重寫方法prepareForSegue:sender:，該方法會在界面跳轉之前被自動調用，Segue參數就是連接兩個場景的Segue對象。在該方法內部將textField輸入框中的內容賦值給TRSecondViewController的message屬性，從而進行傳值。

在TRSecondViewController.m文件中重寫方法viewWillAppear：，在此方法中將接收到數據顯示到label上；

5.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：創建項目，搭建場景

在創建好的Xcode項目中創建兩個視圖控制器類TRFirstViewController和TRSecondViewControlle，全都繼承至UIViewController。

在Storyboard里面拖放兩個視圖控制器的場景，分別和兩個視圖控制器類TRFirstViewController和TRSecondViewController進行綁定。

其次在第一個場景中拖放一個TextField控件和一個Button控件，並將TextField關聯成TRFirstViewController的私有屬性textField，代碼如下所示：

 

1. @interfaceTRFirstViewController ()
2. @property (weak, nonatomic) IBOutletUITextField *textField;
3. @end

在第二個場景中拖放一個Label控件和一個Button控件，並將Label關聯成TRSecondViewController的私有屬性label，將Button關聯成方法back：，該方法用於回跳到第一個界面，代碼如下所示：

 

1. //Label的輸出口屬性
2. -@interfaceTRSecondViewController ()
3. @property (weak, nonatomic) IBOutletUILabel *label;
4. @end
5. //Button的back：方法
6. - (IBAction)back:(UIButton *)sender {
7. [selfdismissViewControllerAnimated:YEScompletion:nil];
8. }

步驟二：創建Segue對象，實現界面跳轉

選中場景一中的Button，按住Control鍵往第二個場景拉線，釋放鼠標在彈出的窗口中選擇Modal模式，實現界面跳轉，如圖-31所示：

圖-31

在TRSecondViewController類中定義一個NSString類型的公開屬性massage，用於接收傳遞過來的數據，代碼如下所示：

 

1. @interfaceTRSecondViewController : UIViewController
2. @property (nonatomic,strong) NSString *message;
3. @end

步驟三：關聯代碼，實現方法

首先在TRFirstViewController.m文件中重寫方法prepareForSegue:sender:，該方法會在界面跳轉之前被自動調用，Segue參數就是連接兩個場景的Segue對象，可以通過segue.destinationViewControllerSegue屬性獲取到TRSecondViewController對象，並將textField輸入框中的內容賦值給TRSecondViewController的message屬性，從而進行傳值，代碼如下所示：

 

1. -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
2. //拿到目標VC對象
3. TRSecondViewController *destination = segue.destinationViewController;
4. //給destination的公開屬性賦值
5. destination.message = self.textField.text;
6. }

最后在TRSecondViewController.m文件中重寫方法viewWillAppear：，在此方法中將接收到數據顯示到label上，代碼如下所示：

1. -(void)viewWillAppear:(BOOL)animated {
2. [superviewWillAppear:animated];
3. self.label.text = self.message;
4. }

5.4 完整代碼

本案例中，TRFirstViewController.m文件中的完整代碼如下所示：

 

1. #import "TRFirstViewController.h"
2. #import "TRSecondViewController.h"
4. @interfaceTRFirstViewController ()
5. @property (weak, nonatomic) IBOutletUITextField *textField;
6. @end
8. @implementationTRFirstViewController
9. //父類中的方法，此方法會在Segue跳轉之前自動調用
10. -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
11. //拿到目標VC對象
12. TRSecondViewController *destination = segue.destinationViewController;
13. //給destination的公開屬性賦值
14. destination.message = self.textField.text;
15. }
16. @end

隱藏

本案例中，TRSecondViewController.h文件中的完整代碼如下所示：

 

1. #import<UIKit/UIKit.h>
3. @interfaceTRSecondViewController : UIViewController
4. @property (nonatomic,strong) NSString *message;
5. @end

本案例中，TRSecondViewController.m文件中的完整代碼如下所示：

 

1. #import "TRSecondViewController.h"
3. @interfaceTRSecondViewController ()
4. @property (weak, nonatomic) IBOutletUILabel *label;
5. @end
7. @implementationTRSecondViewController
9. -(void)viewWillAppear:(BOOL)animated {
10. [superviewWillAppear:animated];
11. self.label.text = self.message;
12. }
13. - (IBAction)back:(UIButton *)sender {
14. [selfdismissViewControllerAnimated:YEScompletion:nil];
15. }
16. @end

6 使用代碼的方式實現界面跳轉

6.1 問題

使用Segue實現界面跳轉的好處就是方便、靈活。但是程序中經常也會用到手動方式跳轉界面。本案例直接在上一個案例的基礎上實現，使用代碼的方式實現storyboard場景之間的跳轉，以及storyboard和xib之間的跳轉，如圖-32所示：

圖-32

6.2 方案

首先讓場景一嵌入NavigationController，然后在場景一上面拖拽一個Button控件，並將標題命名為“goToSecondVCByCode”，將按鈕關聯成TRFirstViewController的方法goToSecondVC：。

其次選中場景二，在右邊欄的檢查器三中的設置Storyboard ID值，給場景二命名一個標識為“SecondVC”。

然后在TRFirstViewController.m文件中實現goToSecondVC：方法，該方法內部通過Storyboard的instantiateViewControllerWithIdentifier:方法獲取到TRSecondViewController對象，並通過push方法實現跳轉。

最后實現Stroyboard跳轉到xib，創建一個帶有xib的視圖控制器類TRThirdViewController，在xib中拖放一個回跳按鈕，關聯成TRThirdViewController的方法backToFirst:，實現該方法通過dismiss方法回跳到第一個界面。

在場景一上面拖拽一個Button控件，並將標題命名為“goToThirdXibByCode”，將按鈕關聯成TRFirstViewController的方法goToThirdVC：，在該方法內通過initWithNIbName獲取到TRThirdViewController對象，並通過push方法實現界面跳轉。

6.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：使用代碼實現場景一和場景二之間的跳轉

首先讓場景一嵌入NavigationController，然后在場景一上面拖拽一個Button控件，並將標題命名為“goToSecondVCByCode”，並將按鈕關聯成TRFirstViewController的方法goToSecondVC：。

然后選中場景二，在右邊欄的檢查器三中的設置Storyboard ID值，給場景二命名一個標識為“SecondVC”，如圖-33所示：

圖-33

最后在TRFirstViewController.m文件中實現goToSecondVC：方法，該方法內部通過Storyboard的instantiateViewControllerWithIdentifier:方法獲取到TRSecondViewController對象，並通過push方法實現跳轉，代碼如下所示：

1. - (IBAction)goToSecondVCByCode:(UIButton *)sender {
2. TRSecondViewController *secondVC = [self.storyboardinstantiateViewControllerWithIdentifier:@"SecondVC"];
3. secondVC.message = self.textField.text;
4. [self.navigationControllerpushViewController:secondVCanimated:YES];
5. }

步驟二：實現從Storyboard文件和Xib文件之間的跳轉

storyboard和xib是可以一起工作，從storyboard可以直接跳轉到xib文件（僅限push跳轉方式），操作方式和以前完全相同。

首先創建一個帶有xib的視圖控制器類TRThirdViewController，繼承至UIViewController。

然后在xib文件中拖放一個回跳按鈕，並將按鈕關聯成TRThirdViewController的方法backToFirst:，實現該方法，代碼如下所示：

 

1. - (IBAction)backToFirst:(UIButton *)sender {
2. [selfdismissViewControllerAnimated:YEScompletion:nil];
3. }

最后在場景一上面拖拽一個Button控件，並將標題命名為“goToThirdXibByCode”，將按鈕關聯成TRFirstViewController的方法goToThirdVC：，在該方法內通過initWithNIbName獲取到TRThirdViewController對象，並通過push方法實現界面跳轉，代碼如下所示：

 

1. - (IBAction)goToThirdXibByCode:(UIButton *)sender {
2. TRThirdViewController *thirdVC = [[TRThirdViewControlleralloc]initWithNibName:@"TRThirdViewController" bundle:nil];
3. [self.navigationControllerpushViewController:thirdVCanimated:YES];
4. }

6.4 完整代碼

本案例中，TRFirstViewController.m文件中的完整代碼如下所示：

 

1. #import "TRFirstViewController.h"
2. #import "TRSecondViewController.h"
3. #import "TRThirdViewController.h"
5. @interfaceTRFirstViewController ()
6. @property (weak, nonatomic) IBOutletUITextField *textField;
7. @end
9. @implementationTRFirstViewController
10. -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
11. TRSecondViewController *destination = segue.destinationViewController;
12. destination.message = self.textField.text;
13. }
14. - (IBAction)goToSecondVCByCode:(UIButton *)sender {
15. TRSecondViewController *secondVC = [self.storyboardinstantiateViewControllerWithIdentifier:@"SecondVC"];
16. secondVC.message = self.textField.text;
17. [self.navigationControllerpushViewController:secondVCanimated:YES];
18. }
19. - (IBAction)goToThirdXibByCode:(UIButton *)sender {
20. TRThirdViewController *thirdVC = [[TRThirdViewControlleralloc]initWithNibName:@"TRThirdViewController" bundle:nil];
21. [self.navigationControllerpushViewController:thirdVCanimated:YES];
22. }
23. @end

7 完成樂庫項目中的靜態表

7.1 問題

使用storyboard實現靜態表視圖比xib方式更簡單、更方便，更靈活。本案例使用Storyboard重新完成樂庫項目中的“更多”界面，如圖-34所示：

圖-34

7.2 方案

首先同樣創建一個SingleViewApplication項目，將Storyboard中原有的場景刪除，然后從對象庫中拖拽一個TableViewController的對象到Storyboard中，該表視圖控制器就是該程序的根視圖控制器。

其次讓TableViewController嵌入NavigationController，在Storyboard中選中TableView，然后在右邊欄的第四個檢查器中，將content屬性設置為Static Cells即將表視圖設置為靜態，可以直接在storyboard的場景中操作表視圖的表頭視圖、分區和單元格。

然后根據界面需要直接在表視圖的表頭視圖、分區和單元格上拖拽所需要的視圖和控件。

再創建一個表視圖控制器類TRMusicTableViewController，和Storyboard中的場景進行綁定，將TableView的三問方法刪除，不再需要手動實現。

最后在Storyboard中通過Segue實現點擊單元格跳轉和點擊輔助視圖跳轉。

7.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：創建靜態表視圖場景

首先在創建好的Xcode項目中，將Storyboard中原有的場景刪除，然后從對象庫中拖拽一個TableViewController的對象到Storyboard中，該表視圖控制器就是該程序的根視圖控制器，如圖-35所示：

圖-35

然后讓TableViewController嵌入NavigationController，在Storyboard中選中TableView，然后在右邊欄的第四個檢查器中，將content屬性設置為Static Cells即將表視圖設置為靜態，將Sections設置為3，表示有三個分區，如圖-36所示：

圖-36

步驟二：表頭視圖、分區和單元格

在storyboard中可以直接操作靜態表視圖的表頭視圖、分區和單元格，包括拖放視圖和控件，設置坐標和寬高，還可以直接復制粘貼。

首先設置表頭視圖，直接拖放一個View控件到TableView中，注意要擺放到表頭視圖所在的位置（在單元格的前面），如圖-37所示：

圖-37

在View視圖界面上直接拖放所需要的控件，並在右邊欄的檢查器中設置各個控件的相關屬性，如圖-38所示：

圖-38

其次設置每個TableViewCell，本案例中有三個分區，第一個分區何第二個分區都有三個單元格，第三個分區有一個單元格。每個分區的單元格都是拖放的一個TableViewCell對象，先設置前兩個分區的單元格。

選中需要編輯的單元格，在右邊欄的第四個檢查器中可以設置單元格的各種屬性，包括單元格的樣式，輔助視圖的樣式，分隔線的樣式，圖片等，如圖-39所示：

圖-39

然后根據界面需求直接將對象庫中的控件拖放到TableViewCell的ContentView中，其中第二個分區的第二個單元格還需要自定義輔助視圖，在Storyboard中自定義輔助視圖也很簡單，將一個Switch控件拖放到場景中，但不要放進視圖控制器中，如圖-40所示：

圖-40

選中場景中TableViewCell，在右邊欄的檢查器六中(或選中TableViewCell點右鍵)，連接accessoryView到該控件，如圖-41所示：

圖-41

第一分區和第二分區的tableViewCell設置完成后，Storybaord中的界面如圖-42所示：

圖-42

接下來設置第三個分區的單元格，第三個分區的單元格只有一個，但是單元格的高度是自定義的，首先選中單元格，在右邊欄的檢查器四中將style設置為Custom，在檢查器五中設置單元格的高度，如圖-43所示：

圖-43

然后調整整個TableView的高度，選中場景在右邊欄的檢查器四中將Size 設置為Freeform，如圖-44所示：

圖-44

再選中tableView，在檢查器五中設置TableView的高度，如圖-45所示：

圖-45

最后在tableViewCell的ContentView上拖放界面所需要的控件，並設置相關屬性，最后完成的效果如圖-46所示：

圖-46

步驟三：刪除三問方法

創建一個表視圖控制器類TRMusicTableViewController，繼承至UITableViewController，注意不要再帶有xib文件，將TRMusicTableViewController和Storyboard中的場景進行綁定，如圖-47所示：

圖-47

然后在TRMusicTableViewController.m文件中刪除自動生成的三問協議U方法，通過Storyboard搭建的靜態表視圖不在需要通過代碼加載數據，Storyboard會自動幫我們完成創建，可以根據程序需要實現表視圖其他的委托事件的響應方法，例如didSelectRowAtIndexPath:方法。

步驟四：通過Segue實現跳轉

在Storyboard中點擊單元格Cell跳轉和點擊輔助視圖AccessoryView跳轉都可以通過Segue來實現，不需要額外寫代碼。

首先在storyboard中另外拖放兩個場景，然后選中第一個分區的第一個單元格，按住Control鍵往第二個場景上拖拽，釋放鼠標選Selection Segue選項下的Push模式即完成通過點擊單元格跳轉，如圖-48所示：

圖-48

再次選中第一個分區的第一個單元格，按住Control鍵往第三個場景上拖拽，釋放鼠標，這次選擇Accessory Action選項下的Push模式即完成通過點擊單元格的輔助視圖完成跳轉，如圖-49所示：