[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,默認是沒有跟視圖的,在控件庫拖一個UIViewControllerStoryboard 中,然后選中該控制器,在其右側的菜單倒數第三個(Show the Attributes inspector)-View Controller 欄目下有個:Is Initial View Controller 復選框,勾選就是作為跟視圖,不勾選即是取消;

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

2. 設置 app 啟動 Storyboard

應用創(chuàng)建后默認的 StoryboardMain.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 來跳轉了:

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


然后, 設置 SegueIdentifier,選中要操作的 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 中默認的 viewUIView,但是我們的UITableViewController 需要的是 UITableView,因此,我們需要將默認的 View 刪除,然后拖一個 UITableView 進來: 選中默認的Viewdelete刪除,然后從控件庫拖一個 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 中默認的 viewUIView,但這里是UITableViewCell ,因此,我們需要將默認的 View 刪除,然后拖一個 UITableViewCell 進來:
選中默認的Viewdelete刪除,然后從控件庫拖一個 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ā)布平臺,僅提供信息存儲服務。