实现多场景和弹出框.ppt

实现多场景和弹出框,青岛滨海学院 信息工程学院计算机教研室 崔守良,本章内容： 如何在故事板中创建多个场景 使用切换（segue）在场景间过渡 如何在场景之间传输数据 如何呈现和使用弹出框,多场景故事板简介,视图控制器：管用户与其iOS设备交互的类。可以使用单视图控制器来处理大部分应用程序逻辑。 视图（View）：用户在屏幕上看到的布局。 场景(Scene)：视图控制器和视图的独特组合。假设要开发一个图像编辑程序，可能创建用于选择文件的场景、实现编辑器的场景、应用滤镜的场景等。 切换(segue)：是场景间的过渡，常使用视觉过渡效果。,模态视图(modal view)：模态视图在需要进行用户交互时显示在另一个视图上，经常通过切换类型“模态”来使用模态视图。 关系(relationship)：类似于切换，用于某些类型的视图控制器，如选项卡栏控制器。关系是在主选项卡栏的按钮之间创建的，用户触摸这些按钮时，将显示独立的场景。 故事板(storyboard)：包含项目中场景、切换和关系定义的文件。 要在应用程序中包含多个视图控制器，必须创建相应的类文件,创建多场景项目,1.在故事板中添加场景 在IB编辑器中打开故事板文件(MainStoryboard. Storyboard)。确保打开了对象库(Control+Option+Command+3)，将View Controller拖曳到IB编辑器的空白区域。这将在故事板中添加一个视图控制器和相应的视图，从而新增一个场景,2.给场景命名 新增场景后，默认情况下，每个场景都根据其视图控制器类命名，默认场景名为View Controller Scene。 项目中原本就有一个名为View Controller Scene的场景，为避免这种二义性，有两种选择：一是先添加视图控制器类，并将其指定给新场景；二是根据自己的喜好给场景命名，可在文档大纲中选择其视图控制器，再打开Identity Inspector并展开Identity部分，在文本框Label中输入新场景名。Xcode将自动在指定的名称后面添加Scene。,3. 添加提供支持的视图控制器子类 在故事板中添加新场景后，需要将其与代码关联起来。 在项目导航器中添加UIViewController的子类，选择模板类别 iOS Cocoa Touch，再选择UIViewController subclass，如果创建的是iPad应用程序，选择复选框Targeted for iPad。 要将场景的视图控制器关联到UIViewController子类，在IB编辑器中选择新场景，打开 Identity Inspector。在Custom Class部分，从下拉列表中选择刚创建的类。,4. 使用#import和class共享属性和方法 在项目中添加多个视图控制器时，它们很可能需要交换和显示信息。要以编程方式让这些类彼此知道对方，需要导入对方的接口文件。如果两个类需要彼此访问，这些import语句将导致循环引用。 如MyGraphicsClass和MyEditorClass需要彼此导入对方，可这样添加引用： 在MyEditorClass.h中，添加#import; 在MyGraphicsClass.h中，添加class MyEditorClass 在MyGraphicsClass.m中，添加import “MyEditorClass.h”,创建切换,假设故事板包含两个场景，在初始场景中添加一个按钮，用户单击该按钮时将过渡到第二个场景。可按钮control键，从该按钮拖曳到第二个场景的视图控制器。松开鼠标后，将出现一个Storyboard Segues框，可以选择切换的样式： Modal(模态)：过渡到另一个场景，任务完成后，将关闭该场景，返回到原来的场景。 Push（压入）：创建一个场景链，用户可在其中前后移动。常用于导航视图控制器 Replace，仅用于iPad，如用分割视图控制器替换当前场景。 Popover，仅用于iPad。,1.配置切换： 将切换加入项目中，将在编辑器区域看到一条线，将两个场景连接起来。另外，文档大纲也包含其图标，触发切换的场景包含一个新行，其内容为 Segue from to 。 给切换指定一个有意义的标识符，如toEditor，用于触发切换或以编程方式指定切换。 过渡类型style是从一个场景切换到另一个场景时播放的动画,2.手工控制模态切换 要使用在故事板中定义的切换过渡到另一个场景，又不想自动触发该切换，可以使用UIViewController实例方法，如： self performSegueWithIdentifier:”toMyGame” sender : self; 用户与模态视图交互完毕后返回到原来的场景，可在显示模态场景的视图控制器中或在模态场景的视图控制器中调用： self dismissViewControllerAnimated: YES completion:nil;,3. 以编程方式创建模态场景切换 1）设置视图控制器标识符，创建故事板场景后，必须在进行任何编码之前，给你要以编程方式显示的视图控制器指定标识符。在IB编辑器中，将视图控制器的标识符设置为myEditor。 2）实例化视图控制器和视图。应用程序需要调用方法storyboardWithName，创建一个指向故事板文件的UIStoryboard对象。该对象可用于加载视图控制器及其视图。如，要创建指向项目文件mainStoryboard.storyboard的对象mainStoryboard，可使用如下代码： UIStoryboard *mainStoryboard = UIStoryboard storyboardWithName:”MainStorybaord” bundle:nil;,接下来，通过故事板对象调用方法instantiateViewControllerWithIdentifier，以实例化要切换到的视图控制器。假设你创建了一个名为EditorViewController的UIViewController子类，并将其视图控制器标识符设置为myEditor，则可使用如下代码新建一个EditorViewController实例： EditorViewController * editorVC = mainStoryboard instantiateViewControllerWithIdentifier:”myEditor”;,3）配置模态过渡样式和显示样式： editroVC.modalTransitionStyle = UIModalTransitionStyleCoverVertical; editorVC.modalPresentationStyle = UIModalPresentationFormSheet; 4）显示视图控制器 self presentViewController:editorVC animated:YES completion:nil; 可使用dismissViewControllerAnimated: completion: 关闭场景,4. 在场景之间传递数据 1）方法prepareForSegue: sender: ，可以获取指向切换中的视图控制器的引用，在即将发生切换前，将对发起切换的视图控制器自动调用该方法。传递给这个方法的参数为一个UIStoryboardSegue对象以及发起切换的对象，如： -(void) prepareForSegue: (UIStoryboardSegue *) segue sender: (id) sender ViewController *startVC = (ViewController *) segue.sourceViewController; ViewController *destVC = (EditorViewController *) segue.destinationViewController; ,prepareForSegue: sender: 方法只能进行从源视图控制器到目标视图控制器的单向通信，因为该方法是在源视图控制器中实现的。 对于模态切换，UIViewController的两个属性让你能够轻松获取源视图控制器和目标视图控制器：presentingViewController 和 presentedViewController。 如在EditorViewController中，可使用如下语句来访问源视图控制器的属性： (ViewController *) self. presentingViewController) . ,理解iPad弹出框,弹出框是这样一个UI元素，即在现有视图上显示内容，并通过一个小箭头指向一个屏幕对象，以提供上下文。 通过弹出框，可在不离开当前屏幕的情况下向用户显示新信息，还可在用户使用完毕后隐藏这些信息。 弹出框的内容由一个视图和一个视图控制器决定，还需要另一个控制器对象-弹出框控制器UIPopoverController，该控制器指定弹出框的大小及其箭头指向何方。,创建弹出框,与模态场景一样，首先在故事板中新增一个场景，再创建并指定提供支持的视图控制器类，这个类将为弹出框提供内容，因此被称为弹出框的“内容视图控制器”。 1.创建弹出切换，在按住Control键，从用于显示弹出框的UI元素拖曳到为弹出框提供内容的视图控制器，在Xcode要求你指定故事板切换的类型时，选择Popover。,创建弹出切换后，弹出框可调整大小了（通常，与视图控制器相关联的视图的大小被锁定），对于弹出框，Apple允许的最大宽度为600点，建议宽度不超过320点，允许的最大高度与iPad屏幕相同。 在Storyboard Segue部分，首先为该弹出框切换指定标识符，还可以指定弹出框箭头可指向的方向，这决定了iOS将把弹出框显示在屏幕的什么地方。如果你只允许箭头指向左边，弹出框将显示在触发它的对象右边。,2.响应用户关闭弹出框 要在弹出框关闭时获悉这一点，并获取其内容，需要遵守协议UIPopoverControllerDelegate； 下一步是更新控制弹出框的UIPopoverController，将其delegate属性设置为遵守该协议的类，要设置弹出框的委托，必须实现方法prepareForSegue: sender: 如： -(void) prepareForSegue: (UIStoryboardSegue *) segue sender: (id) sender if( segue.identifier isEqualToString: ”toEditorPopover” ) (UIStoryboardPopoverSegue *) segue).popoverController. Delegate = self; ,协议提供了方法popoverControllerDidDismissPopover，可通过它来响应弹出框关闭。如在弹出框关闭时访问弹出框的内容： -(void) popoverControllerDidDismissPopover: (UIPopoverController *) popoverController NSString * emailFromPopover = ( EditorViewController *) popoverController. contentViewController). emial; ,3. 以编程方式创建并显示弹出框 先创建一个场景和相应的视图控制器，后者将为弹出框提供内容，请务必给场景的视图控制器指定标识符，接下来，必须 分配并初始化内容视图和视图控制器： UIStoryboard *mainStoryboard = UIStoryboard storyboardWithName: ”MainStoryboard” bundle :nil; EditorViewController * editorVC = mainStoryboard instantiateViewControllerWithIdentifier: ”myEditor”;,在iOS5和Xcode 4.2（启用了ACR）中，有时会出现这样的问题：分配并初始化对象后，在我们需要使用前它们被ACR释放了。 要创建一个新的UIPopoverController，首先将其声明为显示弹出框的类的属性，如在文件ViewController.h中添加如下代码： property (strong, nonatomic) UIPopoverController *editorPopoverController; 在ViewController.m中添加： synthesize editorPopoverController; 在ViewDidUnload中，添加： self setEditorPopoverController:nil;,编写这些代码后，便可创建并配置弹出框控制器，而不用担心它消失了。为分配并初始化弹出框控制器，可使用UIPopoverController的方法initWithContentViewController，告诉弹出框使用哪个内容视图。如： self.editorPopoverController = UIPopoverController alloc initWithContentViewController: editorVC; 接下来可以设置弹出框的大小，如： self.popoverController. popoverContentSize = CGSizeMake(300,400);,在显示弹出框前，需要完成的最后一步是，设置弹出框控制器的委托，让弹出框控制器自动调用协议UIPopoverControllerDelegate定义的方法popoverControllerDidDismissPopover: 如： self.editorPopoverController.delegate = self; 要显示弹出框，可使用如下语句： self.editorPopoverController presentPopoverFromRect: (UIView *)sender). frame inView:self.view permittedArrowDirections: UIPopoverArrowDirectionAny animated:YES;,模态切换实例,首先使用Single View Application创建一个项目，在项目中添加一个视图及提供支持的视图控制器类。第一个视图包含一个标签，其中显示了当前使用的电子邮件地址；还有一个edit按钮，它启动到第二个视图控制器的切换，而该控制器在一个可编辑的文本框中显示当前的电子邮件地址，还包含一个Dismiss按钮，用于关闭模态视图并更新第一个视图中的电子邮件地址标签。,1.创建项目 创建一个Single View Application项目名为ModalEditor。 添加EditorViewController类：在项目导航中单击+按钮，选择iOS Cocoa Touch下的UIViewController subclass，将名称设置为EditorViewController。 添加新场景并将其关联到EditorViewController：在IB编辑器中打开MainStoryboard.storyboard，拖曳View Controller对象到IB编辑器的空白区域；在文档大纲中选择第二个场景中的View Controller图标，在Identity Inspector中从下拉列表Class中选择EditorViewController类,选择第一个场景中的视图控制器图标，确保打开了Identity Inspector，在该检查器的Identity部分，将第一个视图的标签设置为Initial。对第二个场景重复上述操作，将其视图控制器标签设置为Editor。,2. 设计界面 在Initial Scene场景上部中央添加一个标签，文本设置为Email Address：；在它下方放置第二个标签，并将其文本设置为你的电子邮件地址，增大第二个标签，并为其创建一个属性/实例变量，并将其命名为emailLabel；在其下方添加一个按钮，设置文本为Edit. 转向editor Scene场景，在上方中央添加一个标签，文本设置为Edmail Address:;在其下方添加一个空文本框，为其创建一个属性，命名为emailField；在其下方添加一个按钮，文本设置为Done。,3. 创建模态切换 为创建从初始场景到编辑场景的切换，按住Control键，从IB编辑器中的Edit按钮拖曳到文档大纲中编辑器场景的视图控制器Editor。 在Xcode要求指定切换类型时，选择Modal；在文档大纲中，初始场景新增Segue from UIButton to Editor。选择该切换，为其指定一个标识符toEditor，选择过滤样式，如Partial Curl。,4.创建并连接输出口和操作 选择初始场景(Initial Scene)中包含电子邮件地址的标签，切换到助手编辑器，按住Control键，从该标签拖曳到文件ViewController.h中编译指令interface下方，新建一个名为emailLabel的输出口。 移到编辑器场景(Editor Scene)，在EditorViewController.h中创建文本框的输出口emailField。 在编辑器场景中为Done按钮添加一个操作dismissEditor,5. 实现应用程序逻辑 用户显示编辑器场景时，应用程序从初始视图控制器的属性emailLabel获取内容，并将其放在编辑器场景的文本框emailField中。用户单击Done按钮时，应用程序使用文本框emailField的内容更新emailLabel。 在EditorViewController.h文件中导入接口文件ViewController.h: #import “ViewController.h”,在EditorViewController类的方法viewDidLoad中，场景加载时设置emailField的值，默认情况下，这个方法被注释掉。 -(void)viewDidLoad self.emailField.text = (ViewController *)self. presentingViewController).emailLabel.text; super viewDidLoad; ,在dismissEditor方法中将初始场景中标签的文本设置为编辑器场景中文本框的内容 -(IBAction) dismissEditor: (id)sender (ViewController *) self.presentingViewController). emailLabel.text = self.emailField.text; self dismissViewControllerAnimated:YES completion:nil; 生成应用程序,使用弹出框,1. 新建一个Single View Application项目，命名为PopoverEditor。选择iPad平台。 在项目中添加一个EditorViewController类，再添加一个新场景，并将其关联到EditorViewController类。设置视图控制器的标签，使得大纲显示的场景名为Initial Scene和Editor Scene。,2. 设计界面 在第一个场景Initial Scene中添加一个标签，其文本设置为Email Address:，添加第二个标签，其文本设置为你的邮件地址，添加一个按钮Edit。 在第二个场景Editor Scene中添加一个文本框。,3. 创建弹出切换 按住Control键，从初始视图的Edit按钮拖曳到编辑器视图，在弹出的故事板切换类型时，选择Popover。给该切换指定一个标识符toEditor，选择其Direction的值Up，即弹出框只出现在按钮的下方。 创建弹出切换后，Xcode自动解除对其视图大小的锁定，给编辑器场景设置宽度为320点，高度为100点，调整编辑器视图的内容，使其居中。,4. 创建并连接输出口 将包含电子邮件地址的标签连接到文件ViewController.h,并将输出口命名为emailLabel；将编辑器场景中的文本框连接到文件EditorViewController.h，并将输出口命名为emailField。,5.实现应用程序逻辑 让ViewController获取和设置弹出框的内容视图控制器Edit