Storyboard的簡(jiǎn)單使用

1、精選優(yōu)質(zhì)文檔-傾情為你奉上Storyboard的簡(jiǎn)單使用之前做的例子，我們經(jīng)常會(huì)用到.xib文件，在其中我們可以進(jìn)行界面的設(shè)計(jì)。不過(guò)如果想切換視圖，我們就得自己寫(xiě)很多代碼。自從蘋(píng)果推出了Storyboard，我們可以在一個(gè)編輯區(qū)域設(shè)計(jì)多個(gè)視圖，并通過(guò)可視化的方法進(jìn)行各個(gè)視圖之間的切換。如下圖：上圖中有兩種箭頭：左邊的箭頭表示程序剛開(kāi)始運(yùn)行時(shí)加載的控制器；右邊的稱(chēng)為Segue，這個(gè)表示視圖之間的切換，或者表示連接Navigation Controller的Root View Controller。Storyboard功能強(qiáng)大，通過(guò)它不僅可以單獨(dú)設(shè)計(jì)每一個(gè)視圖，還能很簡(jiǎn)單地實(shí)現(xiàn)各個(gè)視圖之間的切換。

2、接下來(lái)的例子主要顯示Storyboard的功能，順便用Storyboard實(shí)現(xiàn)了靜態(tài)表格等功能。為了顯示Storyboard的功能，我們從Empty Application開(kāi)始我們的例子。1、運(yùn)行Xcode 4.2，新建一個(gè)Empty Application，名稱(chēng)為Storyboard Test：2、打開(kāi)AppDelegate.m，找到didFinishLaunchingWithOptions方法，刪除其中代碼，使得只有return YES;語(yǔ)句。3、創(chuàng)建一個(gè)Storyboard：在菜單欄依次選擇File New New File，在彈出的窗口，左邊選擇iOS組中的User Interface

3、，右邊選擇Storyboard：之后單擊Next，選擇Device Family為iPhone，單擊Next，輸入名稱(chēng)MainStoryboard，并設(shè)好Group：?jiǎn)螕鬋reate，這樣就創(chuàng)建了一個(gè)Storyboard。4、配置程序，使得從MainStoryboard啟動(dòng)：先單擊左邊帶藍(lán)色圖標(biāo)的Storyboard Test，然后選擇Summary，接下來(lái)在Main Storyboard中選擇MainStoryboard：這樣，當(dāng)運(yùn)行程序時(shí)，就從MainStoryboard加載內(nèi)容了。5、單擊MainStoryboard.storyboard，會(huì)發(fā)現(xiàn)編輯區(qū)域是空的。拖一個(gè)Navigation

4、 Controller到編輯區(qū)域：6、選中右邊的View Controller，然后按Delete鍵刪除它。之后拖一個(gè)Table View Controller到編輯區(qū)域：7、我們將在這個(gè)Table View Controller中創(chuàng)建靜態(tài)表格，不過(guò)先要將其設(shè)置為左邊Navigation Controller的Root Controller：選中Navigation Controller，按住Control鍵，向Table View Controller拉線(xiàn)：松開(kāi)鼠標(biāo)后，在彈出菜單選擇Relationship - rootViewController：之后，兩個(gè)框之間會(huì)出現(xiàn)一個(gè)連接線(xiàn)，這個(gè)就可

5、以稱(chēng)作是Segue。8、選中Table View Controller中的Table View，之后打開(kāi)Attribute Inspector，設(shè)置其Content屬性為Static Cells：這樣你會(huì)發(fā)現(xiàn)Table View中出現(xiàn)了三行Cell。在上圖你可以設(shè)置很多熟悉，比如Style、Section數(shù)量等。9、設(shè)置行數(shù)：選中Table View Section，在Attribute Inspector中設(shè)置其行數(shù)為2：然后選中每一行，設(shè)置其Style為Basic：設(shè)置第一行中Label的值為：Date and Time，第二行中的Label為L(zhǎng)ist；之后選中下方的Navigation

6、Item，在Attribute Inspector設(shè)置Title為Root View，Back Button為Root：10、我們實(shí)現(xiàn)單擊表格中的Date and Time這一行實(shí)現(xiàn)頁(yè)面轉(zhuǎn)換，在新頁(yè)面顯示切換時(shí)的時(shí)間。在菜單欄依次選擇File New New File，在彈出的窗口左邊選擇iOS中的Cocoa Touch，右邊選擇UIViewController subclass：?jiǎn)螕鬘ext，輸入名稱(chēng)DateAndTimeViewController，但是不要選XIB：之后，選好位置和Group，完成創(chuàng)建。11、再次打開(kāi)MainStoryboard.storyboard，拖一個(gè)View Co

7、ntroller到編輯區(qū)域，然后選中這個(gè)View Controller，打開(kāi)Identity Inspector，設(shè)置class屬性為DateAndTimeViewController：這樣，我們就可以向DateAndTimeViewController創(chuàng)建映射了。12、向新拖入的View Controller添加控件，如下圖：然后將顯示為L(zhǎng)abel的兩個(gè)標(biāo)簽向DateAndTimeViewController.h中創(chuàng)建映射，名稱(chēng)分別是dateLabel、timeLabel：13、打開(kāi)DateAndTimeViewController.m，在ViewDidUnload方法之后添加代碼：/每次切

8、換到這個(gè)試圖，顯示切換時(shí)的日期和時(shí)間- (void)viewWillAppear:(BOOL)animated NSDate *now = NSDate date; dateLabel.text = NSDateFormatter localizedStringFromDate:now dateStyle:NSDateFormatterLongStyle timeStyle:NSDateFormatterNoStyle; timeLabel.text = NSDateFormatter localizedStringFromDate:now dateStyle:NSDateFormatterN

9、oStyle timeStyle:NSDateFormatterLongStyle;14、打開(kāi)MainStoryboard.storyboard，選中表格的行Date and Time，按住Contrl，向View Controller拉線(xiàn)：在彈出的菜單選擇Push：這樣，Root View Controller與DateAndTimeViewController之間就出現(xiàn)了箭頭，運(yùn)行時(shí)當(dāng)點(diǎn)擊表格中的那一行，視圖就會(huì)切換到DateAndTimeViewController。15、選中DateAndTimeViewController中的Navigation Item，在Attribute In

10、spector中設(shè)置其Title為Date and Time：16、運(yùn)行一下，首先程序?qū)⒓虞d靜態(tài)表格，表格中有兩行：Date and Time以及List，單擊Date and Time，視圖切換到相應(yīng)視圖，單擊左上角的Root按鈕，視圖回到Root View。每次進(jìn)入Date and Time視圖，顯示的時(shí)間都會(huì)不同：17、接下來(lái)，我們將要實(shí)現(xiàn)，單擊List行，顯示一個(gè)表格，并且單擊表格中的某一行，我們可以在新彈出的視圖中編輯該行內(nèi)容。首先創(chuàng)建ViewController文件：ListViewController、ListEditViewController，前者繼承UITableViewC

11、ontroller，后者繼承UIViewController，參照第10步。都不要?jiǎng)?chuàng)建XIB文件。然后打開(kāi)MainStoryboard.storyboard，拖一個(gè)Table View Controller和View Controller到編輯區(qū)域，調(diào)整所有視圖在編輯區(qū)域的位置，如下圖：設(shè)置新拖入的Table View Controller和View Controller的class屬性分別是ListViewController和ListEditViewController，參考第11步。18、參照第14步，從Root View Controller中的List那一行向List View Co

12、ntroller拉線(xiàn)，并在彈出菜單也選擇Push。然后選中List View Controller的Navigation Item，設(shè)置Title及Back Button都為L(zhǎng)ist，可以參照第9步。19、向List View Controller中的表格區(qū)域拖入一個(gè)Table View Cell，這樣其中就有兩個(gè)Cell了。設(shè)置第一個(gè)Cell的Identifier屬性為GreenIdentifier。向第一個(gè)Cell中拖入一個(gè)Label，設(shè)置其字體顏色為綠色。同樣對(duì)第二個(gè)Cell進(jìn)行設(shè)置，Identifier屬性為RedIdentifier，往其中拖入Label，設(shè)置字體顏色為紅色。兩個(gè)La

13、bel的Tag屬性都設(shè)為1。20、打開(kāi)ListViewController.m，向其中添加代碼：20.1 在#import的下一行添加代碼：interface ListViewController ()property (strong, nonatomic) NSMutableArray *listArray;property (copy, nonatomic) NSDictionary *editedSelection;end20.2 在implementation之后添加代碼：synthesize listArray;synthesize editedSelection;20.3 找到vi

14、ewDidLoad方法，向其中添加代碼：- (void)viewDidLoad super viewDidLoad; NSMutableArray *array = NSMutableArray alloc initWithObjects: "Horse", "Sheep", "Pig", "Dog", "Cat", "Chicken", "Duck", "Goose", "Tree", "Flower&q

15、uot;, "Grass", "Fence", "House", "Table", "Chair", "Book", "Swing" ,nil; self.listArray = array;20.4 找到numberOfSectionsInTableView方法，使其返回1，并刪掉#warning。20.5 找到numberOfRowsInSection方法，刪掉#warning，使其返回listArray count：- (NSInteger)tabl

16、eView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section / Return the number of rows in the section. return listArray count;20.6 找到cellForRowAtIndexPath方法，修改其中代碼：- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath NSUInteger row = ind

17、exPath row; NSString *identifier = nil; if (row%2 = 0) identifier = "GreenIdentifier" else identifier = "RedIdentifier" UITableViewCell *cell = tableView dequeueReusableCellWithIdentifier:identifier; UILabel *cellLabel = (UILabel *)cell viewWithTag:1; cellLabel.text = listArray o

18、bjectAtIndex:row; return cell;21、運(yùn)行一下，當(dāng)單擊List行時(shí)，頁(yè)面切換到我們List視圖：22、下面實(shí)現(xiàn)單擊List表格中的某一行，視圖切換，并且視圖中的內(nèi)容與之前選中的行相關(guān)，然后可以對(duì)其進(jìn)行編輯，返回后，原來(lái)的數(shù)據(jù)也會(huì)發(fā)生改變。打開(kāi)MainStoryboard.storyboard，仿照第14步，從List View Controller中的兩行向List Edit View Controller拉線(xiàn)，在彈出菜單選擇Push。這樣List Edit View Controller視圖中就出現(xiàn)了Navigation Item，選中它，設(shè)置Title為Edit

19、。這樣，單擊List表格中的某一行，視圖都會(huì)切換到List Edit View Controller。23、打開(kāi)ListViewController.m，在end之前添加代碼：- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender /獲取目的ViewController UIViewController *destination = segue destinationViewController; if (destination respondsToSelector:selector(setPreViewCont

20、roller:) /將自身傳遞給目的ViewController destination setValue:self forKey:"preViewController" if (destination respondsToSelector:selector(setSelection:) /目的ViewController中的selection屬性存儲(chǔ)的就是需要編輯的內(nèi)容及其在表格中的位置 NSIndexPath *indexPath = self.tableView indexPathForCell:sender; id object = self.listArray o

21、bjectAtIndex:indexPath.row; NSDictionary *selection = NSDictionary dictionaryWithObjectsAndKeys: indexPath, "indexPath", object, "object", nil; destination setValue:selection forKey:"selection" 在ViewDidUnload方法之后添加代碼：- (void)setEditedSelection:(NSDictionary *)dict if (!

22、dict isEqual:editedSelection) editedSelection = dict; NSIndexPath *indexPath = dict objectForKey:"indexPath" id newValue = dict objectForKey:"object" listArray replaceObjectAtIndex:indexPath.row withObject:newValue; self.tableView reloadRowsAtIndexPaths:NSArray arrayWithObject:in

23、dexPath withRowAnimation:UITableViewRowAnimationAutomatic; 24、打開(kāi)MainStoryboard.storyboard，找到Edit視圖，向其中拖一個(gè)Text Field：然后為這個(gè)Text Field向ListEditViewController.h中創(chuàng)建Outlet映射，名稱(chēng)為editText。25、打開(kāi)ListEditViewController.h，向其中添加屬性：property (copy, nonatomic) NSDictionary *selection; property (weak, nonatomic) id preViewController;26、打開(kāi)ListEditViewController.m，添加代碼：26.1 在implementation的下一行添加代碼：synthesize preViewController;synthesize selection;26.2 找到ViewDidLoad方法，它默認(rèn)是被注釋掉的，去掉其周?chē)⑨尫?，添加代碼如下：- (void)viewDidLoad super viewD