實(shí)現(xiàn)多場景和彈出框.pptVIP

實(shí)現(xiàn)多場景和彈出框,青島濱海學(xué)院 信息工程學(xué)院計算機(jī)教研室 崔守良,本章內(nèi)容： 如何在故事板中創(chuàng)建多個場景 使用切換（segue）在場景間過渡 如何在場景之間傳輸數(shù)據(jù) 如何呈現(xiàn)和使用彈出框,多場景故事板簡介,視圖控制器：管用戶與其iOS設(shè)備交互的類。可以使用單視圖控制器來處理大部分應(yīng)用程序邏輯。 視圖（View）：用戶在屏幕上看到的布局。 場景(Scene)：視圖控制器和視圖的獨(dú)特組合。假設(shè)要開發(fā)一個圖像編輯程序，可能創(chuàng)建用于選擇文件的場景、實(shí)現(xiàn)編輯器的場景、應(yīng)用濾鏡的場景等。 切換(segue)：是場景間的過渡，常使用視覺過渡效果。,模態(tài)視圖(modal view)：模態(tài)視圖在需要進(jìn)行用戶交互時顯示在另一個視圖上，經(jīng)常通過切換類型“模態(tài)”來使用模態(tài)視圖。 關(guān)系(relationship)：類似于切換，用于某些類型的視圖控制器，如選項(xiàng)卡欄控制器。關(guān)系是在主選項(xiàng)卡欄的按鈕之間創(chuàng)建的，用戶觸摸這些按鈕時，將顯示獨(dú)立的場景。 故事板(storyboard)：包含項(xiàng)目中場景、切換和關(guān)系定義的文件。 要在應(yīng)用程序中包含多個視圖控制器，必須創(chuàng)建相應(yīng)的類文件,創(chuàng)建多場景項(xiàng)目,1.在故事板中添加場景 在IB編輯器中打開故事板文件(MainStoryboard. Storyboard)。確保打開了對象庫(Control+Option+Command+3)，將View Controller拖曳到IB編輯器的空白區(qū)域。這將在故事板中添加一個視圖控制器和相應(yīng)的視圖，從而新增一個場景,2.給場景命名 新增場景后，默認(rèn)情況下，每個場景都根據(jù)其視圖控制器類命名，默認(rèn)場景名為View Controller Scene。 項(xiàng)目中原本就有一個名為View Controller Scene的場景，為避免這種二義性，有兩種選擇：一是先添加視圖控制器類，并將其指定給新場景；二是根據(jù)自己的喜好給場景命名，可在文檔大綱中選擇其視圖控制器，再打開Identity Inspector并展開Identity部分，在文本框Label中輸入新場景名。Xcode將自動在指定的名稱后面添加Scene。,3. 添加提供支持的視圖控制器子類 在故事板中添加新場景后，需要將其與代碼關(guān)聯(lián)起來。 在項(xiàng)目導(dǎo)航器中添加UIViewController的子類，選擇模板類別 iOS Cocoa Touch，再選擇UIViewController subclass，如果創(chuàng)建的是iPad應(yīng)用程序，選擇復(fù)選框Targeted for iPad。 要將場景的視圖控制器關(guān)聯(lián)到UIViewController子類，在IB編輯器中選擇新場景，打開 Identity Inspector。在Custom Class部分，從下拉列表中選擇剛創(chuàng)建的類。,4. 使用#import和class共享屬性和方法 在項(xiàng)目中添加多個視圖控制器時，它們很可能需要交換和顯示信息。要以編程方式讓這些類彼此知道對方，需要導(dǎo)入對方的接口文件。如果兩個類需要彼此訪問，這些import語句將導(dǎo)致循環(huán)引用。 如MyGraphicsClass和MyEditorClass需要彼此導(dǎo)入對方，可這樣添加引用： 在MyEditorClass.h中，添加#import; 在MyGraphicsClass.h中，添加class MyEditorClass 在MyGraphicsClass.m中，添加import “MyEditorClass.h”,創(chuàng)建切換,假設(shè)故事板包含兩個場景，在初始場景中添加一個按鈕，用戶單擊該按鈕時將過渡到第二個場景。可按鈕control鍵，從該按鈕拖曳到第二個場景的視圖控制器。松開鼠標(biāo)后，將出現(xiàn)一個Storyboard Segues框，可以選擇切換的樣式： Modal(模態(tài))：過渡到另一個場景，任務(wù)完成后，將關(guān)閉該場景，返回到原來的場景。 Push（壓入）：創(chuàng)建一個場景鏈，用戶可在其中前后移動。常用于導(dǎo)航視圖控制器 Replace，僅用于iPad，如用分割視圖控制器替換當(dāng)前場景。 Popover，僅用于iPad。,1.配置切換： 將切換加入項(xiàng)目中，將在編輯器區(qū)域看到一條線，將兩個場景連接起來。另外，文檔大綱也包含其圖標(biāo)，觸發(fā)切換的場景包含一個新行，其內(nèi)容為 Segue from to 。 給切換指定一個有意義的標(biāo)識符，如toEditor，用于觸發(fā)切換或以編程方式指定切換。 過渡類型style是從一個場景切換到另一個場景時播放的動畫,2.手工控制模態(tài)切換 要使用在故事板中定義的切換過渡到另一個場景，又不想自動觸發(fā)該切換，可以使用UIViewController實(shí)例方法，如： self performSegueWithIdentifier:”toMyGame” sender : self; 用戶與模態(tài)視圖交互完畢后返回到原來的場景，可在顯示模態(tài)場景的視圖控制器中或在模態(tài)場景的視圖控制器中調(diào)用： self dismissViewControllerAnimated: YES completion:nil;,3. 以編程方式創(chuàng)建模態(tài)場景切換 1）設(shè)置視圖控制器標(biāo)識符，創(chuàng)建故事板場景后，必須在進(jìn)行任何編碼之前，給你要以編程方式顯示的視圖控制器指定標(biāo)識符。在IB編輯器中，將視圖控制器的標(biāo)識符設(shè)置為myEditor。 2）實(shí)例化視圖控制器和視圖。應(yīng)用程序需要調(diào)用方法storyboardWithName，創(chuàng)建一個指向故事板文件的UIStoryboard對象。該對象可用于加載視圖控制器及其視圖。如，要創(chuàng)建指向項(xiàng)目文件mainStoryboard.storyboard的對象mainStoryboard，可使用如下代碼： UIStoryboard *mainStoryboard = UIStoryboard storyboardWithName:”MainStorybaord” bundle:nil;,接下來，通過故事板對象調(diào)用方法instantiateViewControllerWithIdentifier，以實(shí)例化要切換到的視圖控制器。假設(shè)你創(chuàng)建了一個名為EditorViewController的UIViewController子類，并將其視圖控制器標(biāo)識符設(shè)置為myEditor，則可使用如下代碼新建一個EditorViewController實(shí)例： EditorViewController * editorVC = mainStoryboard instantiateViewControllerWithIdentifier:”myEditor”;,3）配置模態(tài)過渡樣式和顯示樣式： editroVC.modalTransitionStyle = UIModalTransitionStyleCoverVertical; editorVC.modalPresentationStyle = UIModalPresentationFormSheet; 4）顯示視圖控制器 self presentViewController:editorVC animated:YES completion:nil; 可使用dismissViewControllerAnimated: completion: 關(guān)閉場景,4. 在場景之間傳遞數(shù)據(jù) 1）方法prepareForSegue: sender: ，可以獲取指向切換中的視圖控制器的引用，在即將發(fā)生切換前，將對發(fā)起切換的視圖控制器自動調(diào)用該方法。傳遞給這個方法的參數(shù)為一個UIStoryboardSegue對象以及發(fā)起切換的對象，如： -(void) prepareForSegue: (UIStoryboardSegue *) segue sender: (id) sender ViewController *startVC = (ViewController *) segue.sourceViewController; ViewController *destVC = (EditorViewController *) segue.destinationViewController; ,prepareForSegue: sender: 方法只能進(jìn)行從源視圖控制器到目標(biāo)視圖控制器的單向通信，因?yàn)樵摲椒ㄊ窃谠匆晥D控制器中實(shí)現(xiàn)的。 對于模態(tài)切換，UIViewController的兩個屬性讓你能夠輕松獲取源視圖控制器和目標(biāo)視圖控制器：presentingViewController 和 presentedViewController。 如在EditorViewController中，可使用如下語句來訪問源視圖控制器的屬性： (ViewController *) self. presentingViewController) . ,理解iPad彈出框,彈出框是這樣一個UI元素，即在現(xiàn)有視圖上顯示內(nèi)容，并通過一個小箭頭指向一個屏幕對象，以提供上下文。 通過彈出框，可在不離開當(dāng)前屏幕的情況下向用戶顯示新信息，還可在用戶使用完畢后隱藏這些信息。 彈出框的內(nèi)容由一個視圖和一個視圖控制器決定，還需要另一個控制器對象-彈出框控制器UIPopoverController，該控制器指定彈出框的大小及其箭頭指向何方。,創(chuàng)建彈出框,與模態(tài)場景一樣，首先在故事板中新增一個場景，再創(chuàng)建并指定提供支持的視圖控制器類，這個類將為彈出框提供內(nèi)容，因此被稱為彈出框的“內(nèi)容視圖控制器”。 1.創(chuàng)建彈出切換，在按住Control鍵，從用于顯示彈出框的UI元素拖曳到為彈出框提供內(nèi)容的視圖控制器，在Xcode要求你指定故事板切換的類型時，選擇Popover。,創(chuàng)建彈出切換后，彈出框可調(diào)整大小了（通常，與視圖控制器相關(guān)聯(lián)的視圖的大小被鎖定），對于彈出框，Apple允許的最大寬度為600點(diǎn)，建議寬度不超過320點(diǎn)，允許的最大高度與iPad屏幕相同。 在Storyboard Segue部分，首先為該彈出框切換指定標(biāo)識符，還可以指定彈出框箭頭可指向的方向，這決定了iOS將把彈出框顯示在屏幕的什么地方。如果你只允許箭頭指向左邊，彈出框?qū)@示在觸發(fā)它的對象右邊。,2.響應(yīng)用戶關(guān)閉彈出框 要在彈出框關(guān)閉時獲悉這一點(diǎn)，并獲取其內(nèi)容，需要遵守協(xié)議UIPopoverControllerDelegate； 下一步是更新控制彈出框的UIPopoverController，將其delegate屬性設(shè)置為遵守該協(xié)議的類，要設(shè)置彈出框的委托，必須實(shí)現(xiàn)方法prepareForSegue: sender: 如： -(void) prepareForSegue: (UIStoryboardSegue *) segue sender: (id) sender if( segue.identifier isEqualToString: ”toEditorPopover” ) (UIStoryboardPopoverSegue *) segue).popoverController. Delegate = self; ,協(xié)議提供了方法popoverControllerDidDismissPopover，可通過它來響應(yīng)彈出框關(guān)閉。如在彈出框關(guān)閉時訪問彈出框的內(nèi)容： -(void) popoverControllerDidDismissPopover: (UIPopoverController *) popoverController NSString * emailFromPopover = ( EditorViewController *) popoverController. contentViewController). emial; ,3. 以編程方式創(chuàng)建并顯示彈出框 先創(chuàng)建一個場景和相應(yīng)的視圖控制器，后者將為彈出框提供內(nèi)容，請務(wù)必給場景的視圖控制器指定標(biāo)識符，接下來，必須 分配并初始化內(nèi)容視圖和視圖控制器： UIStoryboard *mainStoryboard = UIStoryboard storyboardWithName: ”MainStoryboard” bundle :nil; EditorViewController * editorVC = mainStoryboard instantiateViewControllerWithIdentifier: ”myEditor”;,在iOS5和Xcode 4.2（啟用了ACR）中，有時會出現(xiàn)這樣的問題：分配并初始化對象后，在我們需要使用前它們被ACR釋放了。 要創(chuàng)建一個新的UIPopoverController，首先將其聲明為顯示彈出框的類的屬性，如在文件ViewController.h中添加如下代碼： property (strong, nonatomic) UIPopoverController *editorPopoverController; 在ViewController.m中添加： synthesize editorPopoverController; 在ViewDidUnload中，添加： self setEditorPopoverController:nil;,編寫這些代碼后，便可創(chuàng)建并配置彈出框控制器，而不用擔(dān)心它消失了。為分配并初始化彈出框控制器，可使用UIPopoverController的方法initWithContentViewController，告訴彈出框使用哪個內(nèi)容視圖。如： self.editorPopoverController = UIPopoverController alloc initWithContentViewController: editorVC; 接下來可以設(shè)置彈出框的大小，如： self.popoverController. popoverContentSize = CGSizeMake(300,400);,在顯示彈出框前，需要完成的最后一步是，設(shè)置彈出框控制器的委托，讓彈出框控制器自動調(diào)用協(xié)議UIPopoverControllerDelegate定義的方法popoverControllerDidDismissPopover: 如： self.editorPopoverController.delegate = self; 要顯示彈出框，可使用如下語句： self.editorPopoverController presentPopoverFromRect: (UIView *)sender). frame inView:self.view permittedArrowDirections: UIPopoverArrowDirectionAny animated:YES;,模態(tài)切換實(shí)例,首先使用Single View Application創(chuàng)建一個項(xiàng)目，在項(xiàng)目中添加一個視圖及提供支持的視圖控制器類。第一個視圖包含一個標(biāo)簽，其中顯示了當(dāng)前使用的電子郵件地址；還有一個edit按鈕，它啟動到第二個視圖控制器的切換，而該控制器在一個可編輯的文本框中顯示當(dāng)前的電子郵件地址，還包含一個Dismiss按鈕，用于關(guān)閉模態(tài)視圖并更新第一個視圖中的電子郵件地址標(biāo)簽。,1.創(chuàng)建項(xiàng)目 創(chuàng)建一個Single View Application項(xiàng)目名為ModalEditor。 添加EditorViewController類：在項(xiàng)目導(dǎo)航中單擊+按鈕，選擇iOS Cocoa Touch下的UIViewController subclass，將名稱設(shè)置為EditorViewController。 添加新場景并將其關(guān)聯(lián)到EditorViewController：在IB編輯器中打開MainStoryboard.storyboard，拖曳View Controller對象到IB編輯器的空白區(qū)域；在文檔大綱中選擇第二個場景中的View Controller圖標(biāo)，在Identity Inspector中從下拉列表Class中選擇EditorViewController類,選擇第一個場景中的視圖控制器圖標(biāo)，確保打開了Identity Inspector，在該檢查器的Identity部分，將第一個視圖的標(biāo)簽設(shè)置為Initial。對第二個場景重復(fù)上述操作，將其視圖控制器標(biāo)簽設(shè)置為Editor。,2. 設(shè)計界面 在Initial Scene場景上部中央添加一個標(biāo)簽，文本設(shè)置為Email Address：；在它下方放置第二個標(biāo)簽，并將其文本設(shè)置為你的電子郵件地址，增大第二個標(biāo)簽，并為其創(chuàng)建一個屬性/實(shí)例變量，并將其命名為emailLabel；在其下方添加一個按鈕，設(shè)置文本為Edit. 轉(zhuǎn)向editor Scene場景，在上方中央添加一個標(biāo)簽，文本設(shè)置為Edmail Address:;在其下方添加一個空文本框，為其創(chuàng)建一個屬性，命名為emailField；在其下方添加一個按鈕，文本設(shè)置為Done。,3. 創(chuàng)建模態(tài)切換 為創(chuàng)建從初始場景到編輯場景的切換，按住Control鍵，從IB編輯器中的Edit按鈕拖曳到文檔大綱中編輯器場景的視圖控制器Editor。 在Xcode要求指定切換類型時，選擇Modal；在文檔大綱中，初始場景新增Segue from UIButton to Editor。選擇該切換，為其指定一個標(biāo)識符toEditor，選擇過濾樣式，如Partial Curl。,4.創(chuàng)建并連接輸出口和操作 選擇初始場景(Initial Scene)中包含電子郵件地址的標(biāo)簽，切換到助手編輯器，按住Control鍵，從該標(biāo)簽拖曳到文件ViewController.h中編譯指令interface下方，新建一個名為emailLabel的輸出口。 移到編輯器場景(Editor Scene)，在EditorViewController.h中創(chuàng)建文本框的輸出口emailField。 在編輯器場景中為Done按鈕添加一個操作dismissEditor,5. 實(shí)現(xiàn)應(yīng)用程序邏輯 用戶顯示編輯器場景時，應(yīng)用程序從初始視圖控制器的屬性emailLabel獲取內(nèi)容，并將其放在編輯器場景的文本框emailField中。用戶單擊Done按鈕時，應(yīng)用程序使用文本框emailField的內(nèi)容更新emailLabel。 在EditorViewController.h文件中導(dǎo)入接口文件ViewController.h: #import “ViewController.h”,在EditorViewController類的方法viewDidLoad中，場景加載時設(shè)置emailField的值，默認(rèn)情況下，這個方法被注釋掉。 -(void)viewDidLoad self.emailField.text = (ViewController *)self. presentingViewController).emailLabel.text; super viewDidLoad; ,在dismissEditor方法中將初始場景中標(biāo)簽的文本設(shè)置為編輯器場景中文本框的內(nèi)容 -(IBAction) dismissEditor: (id)sender (ViewController *) self.presentingViewController). emailLabel.text = self.emailField.text; self dismissViewControllerAnimated:YES completion:nil; 生成應(yīng)用程序,使用彈出框,1. 新建一個Single View Application項(xiàng)目，命名為PopoverEditor。選擇iPad平臺。 在項(xiàng)目中添加一個EditorViewController類，再添加一個新場景，并將其關(guān)聯(lián)到EditorViewController類。設(shè)置視圖控制器的標(biāo)簽，使得大綱顯示的場景名為Initial Scene和Editor Scene。,2. 設(shè)計界面 在第一個場景Initial Scene中添加一個標(biāo)簽，其文本設(shè)置為Email Address:，添加第二個標(biāo)簽，其文本設(shè)置為你的郵件地址，添加一個按鈕Edit。 在第二個場景Editor Scene中添加一個文本框。,3. 創(chuàng)建彈出切換 按住Control鍵，從初始視圖的Edit按鈕拖曳到編輯器視圖，在彈出的故事板切換類型時，選擇Popover。給該切換指定一個標(biāo)識符toEditor，選擇其Direction的值Up，即彈出框只出現(xiàn)在按鈕的下方。 創(chuàng)建彈出切換后，Xcode自動解除對其視圖大小的鎖定，給編輯器場景設(shè)置寬度為320點(diǎn)，高度為100點(diǎn)，調(diào)整編輯器視圖的內(nèi)容，使其居中。,4. 創(chuàng)建并連接輸出口 將包含電子郵件地址的標(biāo)簽連接到文件ViewController.h,并將輸出口命名為emailLabel；將編輯器場景中的文本框連接到文件EditorViewController.h，并將輸出口命名為emailField。,5.實(shí)現(xiàn)應(yīng)用程序邏輯 讓ViewController獲取和設(shè)置彈出框的內(nèi)容視圖控制器Edit