[iOS] Storyboard (3) -- 使用：常用Tips

Storyboard 系列文章
[iOS] Storyboard (1) -- 入門：API 篇
[iOS] Storyboard (2) --入門：約束篇
[iOS] Storyboard (3) -- 使用：常用Tips
[iOS] Storyboard (4) -- 實踐：問題總結
[iOS] Storyboard (4) -- 實踐：UIScrollView
[iOS] Storyboard (4) -- 實踐：UICollectionView

1. 設置 Storyboard 跟視圖

一般新建項目后，會默認創(chuàng)建一個Storyboard：Main.storyboard，該Storyboard 的跟視圖也就是我們項目的跟視圖，每個 Storyboard也有一個跟視圖，在 Storyboard 中的體現就是前面有個箭頭指向這個控制器：

如果是我們新建的 Storyboard，默認是沒有跟視圖的，在控件庫拖一個UIViewController 到 Storyboard 中，然后選中該控制器，在其右側的菜單倒數第三個（Show the Attributes inspector）-View Controller 欄目下有個：Is Initial View Controller 復選框，勾選就是作為跟視圖，不勾選即是取消；

如果設置了跟視圖，那我們使用 Storyboard 的 instantiateInitialViewController 方法能夠獲取到該跟視圖控制器，如果沒有設置，則獲取不到；這個不是必須要設置的，如果不是整個app 啟動加載的 Storyboard ，可以不設置；而如果是整個app啟動加載的 Storyboard 則必須要設置，因為該跟視圖也會被作為當前 Window的跟視圖進行加載；

2. 設置 app 啟動 Storyboard

應用創(chuàng)建后默認的 Storyboard 為 Main.storyboard ，當然我們也可以使用我們自己創(chuàng)建的 Storyboard 來作為啟動的 Storyboard 進行加載：

設置 app 啟動 Storyboard

3. 添加導航 UINavigationController

3.1. 方法一：手動添加

直接在控件庫里搜索 UINavigationController，然后拖到 Storyboard 中，默認會帶個跟視圖 tableViewController，選中他們的連線（Segue），然后點擊鍵盤的 Delete 刪除，然后選中多余的tableViewController，同樣是點擊鍵盤的 Delete 刪除， 只留導航控制器，接著選中導航控制器：右鍵 - 選擇 Triggered Segues 下的 root view Controller 。拖動連線到自己的控制器即可

如果需要把這個導航控制器作為window的跟視圖控制器的話，如果已有上面說的那個代表跟視圖指向的箭頭，直接將箭頭移動到這個導航的左側即可；如果沒有這個箭頭，就選擇這個導航控制器，在右側勾選 Is Initial View Controller 復選框。

3.2. 方法二：自動添加

選中需要添加導航的控制器，然后以此選擇菜單：Editor -> Embed In -> Navigation Controller：

自動添加導航

4. 添加 TabbarController

4.1. 添加 Tab Bar Controller

同添加導航一樣，添加 TabbarController 也分手動和自動兩種，自動添加的步驟和添加導航一樣，只不過最后選擇的是 Tab Bar Controller（見上圖）；
這里只說手動添加:
首先，在控件庫中搜索 UITabBarController；
然后，拖到 Storyboard 中；

默認他會攜帶兩個控制器，如果不需要可以刪了，或者直接使用；這里為了演示如何連線，先將他們的連線刪了；

選中 TabbarController ，右鍵選擇Triggered Segues 下的 view Controllers，然后將線拖到需要添加的控制器上即可，添加的時候會自動生成TabBarItem：

Tab bar 連線

一般會添加至少兩個控制器，按上面的方法依次添加即可！
如果想把 TabbarController 作為 window 的跟視圖，只需要將上面講的代表跟視圖的箭頭指向該 TabbarController 即可！

4.2. 設置 Tab Bar

選中整個Tab Bar，在右側的屬性欄可以設置Tab bar的一些屬性：

Tab Bar
4.3. 設置 TabBarItem

選中某個 ?TabBarItem，在其右側屬性欄可以設置圖標/title等屬性：

tabBarItem

5. Storyboard 文件綁定.h/.m文件

Storyboard 文件只是提供一個畫UI的方便，但是邏輯處理還是需要創(chuàng)建相應的控制器.h/.m文件來進行的，例如在 Storyboard 中添加登錄控制器后（示例中使用的是TableViewController），新建 LQLoginTableViewController.h/LQLoginTableViewController.m文件；
然后來到 Storyboard 中，選中登錄控制器，在其右側倒數第四個選項（Show the Identity Inspector）中Custom Class 選項欄下的 Class，直接填入.h/.m文件名稱，或者在下拉列表中選擇要關聯(lián)的文件即可；

點擊右側的灰色按鈕，如果能正常跳轉到 對應的.h文件，即關聯(lián)成功！

如果不能跳轉對應的文件，名稱無誤的情況下，可先編譯一下，然后進行操作。

6. 一些基本操作

6.1. 同一個 Storyboard 中控制器間跳轉

在 Storyboard 中，控制器直接的跳轉，可以直接使用連線的方式進行；也可以使用代碼，上面的示例中可以看到連線之后即可進行跳轉，下面介紹如何使用代碼來控制跳轉：

方式一：使用 Segue 來跳轉
使用 Segue 進行跳轉的前提是該 Segue 必須存在，也就是連線必須存在；
但是，你可能會疑問，連線存在的話，不就可以直接跳轉了么？
是的，如果只是按鈕的點擊, 單個控件可以直接連線跳轉; 如果是表視圖, 會怎樣? 就需要通過 Segue 來跳轉了:

首先, 連線通過控制器來連接:


然后, 設置 Segue 的 Identifier，選中要操作的 Segue， 在左側的屬性欄下設置 Identifier ：

接著, 在相應的點擊方法中添加如下的代碼：

[self performSegueWithIdentifier:@"LoginToRegisterID" sender:nil];

即可跳轉到下一個界面；

傳遞參數

使用連線的方式進行跳轉的控制器，也是使用這個方式進行參數傳遞

在這種跳轉方式中，如果想要傳遞參數給下一個控制器，需要重寫方法：

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(nullable id)sender

在這里獲取到目標控制器，然后進行參數傳遞：

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    
    LQRegistTableViewController *r = segue.destinationViewController;
    r.user = @"user";
}

如果，當前控制器需要在不同的情況下跳轉到不同的控制器，在這里可使用 segue.identifier 進行區(qū)分：

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    
    // 如果有多個跳轉操作，可使用 identifier 進行區(qū)分目標控制器
    if ([segue.identifier isEqualToString:@"LQRegistTableViewControllerID"]) {
        LQRegistTableViewController *r = segue.destinationViewController;
        r.user = @"user";
    }
}

方式二：獲取到控制器，再跳轉

這種方法主要是獲取到要跳轉的目標控制器，然后再使用push/present方法進行跳轉；同樣，需要先給每個控制器設置 Storyboard ID；
選中控制器，然后在右側的屬性欄 Show the Identity Inspector 中的Identity 欄目下的 Storyboard ID，添加一個唯一識別符：

然后，在相應的點擊方法中使用添加如下的代碼：

LQRegistTableViewController *r = [self.storyboard instantiateViewControllerWithIdentifier:@"LQRegistTableViewControllerID"];
    
 [self.navigationController pushViewController:r animated:YES];

這里和我們平常使用純代碼唯一的區(qū)別就是獲取控制器實例對象的方式；

6.2. 不同 Storyboard 中控制器間跳轉

不同 Storyboard 中的控制器跳轉，與同一個 Storyboard 中的控制器跳轉的區(qū)別就是，需要先獲取 Storyboard 實例對象，然后調用一樣的方法獲取控制器，再使用 push/present 進行跳轉；

當然，不同控制器間是不能使用 Segue 進行跳轉的，因為不能連線！！！

同樣，需要先設置 Storyboard ID ，方法同上面；

切換 Window 跟視圖
如果需要切換不同的 .storyboard文件中的視圖控制器作為 window 的跟視圖，只需要按如下方式進行：

// 獲取到 storyboard 實例對象
    UIStoryboard *loginSB = [UIStoryboard storyboardWithName:@"LQLogin" bundle:nil];
    // 獲取要作為 window 跟視圖的控制器
    UIViewController *login = [loginSB instantiateViewControllerWithIdentifier:@"LQLoginNavigation"];
    
    [UIApplication sharedApplication].keyWindow.rootViewController = login;

一般的視圖跳轉
如果只是一般的視圖跳轉，只是多了一個獲取 Storyboard 實例的過程：

// 獲取到 storyboard 實例對象
    UIStoryboard *loginSB = [UIStoryboard storyboardWithName:@"LQLogin" bundle:nil];
    // 獲取視圖控制器
    UIViewController *login = [loginSB instantiateViewControllerWithIdentifier:@"LQLoginNavigation"];
    
    [self presentViewController:login animated:YES completion:nil];

7. 結合 nib/xib 文件使用

nib/xib 的創(chuàng)建/關聯(lián) UIViewController

如果是新建的類，在設置類名頁面可以勾選 Also create XIB file 復選框，同時創(chuàng)建相應的 nib/xib 文件：

這種方式創(chuàng)建的 nib/xib 文件和相應的類是關聯(lián)好的，不需要我們進行特殊設置，即可直接使用；

關聯(lián)已有的文件

如果是想要將已有的類關聯(lián)到 nib/xib 文件，只需要新建相應的 nib/xib 文件: New Files... - 選擇 User Interface 下的 View：

在下一步的命名中，最好是和文件名稱一致；

完成后關聯(lián)控制器：選中 xib 文件，在左側文件列表選中 File's Owner，右側屬性欄下的 Class 選擇需要關聯(lián)的類名：

最后設置控制器的 View，選中 File's Owner，右鍵，將 View 的連線連接當前控制器的 View：

或者：


完成！

nib/xib 的創(chuàng)建/關聯(lián) UITableViewController

同UIViewController 一樣，如果是新建的類，在設置類名頁面可以勾選 Also create XIB file 復選框，即可同時創(chuàng)建相應的 nib/xib 文件；

關聯(lián)已有的文件

創(chuàng)建 xib的步驟和 UIViewController 一樣，命名規(guī)則也一樣，完成后關聯(lián)控制器也是一樣的操作，不同之處是接下來的 設置 控制器的View；

因為新建的 xib 中默認的 view是 UIView，但是我們的UITableViewController 需要的是 UITableView，因此，我們需要將默認的 View 刪除，然后拖一個 UITableView 進來: 選中默認的View，delete刪除，然后從控件庫拖一個 UITableView

接著將 UITableView 設置為控制器的 View，步驟同 UIViewController；

最后，設置 UITableView 的代理和數據源連線：

完成！

nib/xib 的創(chuàng)建/關聯(lián) UITableViewCell

同UIViewController 一樣，如果是新建的類，在設置類名頁面可以勾選 Also create XIB file 復選框，即可同時創(chuàng)建相應的 nib/xib 文件；

關聯(lián)已有的文件

創(chuàng)建 xib 的步驟和 UIViewController 一樣，命名規(guī)則也一樣，因為 UITableViewCell 是一個 view，所以不需要關聯(lián) 控制器，也就是上面的 File's Owner 我們就用不到了；

同理，因為新建的 xib 中默認的 view 是 UIView，但這里是UITableViewCell ，因此，我們需要將默認的 View 刪除，然后拖一個 UITableViewCell 進來：
選中默認的View，delete刪除，然后從控件庫拖一個 UITableViewCell；

接下來，我們只需要將該 cell 關聯(lián)到對應的類即可，選中該cell，在右側 Show the Identify inspector 下的 Class 選擇相應的類：

完成！

Storyboard -> nib/xib

Storyboard 跳轉到 nib/xib，正常的使用代碼創(chuàng)建即可：

LQOtherViewController *other = [[LQOtherViewController alloc]initWithNibName:@"LQOtherViewController" bundle:nil] ;
    
    [self presentViewController:other animated:YES completion:nil];

這里也可以使用原來的初始化方法；

nib/xib -> Storyboard

從 nib/xib 跳轉到 Storyboard，只需要先獲取到要跳轉的 Storyboard 實例，然后進行跳轉即可：

// 獲取到 storyboard 實例對象
    UIStoryboard *loginSB = [UIStoryboard storyboardWithName:@"LQLogin" bundle:nil];
    // 獲取視圖控制器
    UIViewController *login = [loginSB instantiateViewControllerWithIdentifier:@"LQLoginNavigation"];
    
    [self presentViewController:login animated:YES completion:nil];

同理，以上跳轉方式也適合跨頁面跳轉

8. UITableView 靜態(tài)表

在一些內容固定的列表頁，例如個人中心列表、設置列表等；在 Storyboard 中使用靜態(tài)表是再好不過的選擇了；

我們在布局靜態(tài)表的時候只能使用 UITableViewController；

選中 TableView 視圖，在右側屬性欄 - Table View 欄目下修改 Content 的類型為 Static Cells ：

在此，也可以看到很多和表相關的屬性，都可以根據自己的需求進行設置，例如：分區(qū)數、表類型等；

選中標尺圖標（Show the Size inspector），可以設置行高、區(qū)頭/區(qū)尾高度等：

（未完，待續(xù)...）

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。