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
進行加載:
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
:
一般會添加至少兩個控制器,按上面的方法依次添加即可!
如果想把TabbarController
作為window
的跟視圖,只需要將上面講的代表跟視圖的箭頭指向該TabbarController
即可!
4.2. 設置 Tab Bar
選中整個Tab Bar
,在右側的屬性欄可以設置Tab bar
的一些屬性:
4.3. 設置 TabBarItem
選中某個 ?TabBarItem
,在其右側屬性欄可以設置圖標/title等屬性:
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ū)尾高度等: