【Storyboard】Storyboard介紹及使用


參考文章

Storyboards Tutorial in iOS 7: Part 1

Storyboards Tutorial in iOS 7: Part 2


背景知識

Storyboard 在iOS5時引入,它能節(jié)約你創(chuàng)建UI的時間,先看一張storyboard的圖:
storyboard樣圖
storyboard樣圖

看到它,你就像看到了一張設(shè)計圖,一切已胸有成竹!

storyboard與常規(guī)nib(nib文件后來改名叫xib文件,小伙伴不用糾結(jié)它是啥)文件相比,有很多優(yōu)勢:

  • 與散落的nib相比,storyboard能給你一種全局感。

  • storyboard可以描述各種場景之間的過渡,這種過渡被稱作"segue",你通過簡單的ctrl-dragging就能搞定,減少代碼量。

  • storyboard支持table view的prototype cell,這意味著你可以在storyboard中編輯cell,減少代碼量。

當然,世界上沒有完美的東西,由于Interface Builder還不夠強大,所以,有些nib能做到的,storyboard還不能。而且,你需要一個更大的顯示器~

storyboard 把 view controller叫做:“scene”.


啟動storyboard的系統(tǒng)預設(shè)

在工程plist中

plist
plist


storyboard操作

(iOS有所謂的三大container view controller,分別是Tab Bar Controller,Navigation Controller,Split View Controller )

注意:在縮放的時候無法拖拽控件到畫板。
1.更改初始化視圖控制器

  • 選擇初始化view controller,選中相應view controller -> Attributes inspector,勾選Is Initial View Controller,如圖
    initial view controller
    initial view controller
  • 直接拖拽初始化箭頭到相應視圖控制器

    如果更改了初始化的view controller,會發(fā)現(xiàn)初始化箭頭發(fā)生移動,如圖:
    初始化箭頭移動
    初始化箭頭移動

2.添加Navigation Controller

  • 選中要添加Navigation Controller的視圖控制器,在Xcode menubar選擇Editor\Embed In\Navigation Controller
  • 從Object Library拖拽

在storyboard的畫板上,會虛擬出一個Navigation Controller的scene,它當然不是一個真的UINavigationBar對象,而是虛擬一個,方便我們操作和理解。

當我們點擊與Navigation Controller連接的視圖控制器,點擊Attributes inspector,會發(fā)現(xiàn)Simulated Metrics,如圖:

Simulated Metrics
Simulated Metrics

Inferred是storyboard的缺省設(shè)置,這意味著該視圖控制器在Navigation Controller中時,會展示一個navigation bar (當然,在其他container view controller中,會展示相對的bar,比如,在一個tab bar controller中會展示一個tab bar).Simulated Metrics并不能用于runtime.

3.創(chuàng)建relationship segue

如圖所示:
tab bar controller
tab bar controller

Ctrl-drag,從tab bar controller 連到navigation controller,松手,彈出 popup menu,如圖:

popup menu
popup menu

選擇Relationship Segue – view controllers,結(jié)果如圖:

Relationship Segue – view controllers
Relationship Segue – view controllers

4.命名tabbar controller和navigation controller中的bar item

并非在tabbar controller 里,而是在與其相連、對應的controller里,如圖:
修改tabbar controller展示出來的tab item
修改tabbar controller展示出來的tab item

同理,修改navigation bar,也是在對應的controller里,而不是虛擬的navigation controller,如圖:
修改navigation bar
修改navigation bar

5.自定義UI類
就像你不用storyboard一樣,創(chuàng)建一個類,當然,就不要勾選xib選項了,從storyboard的object library中拖拽出它的父類UI,在此UI的Indentity inspector中,將這個類與UI綁定,如圖:

自定義UI類
自定義UI類

6.在storyboard中找到相應的視圖控制器

舉例,找到tab bar controller第一個tab————一個帶有導航欄的視圖控制器,

 UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
    UINavigationController *navigationController = [tabBarController viewControllers][0];
    PlayersViewController *playersViewController = [navigationController viewControllers][0];  

7.Prototype cells
我們用static cells,一般是這樣的:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                      reuseIdentifier:CellIdentifier];
    }
 
    // Configure the cell...
    return cell;
}  

用Prototype cells是這樣的:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"PlayerCell"];
 
    // Configure the cell...
 
    return cell;
}  

我們選中控制器的tableview空間,第一個就是cell的選擇,如圖:


table view cell

默認是prototype cell.

有沒有想過把prototype cell 用在不同的table view 中?我這樣想過,了解了一下,發(fā)現(xiàn)目前storyboard還不支持,如果想曲線救國,實現(xiàn)起來挺復雜的,參見Reusable UITableView's prototype cell

8.Static Cell
如果用static cell,我們就不用為tableview創(chuàng)建data source,因為它就是個靜態(tài)的cell,不需重用,所以,你可以把該cell上的UI控件拖拽到對應的controller(Prototype cell是不行的),如圖:

static cell
static cell

拖拽static cell上的控件到對應的controller
拖拽static cell上的控件到對應的controller

9.添加bar button item 到導航欄
拖拽一個bar button item 到擁有導航欄的控制器上,而不是那個虛擬的navigation controller.

10.segue

我們在前面說過container view controller 有一種relationship segue,它表示一個container view controller上所擁有的view controller,另外,就是用于view controller之間過渡的segue,它可以由button,cell,gesture等等來觸發(fā)。

它的優(yōu)勢在于,節(jié)省很多代碼量,很直觀,你不用再寫什么方法,或者像xib那樣連接諸如IBAcation之類的東西。

  • 操作segue
    例如:
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"AddPlayer"]) {
 
        UINavigationController *navigationController = segue.destinationViewController;
        PlayerDetailsViewController *playerDetailsViewController = [navigationController viewControllers][0];
        playerDetailsViewController.delegate = self;
    }
}  

注意:記得給segue添加Identifier

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容