在前面例子中,我們介紹了Storyboards 是 Xcode 中設(shè)計(jì)用戶界面的友好功能。
?
首先,回顧一下我們已經(jīng)完成的工作。
?
- 將一個(gè)正常的視圖控制器嵌入到導(dǎo)航控制器中
- 創(chuàng)建了一個(gè)表視圖,并填充了菜單列表
- 使用聯(lián)線從一個(gè)視圖控制器切換到另一個(gè)視圖控制器
?
我們目前還沒有實(shí)現(xiàn)詳細(xì)視圖,該視圖目前顯示 一個(gè)靜態(tài)的標(biāo)簽。我們將繼續(xù)完成這個(gè)項(xiàng)目。完善這個(gè)應(yīng)用程序。
?
1.賦值視圖控制器類
?
在前面,我們簡(jiǎn)單創(chuàng)建了一個(gè)視圖控制器,在Storyboard編輯器中,作為一個(gè)菜譜的詳細(xì)視圖,視圖控制器默認(rèn)賦值為UIViewController類
?
回到我們的問題,視圖中標(biāo)簽應(yīng)該隨著選擇的菜單發(fā)生變化,顯然,在UIViewController中需要一個(gè)變量存放菜單的名稱。
?
事實(shí)上,UIViewController類僅僅提供了基本的視圖管理模型,相當(dāng)于一個(gè)空白的視圖,沒有變量用于存儲(chǔ)菜單名稱。因此,不能直接使用UIViewController類,我們擴(kuò)展這一類,并創(chuàng)建自己的類(也就是UIViewController的子類)。
?
在項(xiàng)目導(dǎo)航欄中,右擊RecipeBook 文件夾,選擇 New File .....
?
選擇Cocoa Touch 欄目下的Object-C Class 作為模板。
?
將類命名為 RecipeDetailViewController,選擇子類為UIViewController。注意不要選擇With XIB for user interface選項(xiàng),因?yàn)槲覀儗⑹褂肧toryboards 設(shè)計(jì)用戶界面,我們不必創(chuàng)建獨(dú)立的interface builder 文件。點(diǎn)擊next。保存文件。
?
接著,我們賦值RecipeDetailViewController 類給視圖控制器。返回Storyboards 編輯器,選擇詳細(xì)視圖控制器。在Identity Inspector 窗口,更改類為 RecipeDetailViewController.
?
2.添加變量到定制的類中
?
前面通過繼承UIViewController類,創(chuàng)建了定制的視圖控制器類。然而,這個(gè)類和父類沒有任何不同,除非我們添加自己的變量和方法。還有一些工作我們需要實(shí)現(xiàn)的:
?
- 賦值一個(gè)變量(recipeName)用于數(shù)據(jù)傳遞 - 當(dāng)用戶選擇Recipe 視圖中的一個(gè)菜單時(shí),必須傳遞菜單名稱到詳細(xì)視圖
?
- 賦值變量(recipeLabel) 給文本標(biāo)簽 - 當(dāng)前標(biāo)簽是靜態(tài)的,但應(yīng)該在菜單名稱變化時(shí),更新文本標(biāo)簽。
?
OK,現(xiàn)在添加2個(gè)變量(recipeLabel 和 recipeName)。
?
選擇RecipeDetailViewController.h 文件,為接口添加2個(gè)屬性:
?
#import <UIKit/UIKit.h>
?
@interface RecipeDetailViewController : UIViewController
?
@property ( nonatomic , strong ) IBOutlet UILabel *recipeLabel;
?
@property ( nonatomic , strong ) NSString *recipeName;
?
@end
?
@implementation RecipeDetailViewController
?
@synthesize recipeLabel;
?
@synthesize recipeName;
?
?
3.建立變量和UI 元素之間的連接
?
接下來,我們需要連接 recipeLabel 變量到可視化的Label 標(biāo)簽。在Stroyboards 編輯器,按住Control鍵,并點(diǎn)擊Recipe Detail View Controller 圖標(biāo),拖拉到Label對(duì)象上。釋放按鈕,彈出變量列表供你選擇,選擇recipeLabel變量。
?
現(xiàn)在,已經(jīng)連接了變量和Label UI 元素,變量的任何變化將可視化地顯示出來。但是,仍然有一項(xiàng)沒有處理,我們還需要標(biāo)簽顯示菜單的名稱。因此,在viewDidLoad 方法中,我們添加如下代碼,并設(shè)置標(biāo)簽文本和菜單文本名稱一致。
?
- ( void )viewDidLoad
{
? ? [ super viewDidLoad ];
// Set the Label text with the selected recipe
? ? recipeLabel . text = recipeName ;
}
?
嘗試編譯并運(yùn)行你的App,哦,在選擇任意菜單項(xiàng)后,詳細(xì)視圖完全顯示空白。
?
這是期望的效果,因?yàn)? 我們還沒有編寫任何代碼傳遞菜單名稱,recipeName 變量是空白的導(dǎo)致文本標(biāo)簽也是空白的。
?
?
3.使用聯(lián)線(Segue)傳遞數(shù)據(jù)
?
聯(lián)線對(duì)象用來準(zhǔn)備視圖控制器之間的切換,當(dāng)聯(lián)線觸發(fā)時(shí),在可視化的視圖切換發(fā)生之前,storyboard運(yùn)行時(shí)調(diào)用當(dāng)前視圖控制器的 prepareForSegue:sender: 方法。通過實(shí)現(xiàn)該方法,我們可傳遞任何需要的數(shù)據(jù)給即將顯示的視圖控制器。
?
然而,最好的辦法是給Storyboards 中每一個(gè)聯(lián)線一個(gè)唯一個(gè)標(biāo)識(shí)符(identifier),標(biāo)示符是一個(gè)字符串,應(yīng)用程序使用該字符串來區(qū)別不同的聯(lián)線。
?
隨著App 越來越復(fù)雜,在視圖控制器中,將有更多的聯(lián)線
?
選擇聯(lián)線,在Identity Inspector 窗口,設(shè)置identifier 屬性值。這里,我們將該聯(lián)線命名為 showRecipeDetail.
?
接著,我們將在RecipeBookViewController 視圖控制器中實(shí)現(xiàn)prepareForSegue:sender: 方法, 是聯(lián)線的源視圖控制器。
?
選擇RecipeBookViewController.m 文件,添加如下代碼:
?
- ( void )prepareForSegue:( UIStoryboardSegue *)segue sender:( id )sender
{
? ? if ([segue. identifier isEqualToString : @"showRecipeDetail" ]) {
? ? ? ? NSIndexPath *indexPath = [ self . tableView indexPathForSelectedRow ];
? ? ? ? RecipeDetailViewController *destViewController = segue. destinationViewController ;
?
? ? ? ? destViewController. recipeName = [ recipes objectAtIndex :indexPath. row ];
?
? ? }
}
?
在視圖切換開始的時(shí)候,調(diào)用prepareForSegue 方法。
?
第一行用來驗(yàn)證segue 的標(biāo)識(shí)符。在本例中,標(biāo)識(shí)符為showRecipeDetail。
?
第二行調(diào)用tableView:indexPathForSelectedRow 獲取選擇的表行。一旦獲取選擇的行,
我們將傳遞給RecipeDetailViewController視圖控制器。一個(gè)Segue對(duì)象包含了需要在轉(zhuǎn)換結(jié)束后在視圖控制器中顯示的內(nèi)容。
?
你可以使用segue.destinationViewController 獲得目的視圖控制器。
?
剩下的代碼就是傳遞菜單名稱給目的控制器
?
你現(xiàn)在還無法運(yùn)行App,當(dāng)編譯時(shí),會(huì)顯示如下錯(cuò)誤,總結(jié)為2類:
?
- tabeView 屬性在 RecipeBookViewController 中沒有找到
?
- RecipeDetailViewController 是什么? Xcode 不認(rèn)識(shí)它。
?
對(duì)于第二個(gè)錯(cuò)誤,我們通過引入RecipeDetailViewController 的頭文件。
?
第一個(gè)錯(cuò)誤,我們首先要在RecipeBookViewController.h 文件中,在@end之前添加如下代碼:
?
@property ( nonatomic , strong ) IBOutlet UITableView * tableView;
@synthesize tableView;
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
