/* syntax highlight */ /* end of syntax highlight */

2010年12月30日 星期四

iphone app 開發 (三十七) 建立多重檢視應用程式

Bookmark and Share

多重檢視應用程式又稱 View Switcher App

可用於你在 App 當中常常要轉換畫面的時候使用,甚至還可以加上動畫,這部份我們下一篇再談

此篇的程式碼大部份參考自 “探索 iPhone程式開發實戰” ,不過書上其實有漏掉一些步驟,導致我也弄了很久 …在此篇教學當中我會補上這些部份,此篇的圖與文字都是我手動整理的,如果需要更清楚的解

釋,建議可以直接買書來看

本範例完成後會達成以下的結果

第一個藍色的 View 中間有一個按鈕,告知你某些訊息

下面有一個按鈕可以切換到另一個畫面,如果在藍 View 按就會切換到黃 View,以此類推

螢幕快照 2010-12-31 上午11.55.03 螢幕快照 2010-12-31 上午11.58.52 螢幕快照 2010-12-31 上午11.59.46

 

本篇教學將會分成幾個部份

Step1:建立連結之 Nib 與檢視控制器

Step2:建立委派機制

Step3:實做SwitchViewController

Step4:實做內容檢視

Step5:編譯

 

Step1:建立連結之 Nib 與檢視控制器

 

專案開始時請選擇 Windows-based 的最乾淨之專案類型

螢幕快照 2010-12-31 上午9.35.59

 

在建立多重檢視程式時,通常會把會用到的 xib 與 classes 建立好,之後再 interface builder 拉動作的時候才可以直接做選取,加快專案的開發進度,這是好習慣,又稱為 程式碼感應(code sense) 功能。

 

所以這時請在  Classes 那邊新增檔案 New File

螢幕快照 2010-12-31 上午9.40.03

再來請選擇 UIViewController,並且命名為 SwitchViewControll ,這是你負責指派 View 切換的 Class

螢幕快照 2010-12-31 上午9.40.22

螢幕快照 2010-12-31 上午9.40.45

 

在此篇範例你會切換兩個 View,一個是 BlueView,另一個是 YellowView,請在這裡也事先建立好

步驟跟上面一樣,只是分別取名為YellowViewController 與 BlueViewController

完成之後你可以在 classes 裡面看到以下的檔案

螢幕快照 2010-12-31 上午9.41.34

 

再來由於我們即將在此專案建立兩個 View,所以也必須建立其對應的 xib 檔,請在 Resouce 資料夾上面按右鍵,跟上面步驟有點類似,但我們在這裡新增的是 User Interface → View XIB

螢幕快照 2010-12-31 上午9.41.59

 

請分別取名為 BlueView 與 YellowView,完成後你可以在 Resources 裡面看到以下的畫面

螢幕快照 2010-12-31 上午9.43.07

 

到這邊,你已經建立好這個範例所會用到的所有元件,接下來就是設定你的指派機制

 

Step2:建立委派機制

為什麼要建立委派,Xcode 的邏輯是,由你的 Main Windows 先指派到你的 SwitchView ,再把等待切換的 Views (Blue 與 Yellow) 設定由 SwitchView 指派,好吧我承認這部份有點難了解,建議可以重覆做幾次下面的步驟,可能會慢慢的了解委派的作用。

我們必須先建立一個 ViewController 的 instance,所以請打開你的 header 檔 (ex.我的專案名成為 viewSwitcherTest ,則打開 viewSwitcherTestAppDelegate.h ) 然後加上以下的程式碼,以宣告一個 switchViewController 的實例 (instance)

 

  1. #import <UIKit/UIKit.h>
  2.  
  3. @class SwitchViewController;
  4.  
  5.  
  6. @interface viewSwitcherTestAppDelegate : NSObject <UIApplicationDelegate> {
  7.     UIWindow *window;
  8.     SwitchViewController *switchViewController;
  9. }
  10.  
  11. @property (nonatomic, retain) IBOutlet UIWindow *window;
  12. @property (nonatomic, retain) IBOutlet SwitchViewController
  13.     *switchViewController;
  14.  
  15. @end
  16.  

 

再來請實作我們的  SwitchViewController ,請打開 viewSwitcherTestAppDelegate.m 檔,加入以下 code

 

  1. #import "viewSwitcherTestAppDelegate.h"
  2. #import "SwitchViewController.h"
  3.  
  4. @implementation viewSwitcherTestAppDelegate
  5.  
  6. @synthesize window;
  7. @synthesize switchViewController;
  8.  
  9. #pragma mark -
  10. #pragma mark Application lifecycle
  11.  
  12. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {   
  13.    
  14.     // Override point for customization after application launch.
  15.     [window addSubview:switchViewController.view];
  16.     [window makeKeyAndVisible];
  17.    
  18.     return YES;
  19. }
  20.  
  21. - (void)dealloc {
  22.     [switchViewController release];
  23.     [window release];
  24.     [super dealloc];
  25. }

 

為了建立 MainWindows 與 View Controller 的關係, 我們必須在 xib 裡面手動加入一個 View Controller 元件,步驟如下:請先點開你的 MainWindow.xib ,然後拉一個 View Controller 的元件拉到 xib 當中

image

 

上面的步驟是加入一個 UIViewController 的 instance,但我們其實需要的是 SwitchViewController 的 instance,所以請按 xib 視窗裡面的 View Controller 圖像,將其 Class 由 UIViewController 改為 SwitchViewController ,如此一來此元件才會與我們之前宣告的 SwitchViewController 搭上關係。

螢幕快照 2010-12-31 上午9.51.51

 

上面的步驟我們已經產生了一個 SwitchViewController 的 instance 在畫面當中了,現在我們必須先設計  SwitchViewController  的接口與動作,請打開 SwitchViewController.h 這個檔案,我們來宣告會用到的 Class 與 IBAction ,首先我們會在 SwitchViewController  用到 BlueViewController 與 YellowViewController ,且在 SwitchViewController 的畫面中我們會放一個 “SwitchViews” 的按鈕,按下去之後就會切換畫面

 

  1. #import <UIKit/UIKit.h>
  2.  
  3. @class BlueViewController;
  4. @class YellowViewController;
  5.  
  6. @interface SwitchViewController : UIViewController {
  7.     BlueViewController *blueViewController;
  8.     YellowViewController *yellowViewController;
  9. }
  10.  
  11. @property (retain,nonatomic) YellowViewController *yellowViewController;
  12. @property (retain,nonatomic) BlueViewController *blueViewController;
  13.  
  14. -(IBAction)switchViews:(id)sender;
  15.  
  16. @end

 

宣告完 SwitchViewController 元件後,我們該來實際編輯這個畫面的元件了,由於 SwitchViewController  只能算是一個殼子,為了在上面設計畫面,我們必須先加入一個 View 進去

把下圖的 View 拉進去你 SwitchViewController 後你應該會看到畫面變成一個灰色的背景

螢幕快照 2010-12-31 上午9.52.38

再來請在下面拉出一個 Toolbar 進畫面當中,完成後你會看到以下的畫面,你也可以改變 toolbar 名字

image

 

再來你可以把 item 按鈕與 ViewController 建立連結,你可以想成當使用者按下按扭後,就會啟動某個行為,所以請選擇到你的按鈕 (Bar Button Item) ,這邊要注意到的是不太容易選到該按鈕,你很有可能會選到 toolbar ,所以請確定你有選到按鈕,再來按下 ctrl 一樣拉線到 SwitchViewController 上面,你會看到有一個你剛剛宣告的 IBAction ,請選擇它,如此一來當使用者按下按鈕後,就會開啟 switchViews 的 IBAction

 螢幕快照 2010-12-31 下午12.41.52

 

 

 

 

Step3:實做SwitchViewController 

之前都只有宣告 SwichViewController ,現在要來實作它的程式碼了,請打開 SwitchViewController.m程式碼如下,稍後做解釋

  1. #import "SwitchViewController.h"
  2. #import "BlueViewController.h"
  3. #import "YellowViewController.h"
  4.  
  5. @implementation SwitchViewController
  6.  
  7. @synthesize blueViewController;
  8. @synthesize yellowViewController;
  9.  
  10.  
  11. // Implement viewDidLoad to do additional setup after loading the view,
  12.    typically from a nib.
  13. - (void)viewDidLoad {
  14.     BlueViewController *blueXibController = [[BlueViewController alloc]
  15.          initWithNibName:@"BlueView" bundle:nil];
  16.     self.blueViewController = blueXibController;
  17.     [self.view insertSubview:blueViewController.view atIndex:0];
  18.     [super viewDidLoad];
  19. }
  20.  
  21. -(IBAction)switchViews:(id)sender
  22. {
  23.     if (self.yellowViewController.view.superview == nil)
  24.     {
  25.         if(self.yellowViewController == nil) //abc
  26.         {
  27.             YellowViewController *yellowXibController =
  28.             [[YellowViewController alloc] initWithNibName:@"YellowView"
  29.                 bundle:nil];
  30.             self.yellowViewController = yellowXibController;
  31.             [yellowXibController release];
  32.         }
  33.         [blueViewController.view removeFromSuperview];
  34.         [self.view insertSubview:yellowViewController.view atIndex:0];
  35.     }
  36.     else
  37.     {
  38.         if(self.blueViewController == nil)
  39.         {
  40.             BlueViewController *blueXibController = [[BlueViewController
  41.                 alloc] initWithNibName:@"BlueView" bundle:nil];
  42.             self.blueViewController = blueXibController;
  43.             [blueXibController release];
  44.         }
  45.         [yellowViewController.view removeFromSuperview];
  46.         [self.view insertSubview:blueViewController.view atIndex:0];
  47.        
  48.     }
  49. }
  50.  
  51. - (void)didReceiveMemoryWarning {
  52.     // Releases the view if it doesn't have a superview.
  53.     [super didReceiveMemoryWarning];
  54.    
  55.     // Release any cached data, images, etc that aren't in use.
  56.     if (self.blueViewController.view.superview == nil) {
  57.         self.blueViewController = nil;
  58.     }
  59.     else {
  60.         self.yellowViewController = nil;
  61.     }
  62. }
  63.  
  64. - (void)viewDidUnload {
  65.     [super viewDidUnload];
  66.     [blueViewController release];
  67.     [yellowViewController release];
  68.     // Release any retained subviews of the main view.
  69.     // e.g. self.myOutlet = nil;
  70. }
  71.  
  72. - (void)dealloc {
  73.     [yellowViewController release];
  74.     [blueViewController release];
  75.     [super dealloc];
  76. }
  77.  
  78. @end

 

其中 ViewDidLoad 是指程式在開始 run 之後就會自動執行的部份,而程式的邏輯就是讓藍色的 View 顯示在手機畫面當中,即載入 BlueViewController 的 instance ,而 initWithNibName 就是指讓 BlueView 成為宣告 *blueXibController 實例時所用的 xib 檔,接下來有一個 atIndex:0 是指讓 BlueView 放在最下層,以確保 toolbox 等等覆蓋在它的上面。

而 switchViews 則是 View 的更換,我們在這裡才把 YellowView 宣告的原因為節省記憶體,你可以設定當切換畫面時才創造 YellowView ,並把 BlueView 釋放掉,這種好習慣可以節省記憶體的使用

switchViews 的做法是先判斷當使用者按下按鈕的時候出現的畫面是 BlueView 還是 YellowView,如果是 BlueView 則 self.yellowViewController == nil ,我們再進一步把 yellowView 載入並釋放 BlueView ,而 if else 的寫法則可以確定一次只載入一個 View ,這種做法叫做 延遲載入 (lazy loading)

didReceiveMemoryWarning  這個方法的用途是在 iPhone OS 偵測到記憶體存量低於系統設定時會呼叫的方法,這是每個控制器都會繼承的方法,在此方法裡面我們實做的就是當系統記憶體不足的時候把 BlueView 及 YellowView 給釋放掉。

 

 

Step4:實做內容 

其實到此階段程式大致完成了,但為了區別我們兩個 View 的不同,我們可以在此兩個 View 裡面再加入一些元件,此部份重點就是你可以各把 View 當成單一的 View 來做編輯,所以我們想要在兩個 View 裡面各放一個按鈕,所以請分別在 BlueViewController.h 與 YellowViewController.h 裡面加上以下程式碼,加入 blueButtonPressed 與 yellowButtonPressed 兩個 IBAction

  1. #import <UIKit/UIKit.h>
  2.  
  3.  
  4. @interface YellowViewController : UIViewController {
  5.  
  6. }
  7.  
  8. -(IBAction)yellowButtonPressed;
  9.  
  10. @end
  11.  

 

  1. #import <UIKit/UIKit.h>
  2.  
  3.  
  4. @interface BlueViewController : UIViewController {
  5.  
  6. }
  7.  
  8. -(IBAction)blueButtonPressed;
  9.  
  10. @end
  11.  

 

痛苦的前面部份已經結束了,這邊就只是針對單一個 View 來做編輯, 我們請先選擇 BlueView.xib 進去設定我們的畫面,由於 BlueView.xib 之前只有做宣告,但尚未指定它是 BlueViewController 的 instance, 所以請選擇 BlueView.xib 的 File’s Owner ,並在第四個 tab 那邊將 class 設定為 BlueViewController ,如下圖

 螢幕快照 2010-12-31 上午10.31.03

 

然後設定一下這個 xib 的屬性,此部份你可以自己多 try 幾種

螢幕快照 2010-12-31 上午10.34.46

 

再來把 button 放到畫面中,並指定 IBAction 到 File’s Owner 上面,選擇 blueButtonPressed 如下圖

image

 

還有一個比較 tricky 的地方,就是當我們把 UIViewController 更改成 BlueViewController 的同時,原本的 View 對於這個 xib 的連結就會中斷,所以我們必須自己增加一個接口 (outlets) ,請從 File’s Owner 按下 ctrl 拉到 View 上面並選擇 View ,就可以補上這個連結,如下圖

image

 

請針對上面的步驟也修改 YellowView.xib 檔案,一樣放一個按照,並設定 yellowButtonPressed 這個 IBAction 以及重新建立 YellowView.xib 與 View 的連結

最後就是來實做我們兩 button 吧,這部份很簡單,程式碼也是固定的,請修改 BlueViewController.m 加入以下程式碼 :

  1. #import "BlueViewController.h"
  2.  
  3.  
  4. @implementation BlueViewController
  5.  
  6. -(IBAction)blueButtonPressed{
  7.     UIAlertView *alert = [[UIAlertView alloc]
  8.            initWithTitle:@"你按下了藍色按鈕”
  9.            message:@"你在 blue view 按下了藍色按鈕”
  10.            delegate:nil
  11.            cancelButtonTitle:@"okay"
  12.            otherButtonTitles:nil];
  13.     [alert show];
  14.     [alert release];
  15. }

 

至於 YellowViewController.m 檔也照做,就可以完成此部份

 

 

Step5:編譯

說真的這個範例真的還蠻大的,我大概花了一天的時間才比較搞懂它,筆者深深覺得 iPhone 上面的開發真的不亞於網頁或是程式的開發,畫面小歸小,但每個元件都設計的很嚴謹。關於這個範例我照著書上做也是失敗了很多次,一方面是書裡面有漏掉一些程式碼,另一方面這個範厲篇幅真的很大,很容易就會 loss 掉某些關鍵動作,所以如果讀者有遇到什麼問題也可以留言,我會盡我所能的幫你解決看看。

如果一切順利,你將會看到以下畫面,一個 BlueView 和一個 YellowView,上面各有一個 Button ,按下後跳出 alert ,左下角有一個 button 可以切換畫面,恭喜 !

 

螢幕快照 2010-12-31 上午11.59.52 螢幕快照 2010-12-31 上午11.55.03 螢幕快照 2010-12-31 上午11.58.52 螢幕快照 2010-12-31 上午11.59.46

0 意見:

張貼留言

Related Posts Plugin for WordPress, Blogger...