Storyboard是蘋果在iOS5中引入的新技術(shù),目的是更加直觀的展示復(fù)雜的nib和xib.

First

在上篇文章中已經(jīng)講過,Storyboard是一個(gè)資源文件,它的本質(zhì)是一個(gè)xml格式的文件喇嘱，在iOS 開發(fā)可視化編程之Xib 簡(jiǎn)述已經(jīng)說明.

Storyboard本質(zhì)

Storyboard是強(qiáng)大的,他給我們提供了一種全新的頁面跳轉(zhuǎn)方式segue,并且它對(duì)cell的支持更加強(qiáng)大.

A important essence

當(dāng)我創(chuàng)建出一個(gè)空的iOS項(xiàng)目的時(shí)候,實(shí)際上它是以初始化storyboard文件作為程序的入口的.而ViewController實(shí)際上是綁定了storyboard的.所以在上一篇iOS 開發(fā)可視化編程之Xib 簡(jiǎn)述我們以初始化xib的RootViewController文件作為程序入口的時(shí)候我們刪掉了Main.storyboard文件并且將Main interface中的Main刪掉了.

Main interface

此外,我們也可以從info.plist文件中查看

info.plist

The simple use of Storyboard

其實(shí)我們可以通俗的將storyboard理解為加強(qiáng)版的xib,它是n個(gè)xib的組合.但是storyboard只能被VC的子類使用,也就是說我們只能網(wǎng)其中拖VC,而View的展示必須依賴VC展示.

關(guān)于標(biāo)簽下屬性的設(shè)置已經(jīng)在iOS 開發(fā)可視化編程之Xib 簡(jiǎn)述中說明了,請(qǐng)大家移步.

The focus of this article

本文關(guān)于storyboard主要介紹segue和storyboard對(duì)cell的支持

同樣我們還是以模擬需求的方式來說明其應(yīng)用,我們依然模擬登陸界面.

這次我們?cè)诘顷懡缑嬖O(shè)置導(dǎo)航視圖控制圖,點(diǎn)擊登陸跳轉(zhuǎn)到一個(gè)UITableViewController,我們添加一個(gè)注冊(cè)按鈕,點(diǎn)擊注冊(cè)按鈕跳轉(zhuǎn)到一個(gè)UIViewController.

設(shè)置UINavigationController

我們通過點(diǎn)擊任務(wù)欄中的Editor設(shè)置UINavigationController.

設(shè)置導(dǎo)航視圖控制器

不知道大家注意沒有,當(dāng)我們?cè)O(shè)置完UINavigationController之后,原本指向ViewController的箭頭現(xiàn)在指向了UINavigationController.

is Initial View Controller

這個(gè)箭頭其實(shí)就是 "is initial View Controller" 他表征了這個(gè)控制器是storyboard的初始控制器.程序開始啟動(dòng)storyboard首先呈現(xiàn)的就是這個(gè)控制器.

那么如果我們不設(shè)置"is initial View Controller"的話就會(huì)出現(xiàn)找不到初始控制器(其實(shí)也就是根視圖控制器),就會(huì)出現(xiàn)黑屏的狀況.

黑屏

我們?cè)谔砑油闡INavigationController之后就會(huì)在ViewController上顯示出來,這時(shí)候我們雙擊ViewController的NavigationController中間的部分就可以設(shè)置Navigation Item了.

設(shè)置navigation Item

設(shè)置界面UI

這個(gè)界面很簡(jiǎn)單,我們只需要添加兩個(gè)Label,兩個(gè)TextField,兩個(gè)Button就可以了,關(guān)于添加的方式,以及autoLayout的添加方式已經(jīng)在iOS 開發(fā)可視化編程之Xib 簡(jiǎn)述說過,其實(shí)是一樣的.在此就不在贅述.

UI搭建

點(diǎn)擊"注冊(cè)"按鈕跳轉(zhuǎn)頁面

我們?cè)趕toryboard中拖入一個(gè)ViewController模擬,點(diǎn)擊"注冊(cè)"按鈕跳轉(zhuǎn)到的頁面.在這里我們選擇push的跳轉(zhuǎn)方式,其實(shí)跳轉(zhuǎn)的方式還可以使用模態(tài)來進(jìn)行,請(qǐng)大家自己試驗(yàn).

跳轉(zhuǎn)

我們創(chuàng)建一對(duì)類文件與拖入storyboard的ViewController關(guān)聯(lián),關(guān)聯(lián)方式在
iOS 開發(fā)可視化編程之Xib 簡(jiǎn)述中已經(jīng)說明.

我們?nèi)∶麨镽egisterViewController.

選擇"注冊(cè)"按鈕按住Control鍵拖到控制器.我們會(huì)看到兩個(gè)控制器中間出現(xiàn)了像串著紐扣似的一條線,這就是segue.

為了標(biāo)記我們?cè)O(shè)置RegisterViewController的Navigation Item為"注冊(cè)",并且為控制器設(shè)置一個(gè)顏色.

這樣就實(shí)現(xiàn)了頁面的跳轉(zhuǎn),可是雖然實(shí)現(xiàn)了跳轉(zhuǎn),但是頁面之間的傳值怎么辦呢?

關(guān)于傳值

使用segue傳值,就必須在類文件中判斷出segue連接的是哪兩個(gè)控制器.我們點(diǎn)擊對(duì)應(yīng)的segue,然后使用"show the Attributes inspector"標(biāo)簽下的identifier來標(biāo)記segue.

用identifier標(biāo)記segue

storyBoard在視圖控制器之間相互切換,系統(tǒng)會(huì)自動(dòng)執(zhí)行如下方法,頁面間傳值,必須寫在此方法里面.

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(nullable id)sender NS_AVAILABLE_IOS(5_0);

在這里我們就模擬,將ViewController中"用戶名"UITextField中輸入的字傳給RegisterViewController中的一個(gè)Label.

首先,在RegisterViewController中拖一個(gè)Label,設(shè)置顏色,并且在.m文件中將其拖成屬性.同時(shí)在.h文件中創(chuàng)建一個(gè)NSString類型的屬性.在ViewController的類文件中將"用戶名"這個(gè)textField也拖成屬性.

在RegisterViewController.h中:

@property (nonatomic, strong) NSString *string;

由于是要在ViewController中將文字傳給RegisterViewController,那么我們?cè)赩iewController中實(shí)現(xiàn)上述方法.

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
    // 先獲取連線的標(biāo)識(shí)符identfier
    if ([segue.identifier isEqualToString:@"registerPush"]) {
        
        // 獲取源控制器
        ViewController *VC = segue.sourceViewController;
        
        // 獲取目標(biāo)控制器
        RegisterViewController *registerVC = segue.destinationViewController;

        // 傳值
        registerVC.string = VC.usernameTF.text;
        
    }
    
}

效果如下:

傳值

點(diǎn)擊"登陸"按鈕跳轉(zhuǎn)頁面

同樣我們?cè)趕toryboard中拖入一個(gè)ViewController,不過這次我們?yōu)榱苏故緎toryboard對(duì)cell的支持,我們拖入一個(gè)UITableViewController,并且創(chuàng)建類文件,用同樣的方式進(jìn)行關(guān)聯(lián).

****注:寫到這里,我想說一下關(guān)于storyboard文件的使用****

我們可以從我們演示的例子中看到storyboard與ViewController是一對(duì)多的關(guān)系.那么我們?cè)趺磸膕toryboard找到某一個(gè)ViewController呢?

我們使用 "show the identity inspector"標(biāo)簽下的 Identity 的storyboardID來標(biāo)記區(qū)分.

![storyboardID](http://upload-images.jianshu.io/upload_images/1230517-d8b6ee666c08992f.png)

這樣我們?cè)陬愇募芯涂梢允褂靡幌麓a訪問到了.

在這里我們?yōu)榱搜菔臼褂胹toryboardID來查找VC,我們使用代碼來演示界面的跳轉(zhuǎn).

首先,我們先將登陸按鈕的觸發(fā)事件拖成方法.然后在這個(gè)方法里寫如下代碼

- (IBAction)LoginAction:(UIButton *)sender {
    
    LoginTableViewController *loginVC = [[UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]] instantiateViewControllerWithIdentifier:@"loginPush"];
    [self.navigationController pushViewController:loginVC animated:YES];
    
}

這樣就可一跳到LoginTableViewController中了.

在LoginTableViewController中設(shè)置cell

我們可以直接在LoginTableViewController中對(duì)cell進(jìn)行設(shè)置.

現(xiàn)在我們假使要在tableVC中展示一個(gè)如下界面:

示例

我們直接在在tableVC的Prototype cells中拖入一個(gè)Label一個(gè)UIImageView并添加約束即可.

然后創(chuàng)建一對(duì)繼承于UITableViewCell的類文件,與Prototype cells關(guān)聯(lián),并設(shè)置cell的重用標(biāo)識(shí)符identifier.

storyboard設(shè)置identifier:

設(shè)置identifier

將label和imageView在cell的類文件中關(guān)聯(lián)成屬性

關(guān)聯(lián)成屬性

最后設(shè)置tableVC就可以了,關(guān)于tableVC的設(shè)置就不在贅述,tableView的想過請(qǐng)移步,
iOS 開發(fā)可視化編程之Xib 簡(jiǎn)述.

聲明一點(diǎn),我們不在需要在重用池中注冊(cè)cell了,也不用設(shè)置重用標(biāo)識(shí)符了,因?yàn)槲覀冊(cè)趕toryboard里面已經(jīng)完成過相關(guān)操作了.

點(diǎn)擊cell跳轉(zhuǎn)到詳情頁

最后我們?cè)谧鲆粋€(gè)跳轉(zhuǎn),點(diǎn)擊cell跳轉(zhuǎn)到詳情頁面,使用storyboard實(shí)現(xiàn),不再使用

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

同樣的拖一個(gè)VC控制器到storyboard,創(chuàng)建類文件DetailViewController與storyboard文件關(guān)聯(lián).在類的.h文件中聲明一個(gè)NSString屬性.

@property(nonatomic,strong)NSString *string;

在storyboard中按住Control將cell拖到DetailViewController中,設(shè)置跳轉(zhuǎn)方式,在這里我依然選擇push,因?yàn)槲乙獙ell中nameLab上的文字作為DetailViewController的navigation Items.

push跳轉(zhuǎn)

關(guān)于傳值,我們?cè)趖ableVC中使用如下方法進(jìn)行傳值

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
//     Get the new view controller using [segue destinationViewController].
//     Pass the selected object to the new view controller.
    
    // 首先獲取當(dāng)前點(diǎn)擊的路徑
    NSIndexPath *indexPath = [self.tableView indexPathForCell:sender];
    
    // 獲取目標(biāo)控制器
    DetailViewController *detailVC = segue.destinationViewController;
    
    // 傳值
    detailVC.string = _nameArray[indexPath.row];
    
}

在DetailViewController中設(shè)置:

self.title = _string;

這樣我們就完成了點(diǎn)擊cell進(jìn)行頁面的跳轉(zhuǎn).

****注:說明一點(diǎn)****

盡管我們?cè)谏鲜鲂枨笸瓿蛇^程中并沒有使用到

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

這個(gè)方法,但是程序在執(zhí)行點(diǎn)擊跳轉(zhuǎn)的時(shí)候還是會(huì)走這個(gè)方法.

我們可以通過在

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

方法中打印一句話的方式進(jìn)行檢驗(yàn),在這里就不再操作了,讀者有興趣可以自己試驗(yàn).

結(jié)束

End

以上就是關(guān)于在可視化編程中storyboard的使用簡(jiǎn)述,由于筆者的水平有限,難免會(huì)出現(xiàn)問題,如果有疑惑或者錯(cuò)誤,歡迎交流指正,我將不勝感激.另,轉(zhuǎn)載請(qǐng)保留鏈接.