三十而立,从零开始学ios开发(十):Multiview Applications(多个xib之前的切换) - minglz - 博客园
2015-07-27 00:04
671 查看
这篇学习的主要内容是Multiview,在我们学习iphone旋转的时候,介绍过多个view的使用方法,不过这里的view和旋转屏幕中所指的多个view是不同的,旋转屏幕中涉及到的多个view是在一个xib文件中的,而我们这里所指的mulitview,则是指多个xib,在多个xib中进行view的切换,也就是从一个xib切换到另一个xib,而每个xib中只有一个view。
另外的一个不同点体现在创建项目的时候,到目前为止,我们创建的所有项目的template都是single view,这次创建的项目将使用新的template。
Multiview applicatin的基本架构,一般来说,一个multiview application会有一个主要的controller来控制view的呈现,这个主要的controller可以是toolbar(iphone上的Safari打开后,地下的一排按钮就是toolbar)或者是tab bar(iphone打开phone,最下面一个一个的tab),或者其他的一些控件,他们控制到底那个view应该显示,那个view应该被隐藏,也就是说,至少需要3个view才能实现view的切换,一个主要的controller
view,2个其他的用于切换的view,主要的controller view是一直显示在屏幕上的,而其他的view中,只有1个会显示出来,其他的都被隐藏。ok,下面开始一步一步实现multiview吧,再说下去会越来越糊涂的。
0)项目简介
今天要做的例子中包含3个view,一个controller view,我们会使用toolbar,2个用于切换的view,一个蓝色底,一个黄色底,他们中间都有一个button,单击button会有一个警告框弹出,告诉用户当前显示的是哪个view。
1)创建一个工程,选择Empty Application
![](http://note.youdao.com/yws/res/24572/2CD71C2B7A644312886028771CB201A6)
这次不再选择Single View Application,而选择Empty Application,项目中的所有文件我们都会手动进行添加。
单击Next按钮,之后的操作和创建Single View项目一样,设定项目名称“View Switcher”,设定项目保存路径,项目创建完成。
2)添加View Controller
由于我们使用的模板是Empty Application,因此当创建完项目后,只有以下一些文件
![](http://note.youdao.com/yws/res/24571/85AE188905F8453387CB9E4A88CB6EB6)
里面并没有我们需要的controller view,也没有任何xib文件,这些都是需要我们手动添加的。使用快捷键command+N或者菜单栏File<New<New File...,在弹出的窗口中,左边选择Cocoa Touch,右边选择UIViewController subclass,点击Next按钮
![](http://note.youdao.com/yws/res/24573/44DE602253A9441A9B24FEB361714AE2)
填写类名BIDSwitchViewController,其他都是默认选项(注意最后一个checkbox,如果选择了,则将创建一个和BIDSwitchViewController关联的xib文件,我们在这里可以选上,但是为了弄清楚view controller和xib文件是如何关联在一起的,在这个项目中我们暂时不选,后面我们会手动连接这两个文件),点击Next按钮。
![](http://note.youdao.com/yws/res/24574/EE701C029D50412B865D5545BE986AB4)
选择保持的位置,保存在“View Switcher”目录下,完成创建。
BIDSwitchViewController是项目的最顶层的view controller(root controller),它用于控制另外2个view的切换,下面按照同样的方法,创建另外2个view controller,一个名字教BIDBlueViewController,另一个叫做BIDYellowViewController,他们都不需要关联xib,且都保存在“View Switcher”目录下。创建完成后的“View Switcher”结构如下
![](http://note.youdao.com/yws/res/24575/FC23F507026840E08954874E5BCA7AE4)
3)添加xib文件
使用快捷键command+N或者菜单栏File<New<New File...,在弹出的窗口中,左边选择User Interface,右边选择View,点击Next按钮
![](http://note.youdao.com/yws/res/24576/E59BA3371B404683A3A723240E0E10E9)
Device Family中选择iphone,点击Next
命名为SwitchView.xib,同样保持在“View Switcher”目录下,点击Create,完成创建。
![](http://note.youdao.com/yws/res/24578/2E6C24937F6440B5B4DFFA8EBFBC3FB8)
使用同样的方法创建另外两个xib,分别命名为BlueView.xib和YellowView.xib。至此,我们所有的文件都已经创建完毕,整个的“View Switcher”结构图如下
![](http://note.youdao.com/yws/res/24577/7DC04BACC7524E6996D7D0D24A4F2093)
接下来就是写代码的工作了。
4)编辑BIDAppDelegate文件
当一个app启动的时候,我们都会默认的把一个view载入当前的iphone窗口(application's main window),在这个例子中,这个view就是我们的root view,即BIDSwitchViewController。我们是在BIDAppDelegate文件中设置默认载入的view的,因此首先打开BIDAppDelegate.h,添加class BIDSwitchViewController,和它的一个property,如下
![](http://note.youdao.com/yws/res/24579/63B65B13F17544D48A92CF43B677AAE6)
![](http://note.youdao.com/yws/res/24580/EEB1F861670940B18A64B31590B88F0D)
其中,@class是告诉BIDAppDelegate,后面的BIDSwitchViewController是一个类,应该以类的方式处理该对象,后面在声明property的时候,BIDAppDelegate就知道BIDSwitchViewController是一个类,不会不认该对象。
接着打开BIDAppDelegate.m,添加如下代码
![](http://note.youdao.com/yws/res/24581/BB6224DA480E401D9E636A0CD1C0BCE1)
![](http://note.youdao.com/yws/res/24582/F0C51469ADB641AABB6581E25F6EFF67)
首先import BIDSwitchViewController,然后声明synthesize,对应于头文件中的property。
didFinishLaunchingWithOption方法,当一个app载入完成后需要做一些什么事情,在这里,我们指定了哪个view被载入到windows中作为默认显示的view。
self.switchViewController = [[BIDSwitchViewControlleralloc] initWithNibName:@"SwitchView" bundle:nil];
通过xib(在旧的版本中,xib被称为nib,因此这里出现的是NibName)的名字来制定初始化哪个view
UIView *switchView = self.switchViewController.view;
获取view
CGRect switchViewFrame = switchView.frame;
得到view的frame,也就是这个view的显示位置,在前几篇的文章中提到过这个属性。
switchViewFrame.origin.y += [UIApplicationsharedApplication].statusBarFrame.size.height;
我觉得这句话比较重要,它将view的位置往下移动了20point(point在非retina屏幕中是20px,在retina屏幕中是40px),这样就不会挡住iphone顶部的状态栏了。
switchView.frame = switchViewFrame;
将修改过的frame从新赋值给switchView
[self.window addSubview:switchView];
将switchView设置成window的subview。怎么理解这句话呢,就是说,一个app只有一个窗口(window),这个window只能同时显示一个view,且这个view是基于这个window而存在的,是放在这个window里面的,因此称之为window的subview,子视图。
5)编辑BIDSwitchViewController.h
BIDSwitchViewController是root controller,用于控制其他2个view的切换,因此需要在其头文件中声明其他两个controller,然后需要定义一个Action,用来完成对2个view的切换,将BIDSwitchViewController.h修改成如下
![](http://note.youdao.com/yws/res/24583/BC65309100944BF49F8BECA2CEC5ACE1)
![](http://note.youdao.com/yws/res/24584/7081D09B0D904C34952837D0BB08F103)
代码还是很好理解的,和前面在BIDAppDelegate.h中添加BIDSwitchViewController是一样的。
6)关联BIDSwitchViewController和SwitchView.xib
在Project Navigator中选中SwitchView.xib,在xib的dock中选中File's Owner
![](http://note.youdao.com/yws/res/24587/DBA13DA82DDD4CAE9BE5AAB2FB56586F)
然后在Identity inspector中将Class改成BIDSwitchViewController
![](http://note.youdao.com/yws/res/24588/B4C53F554FA84F219C53E74CA80E1935)
这样就将SwitchView.xib关联到了BIDSwitchViewController,如果我们选择Connections inspector,会看到我们刚才在BIDSwitchViewController.h中定义的Action:switchViews出现在Received Actions,我们之后就可以将这个Action关联到SwitchView.xib的控件上。
7)在SwitchView.xib上添加Toolbar
在这个例子总,我们切换veiw的方式是点击Toolbar上的一个button,然后切换2个view,SwitchView.xib使我们的root view,因此我们需要在SwitchView.xib上添加一个toolbar,然后点击toolbar上的按钮,切换BlueView.xib和YellowView.xib。
选中SwitchView.xib,在object library中找到Toolbar
![](http://note.youdao.com/yws/res/24585/D9DBB8ECEA644CA4A48381BD2604D35B)
拖动到View上,放在最下方
![](http://note.youdao.com/yws/res/24586/EA27D0D4A93342A6B97DC3B2A4B9F049)
默认的,已经有一个button在Toolbar上了,双击button改变文字,将文字改成“Switch Views”
![](http://note.youdao.com/yws/res/24590/7065444A63524B0696EE00F2E7C9701E)
接着就是将“Switch Views”按钮关联到switchViews,选中“Switch Views”,control-dragged到File's Owner,在弹出的框中选中switchViews
![](http://note.youdao.com/yws/res/24591/C2D0DBCCB92147C2B23BD7A4660B1A22)
打开Connections inspector,我们可以看到关联后的情况
![](http://note.youdao.com/yws/res/24589/C27F1653BF254EE988716ACB2B21C2DC)
有一个不同的地方,Toolbar上的button不像一般的button,会有很多的方法让你进行关联,Toolbar上button的Sent Actions(其他的button叫做Send Events,有很多个方法)只有一个方法,而它的作用相当于一般button的touch up inside。
8)关联SwitchView.xib和BIDSwitchViewController's view outlet
BIDSwitchViewController继承自UIViewController,在UIViewController中有一个outlet view,另外当我们在做第6)步的时候,将SwitchView.xib的class改成了BIDSwitchViewController,所以我们要将这个view关联到SwitchView.xib,关联的方法是选中SwitchView.xib,然后选中File's Owner,control-drag到下面的View
![](http://note.youdao.com/yws/res/24596/124358AA62BE45569D2328E01AACDB6D)
释放鼠标后,在填出的框中选则view,这样就关联好了。
![](http://note.youdao.com/yws/res/24592/BEE11A55B0A04582B1C460CE0EE3E058)
关联好后,查看Connections inspector,也可以看到关联后的结果
![](http://note.youdao.com/yws/res/24595/D00958E6CAD047F995C0B95E901216B5)
9)编辑BIDSwitchViewController.m
添加如下代码
![](http://note.youdao.com/yws/res/24593/9075ACE773D04901AE5EFCD8F1D826AB)
![](http://note.youdao.com/yws/res/24594/329B4597CE97465E8C838C50F75BFB5E)
2个#import这个很好理解,因为BIDSwitchViewController是root controller,会控制另外2个controller,因此需要把另外2个controller引入进来,这样才可以对他们进行操作。
2个synthesize对着头文件中的2个property。
![](http://note.youdao.com/yws/res/24597/101A60210ACB4D7EA2E1CADA5BE987CF)
![](http://note.youdao.com/yws/res/24598/FA8CB8F6AEC54640B4DD744FD250DBE5)
首先去掉viewDidLoad的注释,然后添加以上的代码。从最后一句可以看出,viewDidLoad方法继承自UIViewController,在这里对其重载,这个方法发生在当view已经载入完成后,我们所要做的是当root view载入完成后,在载入root view的subview,在我们的这个例子中是BlueView。BlueView的载入方法和前面的一样,使用initWithNibName,然后作为subView插入到当前的view中(当前的view就是root view,也就是SwitchView)。
![](http://note.youdao.com/yws/res/24599/CA5EC877211E4E1DB6BD344AB1C7303C)
![](http://note.youdao.com/yws/res/24600/381953F865384A98BCB0559FD0479980)
实现switchViews Action,上面的代码还是很好理解的,首先判断当前哪个subview是没有superview的,因为这2个subview不会同时显示,当blueSubview显示时,YellowSubview就会从root view中移除,因此不会具有superview,当得知那个subview没有superview,就说明应该显示这个subview。知道该显示哪个subview后,再判断这个subview是否还存在(是否需要重新载入初始化),然后将另一个subview从superview中移除,再将subview显示出来。
![](http://note.youdao.com/yws/res/24601/33FD4AEACBEA4EC7BD4A58618D7C9988)
![](http://note.youdao.com/yws/res/24602/4D6C37BEA8654378833A975906AA9960)
当ios的内存不够用时,didReceiveMemoryWarning会被系统自动调用,来释放可利用的内存。在这里如果哪个subview没有显示,就释放该subview,腾出内存。
至此BIDSwitchViewController的所有代码都写好了,下面就应该处理BIDBlueVeiwController和BIDYellowViewController了。
(友情提示,时不时的编译一下你的project,尽早发现问题,容易修改,否则到后面自己都不知道错在哪里)
10)编辑BlueView.xib和YellowView.xib
分别在BlueView.xib和YellowView.xib上添加一个button,并命名为“Press me”。
![](http://note.youdao.com/yws/res/24605/3AA51AD99129450C84F7A1B1AE54B238)
修改BlueView.xib的class为BIDBlueViewController,修改YellowView.xib的class为BIDYellowController(修改方法:选中xib,点击File's Owner,在Identity inspector中更改class)
![](http://note.youdao.com/yws/res/24604/3DAAB3BB8A4442C4BEC9CB5764A023C9)
![](http://note.youdao.com/yws/res/24603/1601A0E83B8D4B5DA30E364BBD6D0886)
class改变了,就需要重新关联一下File's owner的view,方法和之前的一样,选中File‘s Owner,control-drag到下面的View上,在弹出的框中选择view,关联完毕,2个xib都需要进行这个操作。
在Attributes inspector中,将BlueView.xib的background颜色改成蓝色
![](http://note.youdao.com/yws/res/24612/1B16FA11E569434B84F9C73DB9CF98A1)
同样的方法将YellowView.xib的background颜色改成黄色
![](http://note.youdao.com/yws/res/24606/17CFAFE2E20A4797A82357C68FE83319)
还有一个地方需要设置,因为我们是在root view中显示这2个subview,而root view有一个toolbar在最下方,因此subview需要把toolbar的位置空出来,再进行自己的布局,还是打开Attributes inspector,在Simulated Metrics栏中有很多现象,他们都是用来模拟iphone屏幕上各种占位控件的,我们将Button Bar的选项设成Toolbar,这样xib就会空出Toolbar的位置来进行布局计算了
![](http://note.youdao.com/yws/res/24611/395EB2E7D2C7470786016E6A4A7B62E0)
仔细看的话,“Press me”按钮的位置往上移动了那么一点点
11)在BIDBlueViewController和BIDYellowViewController中添加代码
在BIDBlueViewController.h中添加Action,如下
在BIDBlueViewController.m中实现blueButtonPressed,如下
![](http://note.youdao.com/yws/res/24607/0B59A4F5A4154FAFAD0F0EABE0A8D494)
![](http://note.youdao.com/yws/res/24608/7966EC18B69D464A890A7C2FCBF0C3F5)
在BIDYellowViewController.h添加Action,如下
在BIDYellowViewController.m中实现yellowButtonPressed,如下
![](http://note.youdao.com/yws/res/24609/642D18F701F94F4087DF324A027F43A0)
![](http://note.youdao.com/yws/res/24610/E66A036C237F491ABA75446C810F4B3E)
代码都很简单,就不多做解释了。
12)关联button和Action
打开BlueView.xib,选中“Press me”按钮,control-drag到File's owner释放,在填出的框中选择blueButtonPressed。
打开YellowView.xib,选中“Press me”按钮,control-drag到File's owner释放,在填出的框中选择yellowButtonPressed。
13)编译运行
至此我们已经可以编译运行程序了,编译成功后,iphone模拟器中显示的效果(“Press me”按钮的效果就不演示了)
![](http://note.youdao.com/yws/res/24613/EA859D88443247A28F6EE09B2F4A6188)
按下“Switch Views”按钮,BlueSubview会切换到YellowSubview
![](http://note.youdao.com/yws/res/24614/8D7FC55391B24CFABEE23F653F34CE22)
14)更炫的切换view的方法
有没有发现上面切换view效果很无聊,ios中有更炫的切换view的方法,使用动画的方式切换view,打开BIDSwitchViewController.m,重新编辑switchViews方法,如下
![](http://note.youdao.com/yws/res/24615/3CAA470B9DD94D328E5EE81132520CC4)
![](http://note.youdao.com/yws/res/24616/91C0A02989C2471BAA6914D2EB8DF7AC)
[UIViewbeginAnimations:@"View Flip" context:nil];
先可以不用理解这句话的意思,因为我也没有理解,反正这行代码是声明一个animation block,前一个参数是设置animation block的title,后一个参数是设置一个对象,我也搞不清楚是干什么的,大概在以后的学习中会有所了解。
[UIViewsetAnimationDuration:1.25];
设定动画时间,即切换view的时间
[UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut];
设定动画的运动方式,开始慢,中间快,最后慢,大家开始看ios自己的说明吧。(An ease-in ease-out curve causes the animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing. This is the default curve for most animations.)
[UIViewsetAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];
设定切换的样式,一共有4个值可以选:
UIViewAnimationTransitionFlipFromRight
UIViewAnimationTransitionFlipFromLeft
UIViewAnimationTransitionFlipCurUp
UIViewAnimationTransitionFlipCurDown
这个大家自试试就可以知道了
[UIViewcommitAnimations];
当所有动画的值设置完毕后,提交动画,之后view就会按照设定的动画进行view的切换了。
![](http://note.youdao.com/yws/res/24617/8AAD993C25BF4426A0A95AD040D0815C)
(此图截于书本,因此不同清晰)
15)总结
ok,所有的功能都已经完成了,在这个例子中,我们使用toolbar来完成对不同view的切换,我们需要一个root view进行总的控制,然后多个subview进行切换,最后还使用一个比较炫的效果进行view之间的转换,内容很充实!
View Switcher
另外的一个不同点体现在创建项目的时候,到目前为止,我们创建的所有项目的template都是single view,这次创建的项目将使用新的template。
Multiview applicatin的基本架构,一般来说,一个multiview application会有一个主要的controller来控制view的呈现,这个主要的controller可以是toolbar(iphone上的Safari打开后,地下的一排按钮就是toolbar)或者是tab bar(iphone打开phone,最下面一个一个的tab),或者其他的一些控件,他们控制到底那个view应该显示,那个view应该被隐藏,也就是说,至少需要3个view才能实现view的切换,一个主要的controller
view,2个其他的用于切换的view,主要的controller view是一直显示在屏幕上的,而其他的view中,只有1个会显示出来,其他的都被隐藏。ok,下面开始一步一步实现multiview吧,再说下去会越来越糊涂的。
0)项目简介
今天要做的例子中包含3个view,一个controller view,我们会使用toolbar,2个用于切换的view,一个蓝色底,一个黄色底,他们中间都有一个button,单击button会有一个警告框弹出,告诉用户当前显示的是哪个view。
1)创建一个工程,选择Empty Application
这次不再选择Single View Application,而选择Empty Application,项目中的所有文件我们都会手动进行添加。
单击Next按钮,之后的操作和创建Single View项目一样,设定项目名称“View Switcher”,设定项目保存路径,项目创建完成。
2)添加View Controller
由于我们使用的模板是Empty Application,因此当创建完项目后,只有以下一些文件
里面并没有我们需要的controller view,也没有任何xib文件,这些都是需要我们手动添加的。使用快捷键command+N或者菜单栏File<New<New File...,在弹出的窗口中,左边选择Cocoa Touch,右边选择UIViewController subclass,点击Next按钮
填写类名BIDSwitchViewController,其他都是默认选项(注意最后一个checkbox,如果选择了,则将创建一个和BIDSwitchViewController关联的xib文件,我们在这里可以选上,但是为了弄清楚view controller和xib文件是如何关联在一起的,在这个项目中我们暂时不选,后面我们会手动连接这两个文件),点击Next按钮。
选择保持的位置,保存在“View Switcher”目录下,完成创建。
BIDSwitchViewController是项目的最顶层的view controller(root controller),它用于控制另外2个view的切换,下面按照同样的方法,创建另外2个view controller,一个名字教BIDBlueViewController,另一个叫做BIDYellowViewController,他们都不需要关联xib,且都保存在“View Switcher”目录下。创建完成后的“View Switcher”结构如下
3)添加xib文件
使用快捷键command+N或者菜单栏File<New<New File...,在弹出的窗口中,左边选择User Interface,右边选择View,点击Next按钮
Device Family中选择iphone,点击Next
命名为SwitchView.xib,同样保持在“View Switcher”目录下,点击Create,完成创建。
使用同样的方法创建另外两个xib,分别命名为BlueView.xib和YellowView.xib。至此,我们所有的文件都已经创建完毕,整个的“View Switcher”结构图如下
接下来就是写代码的工作了。
4)编辑BIDAppDelegate文件
当一个app启动的时候,我们都会默认的把一个view载入当前的iphone窗口(application's main window),在这个例子中,这个view就是我们的root view,即BIDSwitchViewController。我们是在BIDAppDelegate文件中设置默认载入的view的,因此首先打开BIDAppDelegate.h,添加class BIDSwitchViewController,和它的一个property,如下
#import @class BIDSwitchViewController;@interface BIDAppDelegate : UIResponder @property (strong, nonatomic) UIWindow *window;@property (strong, nonatomic) BIDSwitchViewController *switchViewController;@end
其中,@class是告诉BIDAppDelegate,后面的BIDSwitchViewController是一个类,应该以类的方式处理该对象,后面在声明property的时候,BIDAppDelegate就知道BIDSwitchViewController是一个类,不会不认该对象。
接着打开BIDAppDelegate.m,添加如下代码
#import "BIDAppDelegate.h"#import "BIDSwitchViewController.h"@implementation BIDAppDelegate@synthesize window = _window;@synthesize switchViewController;- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; // Override point for customization after application launch. self.switchViewController = [[BIDSwitchViewController alloc] initWithNibName:@"SwitchView" bundle:nil]; UIView *switchView = self.switchViewController.view; CGRect switchViewFrame = switchView.frame; switchViewFrame.origin.y += [UIApplication sharedApplication].statusBarFrame.size.height; switchView.frame = switchViewFrame; [self.window addSubview:switchView]; self.window.backgroundColor = [UIColor whiteColor]; [self.window makeKeyAndVisible]; return YES;}......
首先import BIDSwitchViewController,然后声明synthesize,对应于头文件中的property。
didFinishLaunchingWithOption方法,当一个app载入完成后需要做一些什么事情,在这里,我们指定了哪个view被载入到windows中作为默认显示的view。
self.switchViewController = [[BIDSwitchViewControlleralloc] initWithNibName:@"SwitchView" bundle:nil];
通过xib(在旧的版本中,xib被称为nib,因此这里出现的是NibName)的名字来制定初始化哪个view
UIView *switchView = self.switchViewController.view;
获取view
CGRect switchViewFrame = switchView.frame;
得到view的frame,也就是这个view的显示位置,在前几篇的文章中提到过这个属性。
switchViewFrame.origin.y += [UIApplicationsharedApplication].statusBarFrame.size.height;
我觉得这句话比较重要,它将view的位置往下移动了20point(point在非retina屏幕中是20px,在retina屏幕中是40px),这样就不会挡住iphone顶部的状态栏了。
switchView.frame = switchViewFrame;
将修改过的frame从新赋值给switchView
[self.window addSubview:switchView];
将switchView设置成window的subview。怎么理解这句话呢,就是说,一个app只有一个窗口(window),这个window只能同时显示一个view,且这个view是基于这个window而存在的,是放在这个window里面的,因此称之为window的subview,子视图。
5)编辑BIDSwitchViewController.h
BIDSwitchViewController是root controller,用于控制其他2个view的切换,因此需要在其头文件中声明其他两个controller,然后需要定义一个Action,用来完成对2个view的切换,将BIDSwitchViewController.h修改成如下
#import @class BIDBlueViewController;@class BIDYellowViewController;@interface BIDSwitchViewController : UIViewController@property (strong, nonatomic) BIDBlueViewController *blueViewController;@property (strong, nonatomic) BIDYellowViewController *yellowViewController;- (IBAction)switchViews:(id)sender;@end
代码还是很好理解的,和前面在BIDAppDelegate.h中添加BIDSwitchViewController是一样的。
6)关联BIDSwitchViewController和SwitchView.xib
在Project Navigator中选中SwitchView.xib,在xib的dock中选中File's Owner
然后在Identity inspector中将Class改成BIDSwitchViewController
这样就将SwitchView.xib关联到了BIDSwitchViewController,如果我们选择Connections inspector,会看到我们刚才在BIDSwitchViewController.h中定义的Action:switchViews出现在Received Actions,我们之后就可以将这个Action关联到SwitchView.xib的控件上。
7)在SwitchView.xib上添加Toolbar
在这个例子总,我们切换veiw的方式是点击Toolbar上的一个button,然后切换2个view,SwitchView.xib使我们的root view,因此我们需要在SwitchView.xib上添加一个toolbar,然后点击toolbar上的按钮,切换BlueView.xib和YellowView.xib。
选中SwitchView.xib,在object library中找到Toolbar
拖动到View上,放在最下方
默认的,已经有一个button在Toolbar上了,双击button改变文字,将文字改成“Switch Views”
接着就是将“Switch Views”按钮关联到switchViews,选中“Switch Views”,control-dragged到File's Owner,在弹出的框中选中switchViews
打开Connections inspector,我们可以看到关联后的情况
有一个不同的地方,Toolbar上的button不像一般的button,会有很多的方法让你进行关联,Toolbar上button的Sent Actions(其他的button叫做Send Events,有很多个方法)只有一个方法,而它的作用相当于一般button的touch up inside。
8)关联SwitchView.xib和BIDSwitchViewController's view outlet
BIDSwitchViewController继承自UIViewController,在UIViewController中有一个outlet view,另外当我们在做第6)步的时候,将SwitchView.xib的class改成了BIDSwitchViewController,所以我们要将这个view关联到SwitchView.xib,关联的方法是选中SwitchView.xib,然后选中File's Owner,control-drag到下面的View
释放鼠标后,在填出的框中选则view,这样就关联好了。
关联好后,查看Connections inspector,也可以看到关联后的结果
9)编辑BIDSwitchViewController.m
添加如下代码
#import "BIDSwitchViewController.h"#import "BIDYellowViewController.h"#import "BIDBlueViewController.h"@implementation BIDSwitchViewController@synthesize yellowViewController;@synthesize blueViewController;
2个#import这个很好理解,因为BIDSwitchViewController是root controller,会控制另外2个controller,因此需要把另外2个controller引入进来,这样才可以对他们进行操作。
2个synthesize对着头文件中的2个property。
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.- (void)viewDidLoad{ self.blueViewController = [[BIDBlueViewController alloc] initWithNibName:@"BlueView" bundle:nil]; [self.view insertSubview:self.blueViewController.view atIndex:0]; [super viewDidLoad];}
首先去掉viewDidLoad的注释,然后添加以上的代码。从最后一句可以看出,viewDidLoad方法继承自UIViewController,在这里对其重载,这个方法发生在当view已经载入完成后,我们所要做的是当root view载入完成后,在载入root view的subview,在我们的这个例子中是BlueView。BlueView的载入方法和前面的一样,使用initWithNibName,然后作为subView插入到当前的view中(当前的view就是root view,也就是SwitchView)。
- (IBAction)switchViews:(id)sender{ if(self.yellowViewController.view.superview == nil) { if(self.yellowViewController == nil) { self.yellowViewController = [[BIDYellowViewController alloc] initWithNibName:@"YellowView" bundle:nil]; } [blueViewController.view removeFromSuperview]; [self.view insertSubview:self.yellowViewController.view atIndex:0]; } else { if (self.blueViewController ==nil) { self.blueViewController = [[BIDBlueViewController alloc] initWithNibName:@"BlueView" bundle:nil]; } [yellowViewController.view removeFromSuperview]; [self.view insertSubview:self.blueViewController.view atIndex:0]; }}
实现switchViews Action,上面的代码还是很好理解的,首先判断当前哪个subview是没有superview的,因为这2个subview不会同时显示,当blueSubview显示时,YellowSubview就会从root view中移除,因此不会具有superview,当得知那个subview没有superview,就说明应该显示这个subview。知道该显示哪个subview后,再判断这个subview是否还存在(是否需要重新载入初始化),然后将另一个subview从superview中移除,再将subview显示出来。
- (void)didReceiveMemoryWarning{ // Releases the view if it doesn't have a superview. [super didReceiveMemoryWarning]; // Release any cached data, images, etc that aren't in use. if (self.blueViewController.view.superview == nil){ self.blueViewController = nil; } else { self.yellowViewController = nil; }}
当ios的内存不够用时,didReceiveMemoryWarning会被系统自动调用,来释放可利用的内存。在这里如果哪个subview没有显示,就释放该subview,腾出内存。
至此BIDSwitchViewController的所有代码都写好了,下面就应该处理BIDBlueVeiwController和BIDYellowViewController了。
(友情提示,时不时的编译一下你的project,尽早发现问题,容易修改,否则到后面自己都不知道错在哪里)
10)编辑BlueView.xib和YellowView.xib
分别在BlueView.xib和YellowView.xib上添加一个button,并命名为“Press me”。
修改BlueView.xib的class为BIDBlueViewController,修改YellowView.xib的class为BIDYellowController(修改方法:选中xib,点击File's Owner,在Identity inspector中更改class)
class改变了,就需要重新关联一下File's owner的view,方法和之前的一样,选中File‘s Owner,control-drag到下面的View上,在弹出的框中选择view,关联完毕,2个xib都需要进行这个操作。
在Attributes inspector中,将BlueView.xib的background颜色改成蓝色
同样的方法将YellowView.xib的background颜色改成黄色
还有一个地方需要设置,因为我们是在root view中显示这2个subview,而root view有一个toolbar在最下方,因此subview需要把toolbar的位置空出来,再进行自己的布局,还是打开Attributes inspector,在Simulated Metrics栏中有很多现象,他们都是用来模拟iphone屏幕上各种占位控件的,我们将Button Bar的选项设成Toolbar,这样xib就会空出Toolbar的位置来进行布局计算了
仔细看的话,“Press me”按钮的位置往上移动了那么一点点
11)在BIDBlueViewController和BIDYellowViewController中添加代码
在BIDBlueViewController.h中添加Action,如下
@interface BIDBlueViewController : UIViewController- (IBAction)blueButtonPressed;@end
在BIDBlueViewController.m中实现blueButtonPressed,如下
- (IBAction)blueButtonPressed{ UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Blue View Button Pressed" message:@"You pressed the button on the blue view" delegate:nil cancelButtonTitle:@"Yep, I did" otherButtonTitles:nil]; [alert show];}
在BIDYellowViewController.h添加Action,如下
@interface BIDYellowViewController : UIViewController- (IBAction)yellowButtonPressed;@end
在BIDYellowViewController.m中实现yellowButtonPressed,如下
- (IBAction)yellowButtonPressed{ UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Yellow View Button Pressed" message:@"You pressed the button on the yellow view" delegate:nil cancelButtonTitle:@"Yep, I did" otherButtonTitles:nil]; [alert show];}
代码都很简单,就不多做解释了。
12)关联button和Action
打开BlueView.xib,选中“Press me”按钮,control-drag到File's owner释放,在填出的框中选择blueButtonPressed。
打开YellowView.xib,选中“Press me”按钮,control-drag到File's owner释放,在填出的框中选择yellowButtonPressed。
13)编译运行
至此我们已经可以编译运行程序了,编译成功后,iphone模拟器中显示的效果(“Press me”按钮的效果就不演示了)
按下“Switch Views”按钮,BlueSubview会切换到YellowSubview
14)更炫的切换view的方法
有没有发现上面切换view效果很无聊,ios中有更炫的切换view的方法,使用动画的方式切换view,打开BIDSwitchViewController.m,重新编辑switchViews方法,如下
- (IBAction)switchViews:(id)sender{ [UIView beginAnimations:@"View Flip" context:nil]; [UIView setAnimationDuration:1.25]; [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; if(self.yellowViewController.view.superview == nil) { if(self.yellowViewController == nil) { self.yellowViewController = [[BIDYellowViewController alloc] initWithNibName:@"YellowView" bundle:nil]; } [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES]; [blueViewController.view removeFromSuperview]; [self.view insertSubview:self.yellowViewController.view atIndex:0]; } else { if (self.blueViewController ==nil) { self.blueViewController = [[BIDBlueViewController alloc] initWithNibName:@"BlueView" bundle:nil]; } [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.view cache:YES]; [yellowViewController.view removeFromSuperview]; [self.view insertSubview:self.blueViewController.view atIndex:0]; } [UIView commitAnimations];}
[UIViewbeginAnimations:@"View Flip" context:nil];
先可以不用理解这句话的意思,因为我也没有理解,反正这行代码是声明一个animation block,前一个参数是设置animation block的title,后一个参数是设置一个对象,我也搞不清楚是干什么的,大概在以后的学习中会有所了解。
[UIViewsetAnimationDuration:1.25];
设定动画时间,即切换view的时间
[UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut];
设定动画的运动方式,开始慢,中间快,最后慢,大家开始看ios自己的说明吧。(An ease-in ease-out curve causes the animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing. This is the default curve for most animations.)
[UIViewsetAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];
设定切换的样式,一共有4个值可以选:
UIViewAnimationTransitionFlipFromRight
UIViewAnimationTransitionFlipFromLeft
UIViewAnimationTransitionFlipCurUp
UIViewAnimationTransitionFlipCurDown
这个大家自试试就可以知道了
[UIViewcommitAnimations];
当所有动画的值设置完毕后,提交动画,之后view就会按照设定的动画进行view的切换了。
(此图截于书本,因此不同清晰)
15)总结
ok,所有的功能都已经完成了,在这个例子中,我们使用toolbar来完成对不同view的切换,我们需要一个root view进行总的控制,然后多个subview进行切换,最后还使用一个比较炫的效果进行view之间的转换,内容很充实!
View Switcher
相关文章推荐
- 三十而立,从零开始学ios开发(八):Autorotation and Autosizing - min
- 9秒学院:微信开发规范
- GLib-GObject-WARNING **: Two different plugins tried to register
- 三十而立,从零开始学ios开发(三):第一个有交互的app - minglz
- 十而立,从零开始学ios开发(七):Delegate,Action Sheet, Alert -
- 三十而立,从零开始学ios开发(四):IOS控件(1),Image View、Text Fie
- 三十而立,从零开始学ios开发(五):IOS控件(2),Slider - minglz -
- 三十而立,从零开始学ios开发(六):IOS控件(3),Segmented Control、
- 三十而立,从零开始学ios开发(二):Hello World! - minglz - 博客园
- iOS9应用隐私控制-外部调用
- Android 更改键盘Enter键文字
- 9秒学院Cocos2d-x基础分析学习
- Android 5.0+(RecycleView、CardView、Palette)
- ShareSDK [iOS常见问题] 关于使用QQ做第三方登录的问题!
- Objective-c和Java下DES加密解密保持一致
- iPhone开发:Objective-c中@property声明时的参数释疑
- iOS Sprite Kit教程之真机测试以及场景的添加与展示
- iOS Sprite Kit教程之场景的设置
- Android之SurfaceView
- Android之SurfaceView