UI -- 多视图应用程序总结

最新推荐文章于 2022-06-04 09:29:32 发布

毛利叔叔的叔叔

最新推荐文章于 2022-06-04 09:29:32 发布

阅读量637

点赞数

分类专栏： UI

UI 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

IOS之多视图应用程序

4.1 多视图应用程序介绍

4.2 UIViewController多视图程序

4.3 标签栏控制器

4.4 导航视图控制器应用

4.5 iOS应用程序风格类型

4.1 多视图应用程序介绍

iOS的很多应用程序都是采用多视图设计。控制器类型4种多视图程序：

" 自定义视图控制器

" 标签栏控制器

" 导航控制器

" 表视图控制器

视图和控制器类图

定义视图控制器

直接继承了UIViewController类视图控制器，或者由UIViewController作为根控制器。

标签栏控制器

由UITabBarController类作为根视图控制器。

导航视图控制器

由UINavigationController类作为根视图控制器。

表视图控制器

由UITableViewController类为根视图控制器。

模态（Modal）视图控制器

模态视图控制器非根控制器方式，可以是上面提供的几种控制器，它能够帮助展示用户信息。

4.2 UIViewController多视图程序

在iOS中我们是通过一个根视图控制器来，控制其他的视图控制器，其它的视图控制器在加载视图并显示。这里的根视图控制器是采用UIViewController类型。

1 编写根视图控制器

创建一个基于视图的应用程序（MutilViewSwitch），将自动产生的视图控制器作为，我们的根视图控制器。

IB工具设计根视图，为根视图添加工具栏和按钮。

2 IB设计根视图

3 增加BlueViewController

通过IB设计子视图，设置蓝色背景，并添加一个按钮。

BlueViewController.h

@interface BlueViewController : UIViewController {
}
-(IBAction)onClickButton:(id)sender;
@end

BlueViewController.m

@implementation BlueViewController

-(IBAction)onClickButton:(id)sender {
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"系统消息" 
                                        message:@"蓝色视图" 
                                        delegate:self 
                                        cancelButtonTitle:@"Ok" 
                                        otherButtonTitles:nil];    
    [alert show];
    [alert release];
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

- (void)viewDidUnload {
    [super viewDidUnload];
}

- (void)dealloc {
    [super dealloc];
}

@end

4 增加YellowViewController

@interface YellowViewController : UIViewController {

}

-(IBAction)onClickButton:(id)sender;

@end

YellowViewController.m

-(IBAction)onClickButton:(id)sender {
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"系统消息" 
                                                    message:@"黄色视图" 
                                                   delegate:self 
                                          cancelButtonTitle:@"Ok" 
                                          otherButtonTitles:nil];    
    [alert show];
    [alert release];
}

5 根视图

根视图控制h文件

#import "BlueViewController.h"
#import "YellowViewController.h"

@interface MutilViewSwitchViewController : UIViewController {
    YellowViewController *yellowViewController;
    BlueViewController *blueViewController;
}
@property (nonatomic, retain) YellowViewController *yellowViewController;
@property (nonatomic, retain) BlueViewController *blueViewController;

-(IBAction) switchViews:(id)sender;

@end

定义两个子视图控制器输出口，并定义一个是动作switchViews:用于切换视图时候调用。

根视图控制m文件

@implementation MutilViewSwitchViewController

@synthesize yellowViewController;
@synthesize blueViewController;

- (void)viewDidLoad {
    BlueViewController *blueController = [[BlueViewController alloc] 
                                          initWithNibName:@"BlueViewController" bundle:nil];
    self.blueViewController = blueController;
    [self.view insertSubview:blueController.view atIndex:0];
    [blueController release];
    [super viewDidLoad];
}

- (void)dealloc {
    [yellowViewController release];
    [blueViewController release];
    [super dealloc];
}

[[BlueViewController alloc] initWithNibName:@"BlueViewController" bundle:nil];

该方法可以通过nib文件创建一个视图控制器。

[self.view insertSubview:blueController.view atIndex:0];

该语句是将蓝色视图插入当前根视图中，0是在将视图放在所有视图之后。

-(IBAction) switchViews:(id)sender {
    
    if (self.yellowViewController.view.superview == nil) {
        if (self.yellowViewController.view == nil) {
            YellowViewController *yellowController = [[YellowViewController alloc] 
                                                  initWithNibName:@"YellowViewController" bundle:nil];
            self.yellowViewController = yellowController;
            [yellowController release];
        }
        [blueViewController.view removeFromSuperview];
        [self.view insertSubview:yellowViewController.view atIndex:0];
    } else {
        if (self.blueViewController.view == nil) {
            BlueViewController *blueController = [[BlueViewController alloc] 
                                                      initWithNibName:@"BlueViewController" bundle:nil];
            self.blueViewController = blueController;
            [blueController release];
        }
        [yellowViewController.view removeFromSuperview];
        [self.view insertSubview:blueViewController.view atIndex:0];
    }
    
}

self.yellowViewController.view.superview == nil

该语句为ture的情况有两种，一个是yellowViewController没有实例化。

二是yellowViewController已经创建，但是 yellowViewController的视图没有添加到根视图中。

接下来通过self.yellowViewController.view == nil判断 yellowViewController是否实例化，如果没有实例化可以通过initWithNibName:方法创建。

然后通过[blueViewController.view removeFromSuperview]从根视图中移除原来有 blueViewController的视图。再通过 [self.view insertSubview:yellowViewController.view atIndex:0]方法将yellowViewController的视图添加到根视图上。

4.3 标签栏控制器

UITabBarController是TabBar（标签栏）控件的视图控制器，可以作为根控制器。

1 标签栏控制器原理

2 创建一个TabBarApplication

3 添加视图控制器

增加两个文件：BlueViewController和YellowViewController

BlueViewCotroller.h和BlueViewCotroller.m

@interface BlueViewCotroller : UIViewController {

}
-(IBAction)onClickButton:(id)sender;

@end

-(IBAction)onClickButton:(id)sender {
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"系统消息" 
                                                    message:@"蓝色视图" 
                                                   delegate:self 
                                          cancelButtonTitle:@"Ok" 
                                          otherButtonTitles:nil];    
    [alert show];
    [alert release];
}

YellowViewController.h和YellowViewController.m

//-h
@interface YellowVieController : UIViewController {

}
-(IBAction)onClickButton:(id)sender;
@end

//-m
-(IBAction)onClickButton:(id)sender {
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"系统消息" 
                                                    message:@"黄色视图" 
                                                   delegate:self 
                                          cancelButtonTitle:@"Ok" 
                                          otherButtonTitles:nil];    
    [alert show];
    [alert release];
}

4 设计MainWindow.xib

5 设计YellowViewController.xib

6 设计BlueViewController.xib

TabBar控制器在iOS中应用很多，TabBar控制器将其它的子视图控制器，放入到一个NSArray中，根据用户所在不同的TabBarItem找到对应的子视图控制器，由该视图控制器再加载对应的视图。

4.4 导航视图控制器应用

导航栏控制器是UINavigationController作为根控制器

1 导航控制器原理

导航控制器堆栈

2 创建一个Navigation－Based Application

工程创建完成后，已经具有了一个根视图控制器RootViewController它是UITableViewController控制器，一般情况下我们nav控制器应用程序都会与UITableViewController搭配，而RootViewController可以理解为“一级”（根视图）视图控制器，它包含了很多“二级”视图控制器，“二级”视图控制器一般也是UITableViewController类型，它又包含了多个“三级”视图控制器，而“三级”视图控制器是树的末梢，则一般是UIViewController。当然，如果应用只有二级的则第“二级”就是UIViewController。

3 编写一级视图控制器

删除RootViewController.h, RootViewController.m,RootViewController.xib文件（注：这里删除上面的三个文件重新建文件可

以；如果不删除这三个文件在它们的基础上改写代码也可以。）

创建一个具有nib的ViewController—RedViewController，然后，重复创建二个YellowViewController BlueViewController。

IB设计一级视图

4 添加UINavigationItem按钮

5 RedViewController.h

#import <UIKit/UIKit.h>
#import "YellowViewController.h"

@interface RedViewController : UIViewController {
    YellowViewController * second;
}
                                                 
@property (nonatomic, retain) YellowViewController * second;
- (IBAction) moveToNextView: (id) sender;
                                                 
@end

RedViewController.m

@implementation RedViewController

@synthesize second;

- (IBAction) moveToNextView: (id) sender {
    YellowViewController *yViewController  = [[YellowViewController alloc] 
                                              initWithNibName:@"YellowViewController" bundle:nil];
    self.second = yViewController;
    [yViewController release];
    [self.navigationController pushViewController:self.second animated: YES];
}

IB中连接动作

!在IB中把导航按钮连接到动作moveToNextView：

6 二级视图

二级视图和三级视图不能够通过IB增加导航按钮，我们要通过程序增加导航按钮

#import "YellowViewController.h"


@implementation YellowViewController

@synthesize three;

- (IBAction) moveToNextView: (id) sender {
    BlueViewController *bViewController  = [[BlueViewController alloc] 
                                              initWithNibName:@"BlueViewController" bundle:nil];
    self.three = bViewController;
    [bViewController release];
    [self.navigationController pushViewController:self.three animated: YES];

}
- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.navigationItem.title = @"二级视图";
    UIBarButtonItem *nextButton = [[UIBarButtonItem alloc] initWithTitle:@"下一步"
                                                                   style:UIBarButtonItemStyleBordered
                                                                  target:self
                                                                  action:@selector(moveToNextView:)];
    self.navigationItem.rightBarButtonItem = nextButton;
}
- (void)viewDidUnload {
    [super viewDidUnload];
    self.three = nil;
}


- (void)dealloc {
    [three release];
    [super dealloc];
}


@end

YellowViewController.h

#import <UIKit/UIKit.h>
#import "BlueViewController.h"

@interface YellowViewController : UIViewController {
    BlueViewController * three;
}

@property (nonatomic, retain) BlueViewController * three;
- (IBAction) moveToNextView: (id) sender;

@end

7 三级视图

BlueViewController.h

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.title = @"三级视图";
}

4.5 iOS应用程序风格类型

根据用户的视觉、行为特性、数据模型、用户体验等方面定义了三种应用风格:

" 效率型应用程序

" 实用型应用程序

" 沉浸式应用程序

1 效率型应用程序

效率型应用程序具有组织和操作具体信息的功能。效率型应用程序通常用于完成比较重要的任务。效率型应用程序通常分层组织信息。邮件是效率型应用程序的典型例子。

2 实用型应用程序

实用型应用程序完成的简单任务对用户输入要求很低。用户打开实用型应用程序，是为了快速查看信息摘要或是在少数对象上执行简单任务。天气程序就是一个实用型应用程序的典型例子。它在一个易读的摘要中显示了重点明确的信息。

3 沉浸式应用程序

沉浸式应用程序提供具有丰富视觉效果的全屏环境，专注于内容和用户对内容的体验。用户通常使用沉浸式应用程序进行娱乐，不论是玩游戏，观看多媒体内容还是执行简单的任务。

4 编写实用型应用程序

5 实用型AP中的模态视图控制器

模态视图控制器主要用于“中断”你当前的“工作流程”，转而去做其它的事情，模态视图控制器可以是前面讲过的任何视图控制器。换句话讲它们都可以以模态方式显示视图。

主视图控制器与被呈现的模态视图控制器之间是一中“父子”关系，MainViewController为父视图控制器，FlipsideViewController为子视图控制器。

presentModalViewController:呈现模态控制器

dismissModalViewControllerAnimated:关闭模态

6 实用型AP中的委托设计模式

委托是一种回调或通知机制，在事情发生的时候被调用的。

委托一般定义成为一个协议，实现该协议的对象就是委托对象，其中的实现了该协议的方法将被回调。

MainViewController.h

#import "FlipsideViewController.h"

@interface MainViewController : UIViewController <FlipsideViewControllerDelegate> {
}

- (IBAction)showInfo:(id)sender;

@end

FlipsideViewController.h

#import <UIKit/UIKit.h>

@protocol FlipsideViewControllerDelegate;

@interface FlipsideViewController : UIViewController {
    id <FlipsideViewControllerDelegate> delegate;
}

@property (nonatomic, assign) id <FlipsideViewControllerDelegate> delegate;
- (IBAction)done:(id)sender;
@end

@protocol FlipsideViewControllerDelegate
- (void)flipsideViewControllerDidFinish:(FlipsideViewController *)controller;
@end

MainViewController.m实现委托关闭模式视图

- (void)flipsideViewControllerDidFinish:(FlipsideViewController *)controller {
    [self dismissModalViewControllerAnimated:YES];
}

MainViewController.m呈现模式视图

- (IBAction)showInfo:(id)sender {    
    
    FlipsideViewController *controller = [[FlipsideViewController alloc] initWithNibName:@"FlipsideView" bundle:nil];
    controller.delegate = self;
    
    controller.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
//    UIModalTransitionStyleCoverVertical = 0,
//    UIModalTransitionStyleFlipHorizontal,
//    UIModalTransitionStyleCrossDissolve,
//    UIModalTransitionStylePartialCurl,

    [self presentModalViewController:controller animated:YES];
    
    [controller release];
}

controller.delegate = self;通过该语句，指定委托对象，就是将当前控制器传递给了模态控制器。

controller.modalTransitionStyle =

UIModalTransitionStyleFlipHorizontal;是模态控制器类型，此外还有：

" UIModalTransitionStyleCoverVertical

" UIModalTransitionStyleCrossDissolve

" UIModalTransitionStylePartialCurl

[self presentModalViewController:controller animated:YES]呈现模态控制器。

FlipsideViewController.m关闭模式视图

注：

1 本教程是基于关东升老师的教程

2 基于黑苹果10.6.8和xcode4.2

3 本人初学，有什么不对的望指教

4 教程会随着本人学习，持续更新

5 教程是本人从word笔记中拷贝出来了，所以格式请见谅

毛利叔叔的叔叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
UI -- 多视图应用程序总结

IOS之多视图应用程序4.1 多视图应用程序介绍4.2 UIViewController多视图程序4.3 标签栏控制器4.4 导航视图控制器应用4.5 iOS应用程序风格类型4.1 多视图应用程序介绍iOS的很多应用程序都是采用多视图设计。控制器类型4种多视图程序：" 自定义视图控制器" 标签栏控制器" 导航控制器" 表视
复制链接

扫一扫