1. 程式人生 > >【原創】第一個iOS應用程式

【原創】第一個iOS應用程式

萬事開頭難。鬥霜傲雪二十年,堂堂劍氣尚寒。——《詩詞三百首》

全文概覽

第一章 視窗與應用程式

在iOS應用程式中視窗(Window)是檢視(View)的載體,每一個應用程式都至少有一個Window,一般而言也只有一個Window,在某些特定應用中會出現多個Window,本文暫不考慮多視窗的情況。Window是UIWindow類的一個例項,當應用程式啟動時會建立這個視窗。當視窗顯示出來後,一般來說,開發者就很少再會用到視窗。

在“iOS開發入門教程”一文中已經描述過建立一個iOS引用程式的過程,這裡不做重複。根據iOS應用程式的生命週期可以發現,每一個iOS應用程式啟動的時候都會呼叫一個啟動方法:

<!-- lang: cpp -->
- (BOOL) application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions;

下面我們就從這裡開始,完成第一個iOS應用程式。

方法全貌如圖:

啟動方法

我們先看方法實現的開始和結束有這樣兩行程式碼:

<!-- lang: cpp -->
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
[self.window makeKeyAndVisible];

首先說明一下這兩行程式碼各自的功能,第一行:以螢幕尺寸為標準初始化一個UIWindow物件的例項。第二行:設定例項為主視窗並顯示。這樣當應用程式啟動後就能看到這個視窗了。回頭再看看,self.window從何而來的呢?我們繼續追蹤。在“iOS開發入門教程”一文中我們講過,iOS應用程式的入口是AppDelegate.m,它的標頭檔案對應為AppDelegate.h,我們開啟這個標頭檔案,其內容如下:

AppDelegate

原來它(self.window)來自這裡。此外不難發現,還聲明瞭一個ViewController的例項viewController

第二章 新增檢視

2.1 從nib檔案初始化檢視

再回到上面方法的實現中我們看還剩下下面兩行程式碼:

<!-- lang: cpp -->
self.viewController = [[ViewController alloc] initWithNibName: @"ViewController" bundle:nil];
self.window.rootViewController = self.viewController;

ViewController是建立應用時生成的一個檢視控制器(類),我們在結構中可以看到:

專案結構

顯然self.viewController就是這個控制器的一個例項,而initWithNibName方法,顧名思義就是從指定名稱的nib檔案中初始化這個例項,特別說明:在早期的Xcode中xib本應是nib,後來更名為xib,因此,此處所指的nib即是xib檔案。下面一行即為設定主檢視控制器為ViewController的例項。個人理解這裡的設定就相當於網站開發中設定網站的主頁。

下面我們新增一點東西,驗證一下,開啟xib檔案,單擊檢視,讓檢視處於焦點狀態,右側選中屬性設定面板如圖設定檢視背景顏色:

設定背景顏色

點選Xcode左上角Run按鈕或者Command + R快捷鍵,執行程式,效果如圖:

背景設定預覽

由此證明,我們從xib檔案載入的應用程式檢視已經成功了。

2.2 使用指令碼新增檢視

上一節已經跟大家掩飾瞭如何使用xib檔案建立檢視,但是顯然強大的iOS開發不可能只有這麼一種實現方式,下面我們就看下僅僅使用程式碼,如何實現上述效果。

首先,上一節中操作只修改了xib檔案,並未對ViewController類進行設定,這裡我們也不做修改,只需改變啟動函式中的一部分程式碼並新增少許程式碼即可。

然後,我們修改啟動函式如圖:

程式碼設定檢視

此時我們再次執行應用程式,會得到和上一節一樣的效果。修改後的三行程式碼也很好理解:

  • 第一行,初始化一個空的檢視控制器;
  • 第二行,設定檢視控制器控制檢視的位置和尺寸;
  • 第三行,設定檢視的背景顏色為藍色。

應該說程式碼實現更符合程式設計師的邏輯。

第三章 新增子檢視

3.1 通過xib新增子檢視(subview)

首先簡單介紹一下Xcode中控制元件的位置。記得在“iOS開發入門教程”一文中我提到過Xcode大致分為左中右三塊區域,而右側主要顯示屬性和控制元件資訊,如圖所示:

控制元件區

將UIButton拖一個到檢視上,效果如圖:

新增UIButton

可拖動周圍的小方塊調整按鈕尺寸,也可拖動整個按鈕調整位置,雙擊文字區可以修改文字。

小技巧:當拖動改變尺寸的同時按住alt(Option)鍵,可顯示四邊邊距。

接著我們點選Xcode左上角的Run按鈕執行應用,效果如圖:

預覽

使用xib新增控制元件,就是這麼簡單。

3.2 通過程式碼實現新增子檢視

雖然Xcode提供瞭如此方便的檢視新增方式,但是在實際開發中往往會遇到一些用視覺化工具無法達到目的的情況,因此掌握使用程式碼新增檢視,也是開發者必備的技能。

在上一章中,我們演示了使用程式碼新增檢視控制器的方法。現在我們看一下ViewController類中的內容:

viewController

實際上當檢視控制器建立成功並新增檢視到Window後,檢視控制器的- (void) viewDidLoad方法便會被觸發,因此我們可以在viewDidLoad方法中用程式碼新增子檢視。同上,我們還是在主檢視中新增一個按鈕,我們看下如何實現:

用程式碼新增子檢視

此例中我們首先在@interface中定義了一個UIButtton類的例項btn,然後在viewDidLoad中例項化並設定其大小和位置,以及背景顏色和文字顏色,最後呼叫view的addSubview方法將btn新增到檢視中。

特別注意:假如在建立專案的時候勾選了啟用arc,那麼這段程式碼沒有問題。如果未選擇啟用arc,則應該在self.btn使用完畢後呼叫[self.btn release];釋放記憶體,避免記憶體洩露。

現在我們執行應用程式得到如下效果:

程式碼新增的按鈕預覽

好了,兩種新增檢視的方法都實現了,慢慢消化一下。

第四章 控制元件與事件

4.1 通過程式碼獲取檢視中的控制元件

如果是通過程式碼例項化的控制元件,則理所當然的與程式碼關聯了,可在程式碼中直接使用對應的變數名呼叫,如上一節中建立的btn例項,則可以直接呼叫[self.btn setTitle:forState:]方法。而直接拖到nib檔案中的控制元件,我們卻沒有辦法直接使用,那麼如何能夠取到nib中的控制元件呢?

其實很簡單,Xcode提供了一個強大的nib編輯器Interface Builder,似乎簡稱IB。開啟nib檔案後,選擇Xcode編輯區的Assistant Editor此時程式碼編輯區會出現左右兩個並排的程式碼區,這時我們讓兩個區域分別顯示nib檔案和檢視控制器的標頭檔案,如圖所示:

Assistant Editor

此時按住Mac鍵盤的control鍵,然後用滑鼠將控制元件拖動到和@end 之間的區域,如圖:

關聯檢視

填寫好例項名稱之後,其他選項預設即可,點選Connect便關聯成功了,此時在程式碼去會自動生成下面這行程式碼:

<!-- lang: cpp -->
@property (weak, nonatomic) IBOutlet UIButton *btn;

並且左側行號區會出現一個實心的圓圈。之後我們便可以在.m檔案中控制這個控制元件了,比如新增事件,當用戶點選這個按鈕的時候給出響應等。

另外一種關聯的方式,大同小異。首先在標頭檔案中定義例項變數,比如:

<!-- lang: cpp -->
@property (strong, nonatomic) IBOutlet UIButton *btn;

此時,其左側行號區出現空心圓圈。然後儲存檔案,切換回nib檢視,此時在File's Owner上滑鼠右鍵出現一個視窗,如圖:

關聯檢視

你會發現剛才定義的例項變量出現在了上圖紅框位置,然後使用滑鼠拖動對應變數右側的空心圓到對應的控制元件上,鬆開滑鼠,此時注意復層中已經出現了關聯關係,至此關聯成功。再返回標頭檔案檢視,發現此時變數左側的空心圓也變成實心的了。

4.2 給控制元件新增事件

上一節已經講過如果將控制元件與程式碼關聯,關聯好後我們就可以給控制元件繫結相應的事件,讓之擁有最終與使用者發生互動的能力。那麼如何讓一個控制元件擁有自己的事件呢?且繼續往下看。

給控制元件繫結事件有多種方法,第一種,使用純程式碼實現:

<!-- lang: cpp -->
[self.btn addTarget:self action:@selector(doSomething) forControlEvents:UIControlEventTouchUpInside];

然後我們實現一下doSomething方法:

<!-- lang: cpp -->
- (void) doSomething {
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Test"
                                                    message:@"This is an Alert Information"
                                                   delegate:self
                                          cancelButtonTitle:@"Cancel"
                                          otherButtonTitles: nil];
    [alert show];
}

這樣設定之後,當用戶在按鈕內部點選並鬆開手指時,就會觸發TouchUpInside事件,呼叫doSomething方法。結果如圖:

AlertView

第二種,這種方法與建立程式碼與控制元件關聯相類似。首先開啟Assistant Editor,開啟標頭檔案和nib檔案,按住control鍵拖動空控制元件到控制器類的中間,如圖:

delegateEvent

注意紅框部分與建立關聯時有所不同,還要注意填寫Name時,如果時較早版本的Xcode,需要在名稱後面新增:。點選Connect按鈕,會自動生成這樣一句程式碼:

<!-- lang: cpp -->
- (IBAction)doSomething:(id)sender;

好了,事件又一次繫結成功了!Command + R執行應用,檢視效果。

4.3 補充獲取控制元件的另一種方法(viewWithTag)

在nib檔案的屬性設定中有一個地可以直接設定其tag值,如圖:

Tag

這個值理論上來說在一個檢視中應該唯一,也可以通過程式碼設定這個值:

<!-- lang: cpp -->
[self.btn setTag: 1000];

設定了這個值之後,便可以通過以下方法,取得nib中的控制元件:

<!-- lang: cpp -->
UIButton *button = (UIButton *)[self.view viewWithTag:100];

至此,基本可以自己動手開發一個屬於你自己的iOS應用程式了。這裡是一個根據本文內容編寫的一個小的例子,功能很簡單:點選第一個按鈕,改變第二個按鈕的名稱。有興趣的朋友可以下載去玩玩。