iOS开发6-多视图应用

目标

重点介绍多视图应用的结构和切换内容视图的基本知识，并开发一个多视图应用。

内容

总体分析：

要创建三个视图：
1）根视图
2）Blue视图
3）Yellow视图
然后将这三个视图关联起来，创建转场。进一步优化，在转场时添加动画。

1.创建根视图器。

1.1改尺寸

将视图改为4.7-inch

1.2增加工具条

在控件库中找到Toolbar添加到视图中，并改名为“Switch Views”。

这样根视图就创建完成了。

2.创建Blue视图

创建Blue视图分两步：
1）设计Blue视图界面
2）创建Blue视图界面的控制器

2.1创建Blue视图

1）创建界面
在Main.storyboard中右键点击缩小界面到50%（方便播放入新的View Controller视图），在控件库找到View Controller视图控件，拖放到storyboard中，并改尺寸为4.7-inch。


2）添加按钮
在控件库中拖放入button按钮控件，并改名为“Press Me”.

3）更改背景
选中View ,并打开属性检查器面板，找到background（背景）将其颜色改为蓝色。

2.2创建BlueViewController

在项目导航栏中，选择项目文件夹，右键点击New File…

选择iOS中的Source>Cocoa Touch，点Next.

更改类名为BlueViewController.

确认好保存位置，就创建好了Blue视图的控制器：

3.创建Yellow视图

和创建Blue视图一样，创建Yellow视图部分也是两步：
1）设计Yellow视图界面
2）创建Yellow视图界面的控制器

2.1创建Yellow视图

2.2创建YellowViewController

4.视图与控制器相关联

选中Blue视图的View Controller ,点击身份检查器，添加Class:BlueViewController。可以看到视图控制器名称也相应改变，这时就将视图与控制器相关联起来了。

Yellow视图也是一样，选中Yellow视图的View Controller ,点击身份检查器，添加Class: YellowViewController。可以看到视图控制器名称也相应改变，这时就将视图与控制器相关联起来了。

最后的效果，注意视图场景的名称改变：

5.创建转场

5.1修改根视图控制器

ViewController.h文件：

////  ViewController.h//  6-Demo//#import <UIKit/UIKit.h>#import "BlueViewController.h"#import "YellowViewController.h"@interface ViewController : UIViewController@property (strong,nonatomic) BlueViewController     *blueViewController;@property (strong,nonatomic) YellowViewController   *yellowViewController;@end

ViewController.m文件：

////  ViewController.m//  6-Demo//#import "ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    //加载完后执行其它操作    self.blueViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"Blue"];    [self.view insertSubview:self.blueViewController.view atIndex:0];}- (void)didReceiveMemoryWarning{    [super didReceiveMemoryWarning];    //手动释放视图内存    if (!self.blueViewController.view.superview) {        self.blueViewController = nil;    }else{        self.yellowViewController = nil;    }}- (IBAction)switchView:(id)sender{    //如果该视图没有父视图，则释放它    if (!self.yellowViewController.view.superview) {        if (!self.yellowViewController) {            self.yellowViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"Yellow"];        }        [self.blueViewController.view removeFromSuperview];        [self.view insertSubview:self.yellowViewController.view                         atIndex:0];    }else{        if (!self.blueViewController) {            self.blueViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"Blue"];        }        [self.yellowViewController.view removeFromSuperview];        [self.view insertSubview:self.blueViewController.view atIndex:0];    }    [UIView commitAnimations];}@end

5.2为Toolbar上的按钮关联操作方法

关联后的结果可以在连接检查器中看到：

按command+R运行应用，可以看到：

这时我们发现转场相当生硬，换个高大点的说法，用户体验太差。
怎么办呢？
下面我们就增加转场动画，来解决这个用户体验太差的问题。

6.增加转场的动画效果

- (IBAction)switchView:(id)sender{    [UIView beginAnimations:@"View Flip" context:NULL];    [UIView setAnimationDuration:0.5];    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];    if (!self.yellowViewController.view.superview) {        if (!self.yellowViewController) {            self.yellowViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"Yellow"];        }        [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight                               forView:self.view                                 cache:YES];        [self.blueViewController.view removeFromSuperview];        [self.view insertSubview:self.yellowViewController.view                         atIndex:0];    }else{        if (!self.blueViewController) {            self.blueViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"Blue"];        }        [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft                               forView:self.view                                 cache:YES];        [self.yellowViewController.view removeFromSuperview];        [self.view insertSubview:self.blueViewController.view atIndex:0];    }    [UIView commitAnimations];}

解释：

    [UIView beginAnimations:@"View Flip" context:NULL];    [UIView setAnimationDuration:0.5];    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

beginAnimations:context:接受两个参数，第一个是动画块标题。第二个参数是一个（void*）指针，指向关联到这个动画块的对象。这里使用NULL，因为没有必要指定对象。
setAnimationDuration:这是设定动画的持续时间。
setAnimationCurve:这是设定动画曲线（animation curve）,这决定了动画运行的速度。速度为一条线性曲线，此处设置为（UIViewAnimationCurveEaseInOut）指定动画以：慢-快-慢 的播放速度来播放。

        [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight                               forView:self.view                                 cache:YES];

这里是指定动画转换类型。有4种视图转换类型：

UIViewAnimationTransitionFlipFromLeftUIViewAnimationTransitionFlipFromRightUIViewAnimationTransitionCurlUpUIViewAnimationTransitionCurlDown

根据显示的视图选择不同的效果，这里选择为左侧翻入，右侧翻入，给人感觉不断地向前翻和向后翻。

[UIView commitAnimations];

设置和指定好了动画后，最后要调用commitAnimations方法来提交动画。
运行应用，可以看到想要的效果。

7.为按钮添加警告弹窗

我们当初在页面上添加的按钮“Press Me”和”Press ME,too”还没有任何效果。现在我们为这两个按钮分别加上警告弹窗。
在BlueViewController.m文件中，添加如下代码，并与对应的按钮进行关联：

在YellowViewController.m文件中，添加如下代码，并与对应的按钮进行关联：

现在这个应用就写到这，有什么其它的玩法，可以自己尝试下。

小结

创建了多视图，学习了转场动画的添加。