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筆記中拷貝出來了，所以格式請見諒