文档章节

iOS开发8:使用Tool Bar切换视图

双子座
 双子座
发布于 2012/03/16 17:24
字数 1452
阅读 8741
收藏 25

之前讨论的都是单视图应用程序,而在实际应用中,我们可能要多个视图,并根据用户的需要切换视图。

iOS中几种典型的多视图程序:

(1)Tab Bar Application:程序的底部有一排按钮,轻触其中一个按钮,相应的视图被激活并显示出来;

(2)Navigation-Based Application:其特点是使用navigation controller,而navigation controller使用navigation bar来控制多级视图;

(3)Tool Bar Application:程序的底部有一个工具条,利用工具条中的按钮来切换视图,经常与Tab Bar Application混淆。

这次要做的例子就是使用了Tool Bar,只是简单了实现了视图切换功能,并添加一些视图切换时的效果。在做例子之前,首先要了解一下视图的切换原理。

一般来说,一个多视图的程序要至少三个View Controller,其中一个作为Root Controller。所谓Root Controller,是指用户看到的第一个Controller,并且在程序加载时这个Controller就加载了。

Root Controller通常是UINavigationController或者UITabBarController的子类,也可以是UIViewController的一个子类。

在多视图程序中,Root Controller的工作获得两个或者更多的其他视图,并根据用户输入显示不用的视图。

除Root Controller之外,其他视图就作为Content Controller,可以理解为可能会显示出来的各种视图。

为了更好地理解多视图程序的结构,我们从Empty Application开始创建我们的程序。

1、创建工程:

运行Xcode 4.2,新建一个Empty Application,名称为MultiView,其他设置如下图:

2、创建3个View Controller:

依次选择File — New — New File,打开如下窗口:

找到UIViewController subclass并单击Next,打开下面的窗口:

输入名称RootViewController,并且保证Subclass of选择UIViewController,下面的两个选框都不选;按照同样的步骤新建两个View Controller,名称分别是FirstViewController和SecondViewController。建好后,在Project Navigation中显示文件如下:

3、为三个View Controller创建.xib文件:

依次选择File — New — New File,打开如下窗口:

在左边选User Interface,右边选View,单击Next,在新窗口中的Device Family中选择iPhone,单击Next,打开如下窗口:

输入名称RootView,单击Create,创建了一个.xib文件。用同样的方法再创建两个.xib,名称分别是FirstView和SecondView。

4、修改App Delegate:

4.1 单击AppDelegate.h,在其中添加代码,在@interface之前添加@class RootViewController;在@end之前添加@property (strong, nonatomic) RootViewController *rootViewController;添加之后的代码如下:

#import <UIKit/UIKit.h>
@class RootViewController;
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) RootViewController *rootViewController;
@end

4.2 单击AppDelegate.m,修改其代码。在@implementation之前添加#import "RootViewController.h",在@implementation之后添加@synthesize rootViewController;然后修改didFinishLaunchingWithOptions方法如下:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.rootViewController = [[RootViewController alloc] initWithNibName:@"RootView" bundle:nil]; 
    UIView *rootView = self.rootViewController.view; 
    CGRect rootViewFrame = rootView.frame; 
    rootViewFrame.origin.y += [UIApplication sharedApplication].statusBarFrame.size.height; 
    rootView.frame = rootViewFrame; 
    [self.window addSubview:rootView]; 
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

① self.rootViewController = [[RootViewController alloc] initWithNibName:@"RootView" bundle:nil];

这行代码用于从RootView.xib文件中初始化rootViewController,注意initWithNibName:@"RootView"中不要后缀名.xib

② rootViewFrame.origin.y += [UIApplication sharedApplication].statusBarFrame.size.height;

使得RootViewController的视图不会被状态栏挡住

5、修改RootViewController.h:

单击RootViewController.h,在其中添加两个属性和一个方法,如下:

#import <UIKit/UIKit.h>
@class FirstViewController;
@class SecondViewController;

@interface RootViewController : UIViewController

@property (strong, nonatomic) FirstViewController *firstViewController;
@property (strong, nonatomic) SecondViewController *secondViewController;
- (IBAction)switchViews:(id)sender;

@end

6、打开RootView.xib,在坐边选择File’s Owner,在右边打开Identity Inspector,在Class下拉菜单选择RootViewController:

这样,我们就可以从RootView.xib文件向RootViewController创建Outlet和Action了。

7、为RootView.xib添加工具栏:打开RootView.xib,拖一个Tool Bar到视图上,双击Tool Bar上的按钮,修改其名称为Switch Views:

8、添加Action映射:

选中Switch Views按钮,按住Control,拖到File’s Owner,松开鼠标后选择switchViews方法:

9、选择File’s Owner,按住Control键,拖到View,松开鼠标,选择view:

10、修改RootViewController.m:

打开RootViewController.m文件,在@implementation之前添加代码:

#import "FirstViewController.h"
#import "SecondViewController.h"

在@implementation之后添加代码:

@synthesize firstViewController;
@synthesize secondViewController;

接下来修改viewDidLoad方法,这个方法默认是被注释掉的,先去掉其周围的注释符,然后修改其代码如下:

- (void)viewDidLoad
{
    self.firstViewController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil];
    [self.view insertSubview: firstViewController.view atIndex:0];
    [super viewDidLoad];
}

添加switchViews方法:

- (IBAction)switchViews:(id)sender {
    if (self.secondViewController.view.superview == nil) {
        if (self.secondViewController == nil) { 
            self.secondViewController = [[SecondViewController alloc] initWithNibName:@"SecondView" bundle:nil]; 
        } 
        [firstViewController.view removeFromSuperview]; 
        [self.view insertSubview:self.secondViewController.view atIndex:0]; 
    } else {
        if (self.firstViewController == nil) { 
            self.firstViewController = 
            [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil]; 
        } 
        [secondViewController.view removeFromSuperview]; 
        [self.view insertSubview:self.firstViewController.view atIndex:0]; 
    } 
}

修改didReceiveMemoryWarning方法:

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    if (self.firstViewController.view.superview == nil) { 
        self.firstViewController = nil; 
    } else { 
        self.secondViewController = nil; 
    } 
}

11、打开FirstView.xib文件,选择左边的File’s Owner,然后在Identity Inspector中选择Class为FirstViewController;然后按住Control键从File’s Owner图标拖到View,在弹出的菜单选择view。为SecondView.xib进行同样的操作,不过Class选择为SecondViewController。

12、打开FirstView.xib文件,选择View,打开Attribute Inspector,进行如下设置:

对SecondView.xib进行同样设置,不过背景颜色设成红色。

13、此时运行程序,你会看见刚启动的时候,程序显示的绿色背景,轻触Switch Views按钮后,背景变成了红色。不断轻触按钮,背景不断变换。

14、添加切换背景的动画效果:

打开RootViewController.m,修改其中的switchViews方法如下:

- (IBAction)switchViews:(id)sender { 
    [UIView beginAnimations:@"View Flip" context:nil]; 
    [UIView setAnimationDuration:1.25]; 
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    if (self.secondViewController.view.superview == nil) { 
        if (self.secondViewController == nil) { 
            self.secondViewController = [[SecondViewController alloc] initWithNibName:@"SecondView" bundle:nil]; 
        } 
        [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES]; 
        [self.firstViewController.view removeFromSuperview]; 
        [self.view insertSubview:self.secondViewController.view atIndex:0]; 
    } else { 
        if (self.firstViewController == nil) { 
            self.firstViewController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil]; 
        } 
        [UIView setAnimationTransition: UIViewAnimationTransitionCurlUp forView:self.view cache:YES]; 
        [self.secondViewController.view removeFromSuperview]; 
        [self.view insertSubview:self.firstViewController.view atIndex:0]; 
    } 
    [UIView commitAnimations]; 
}

注意四个表示切换效果的常量:

UIViewAnimationTransitionFlipFromLeft
UIViewAnimationTransitionFlipFromRight
UIViewAnimationTransitionCurlDown
UIViewAnimationTransitionCurlUp

分别表示从左翻转、从右翻转、向下卷、向上卷。
运行后翻页效果如下:

 

最终代码:http://www.oschina.net/code/snippet_164134_10918 

© 著作权归作者所有

双子座
粉丝 540
博文 78
码字总数 61009
作品 0
南京
程序员
私信 提问
加载中

评论(24)

_ming
_ming
在rootview上加几个button
点击switchview按钮切换的是背景 怎么破
换了view ,button还是显示的啊
我是谁VS梦
我是谁VS梦
tool bar以及switch views 按钮不显示,不太明白???
数据流
博主你好,我刚走进iphone/ipad开发这个方向,感觉你是一位不错的老师,想和你保持交流,你的QQ号码如果不方便告诉我的话,我留下我的QQ:644354636,请加我。
泥彩
泥彩
写的太好了
双子座
双子座 博主

引用来自“微笑の辛翼”的评论

大哥给讲一下 superview
这个东西要怎么用。我从代码上看不太懂为什么是 第二个视图的 superview ,而不直接就是view
我在代码上测试的时候,view 也可以实现,这个superview 的作用是什么呢。他的superview 应该是哪个?

view.superview就是得到view的上级视图,view.superview可以看成一个容器,它存放了view
微笑de辛翼
微笑de辛翼
大哥给讲一下 superview
这个东西要怎么用。我从代码上看不太懂为什么是 第二个视图的 superview ,而不直接就是view
我在代码上测试的时候,view 也可以实现,这个superview 的作用是什么呢。他的superview 应该是哪个?
双子座
双子座 博主

引用来自“zk0301”的评论

xib的拖线把我搞晕了,比如说8和9. 方向是从哪拖到哪。有没有个什么说法。
下一篇 冲啊

这个属于Xcode的基本操作,你去Google一下吧
z
zk0301
xib的拖线把我搞晕了,比如说8和9. 方向是从哪拖到哪。有没有个什么说法。
下一篇 冲啊
i
isondada
我用的是xcode4.4,然后找不到UIViewController subclass,怎么办呢
ok_lyc
ok_lyc
您好,我有一个问题。就是inserSubview这个函数调用之后,为什么下面的toolbar显示的还是他的superview上的toolbar呢?难道不是被添加的这个子view的toolbar吗?
iOS股票K线图、校园助手、适配iPhone X、版本检测等源码

iOS精选源码 快速创建menuItem控件 YHPhotoBrowser 优化的网络图片浏览 cocoaAsynSocket demo (包含客户端和服务端) SwipeMenuViewController现在支持iPhoneX和Swift4。 仿微信的提醒对话框 ...

sunnyaigd
2017/10/31
52
0
iOS学习之UINavigationController详解与使用(三)ToolBar

iOS学习之UINavigationController详解与使用(二)页面切换和segmentedController 接上篇,我们接着讲Navigation 的Toolbar。 1、显示Toolbar 在RootViewController.m的- (void)viewDidLoad方法...

知行合一100
2012/06/21
0
0
【书坊赠书福利——第二期】《iOS 8开发指南》

本周是人邮IT书坊赠书的第二期,第一期参与度极高,微信君在此感谢你们的支持,第一期获奖赠书已全部寄出。 本周赠品 本周,微信君给大家推荐@人民邮电出版社-信息技术分社 刚刚上架的新书《...

生气的散人
2014/09/23
382
0
UIView Animations 学习笔记(二)定制动画效果及切换效果

目录 UIView Animations 学习笔记(一)简介及API说明 UIView Animations 学习笔记(二)定制动画效果及切换效果 UIView Animation 学习笔记 应用示例 二、视图切换定制 2.1 基础说明 要创建...

灰大羊
2015/08/12
192
0
(转)直接拿来用!最火的iOS开源项目(二)

“每一次的改变总意味着新的开始。”这句话用在iOS上可谓是再合适不过的了。GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7,有的项目...

孙启超
2013/06/21
3.9K
1

没有更多内容

加载失败,请刷新页面

加载更多

SSH安全加强两步走

从 OpenSSH 6.2 开始已经支持 SSH 多因素认证,本文就来讲讲如何在 OpenSSH 下启用该特性。 OpenSSH 6.2 以后的版本多了一个配置项 AuthenticationMethods。该配置项可以让 OpenSSH 同时指定...

xiangyunyan
41分钟前
4
0
C或C++不是C/C++

http://www.voidcn.com/article/p-mucdruqa-ws.html

shzwork
今天
6
0
OSChina 周六乱弹 —— 如何将梳子卖给和尚

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @for_ :划水五分钟,专注两小时。分享Various Artists的单曲《贝多芬第8号钢琴奏鸣曲悲伤的第三乐章》: 《贝多芬第8号钢琴奏鸣曲悲伤的第三乐...

小小编辑
今天
305
8
ES5

什么是ES5:比普通js运行要求更加严格的模式 为什么:js语言本身有很多广受诟病的缺陷 如何:在当前作用域的顶部添加:"use strict" 要求: 1、禁止给未声明的变量赋值 2、静默失败升级为错误...

wytao1995
今天
7
0
c++ 内联函数调用快的原因

见图片分析

天王盖地虎626
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部