前言

在上一篇文章中, 我們介紹了Xamarin 以及簡單的HelloWorld范例, 這次我們針對iOS的專案目錄架構以及基本控制項進行說明. 包含UIButton,UISlider,UISwitch, UIImage以及UIWebView控制項。

iOS的使用者界面描述文檔, 其副文檔名為.xib, 目前在Visual Studio尚未支持直接編輯. 因此在文章中, 我們會先用Xamarin Studio建立專案, 并使用XCode中的Interface Builder布置我們所需的控制項后, 再以Visual Studio 開啟專案進行程序代碼的撰寫. 讓我們開始吧.

建立專案及使用Xcode Interface Builder

1. 開啟Xamarin Studio. 新增專案 => 選擇IOS下的IPhone=>在右邊的菜單中選擇 Single View Application

2. 在名稱及專案名稱中輸入“Lab01-HelloWorld”

3. 專案建立后, 檢視專案的文檔案架構.

Main.cs : 應用程序的進入點.

• AppDelegate.cs : 主要的應用程序類別(class), 并接聽來自作業系統的事件及相對應的事件處理.
• Lab01_HelloWorldViewController.cs : 負責主銀幕的生命周期, 也就是MVC分層的Controller.
• Lab01_HelloWorldViewController.designer.cs : 包含使用者界面中對象的定義及動作(Action)的聲明.
• Lab01_HelloWorldViewController.xib : 主要的使用者界面定義文檔, 也就是MVC分層的View. XML格式, 可通過Xcode的Interface Builder(IB)進行編輯.
• Info.plist : 應用程序的資訊文檔, 如名稱, 版本, 圖示等等.

4. 雙擊Lab01_HelloWorldViewController.xib以開啟XCode, 在IB右邊的Object Library拖拉Button及Label如下圖, 存檔后關閉IB, 回到Xamarin Studio

5. 使用Visual Studio 開啟Lab01-HelloWorld專案并行以下設定:

• 在工具列=>建置=>組態管理員, 將平臺設為iPhoneSimulator

• 將模擬器版本改為iPhone 6.1

• 開啟專案屬性, 選擇iOS Application節點并輸入Application Name, Identifier, Version等資訊. 最下面的”Deployment Target” 表示目標裝置的最低作業系統版本. 此處選擇6.0, 表示此應用程序可執行在iOS 6.0以后的版本.

• 執行專案: iPhone 模擬器將會啟動并顯示先前步驟所設計的頁面.

Outlet與Action

由于iOS應用程序的開發模式使用MVC的分層架構. 因此使用者在View布置控制項后, 必須新增與Controller的鏈接(Connect), 才能在Controller通過程序代碼進行控制項的操作. 而此鏈接在iOS中可以通過Outlet及Action進行.

• Outlet : 以屬性的方式鏈接View及Controller. 可以對Outlet附加event handler 或呼叫方法
• Action : 類似WPF的command property. 可以將多個control bind到同一個action.

接下來我們通過實際的范例來了認識Outlet及Action.

1. 在Xamarin Studio中打開Lab1_HelloWorldViewController.xib, 進入Interface Builder.

點選右上方的”Show Assistant editor”圖標

此時會出現另一個輔助視窗并帶出Lab01_HelloWorldViewController.h頭文件

2. 按住”Control”鍵并將按鈕”Click Me” 拖到@interface 及 @end中間的空白處

放開后會出現對話窗, 在name欄位輸入“btnClickMe”.

3. 依照步驟2, 在Label 新增一個Outlet, 并命名為lblOutput.

您會發現在header文檔中會增加2個property, 確認后關閉Interface Builder

4. 在Visual Studio 中開啟Lab01_HelloWorldViewController.designer.cs, 您會發現在文檔案中聲明了2個屬性, 名稱與上一個步驟中所命名的名稱相同. 并加上了[Outlet] 屬性(Attribute)

5. 開啟 Lab01_HelloWorldViewController.cs文檔. 并在 ViewDidLoad 事件處理函式中加入btnClickMe的TouchUpInside 事件委派及事件處理函式, 如下圖所示：

6. 執行專案并測試Click Me 按鈕功能是否正常.

由于目前最新版本的Xamain.iOS已支持到C# 5.0. 因此像是匿名方法及Lambda Expression等語法都有支持, 上述的委派及事件處理也可以通過如下代碼來編寫：

7. 再次點擊xib文檔. 依照步驟2的方式在Action 1按鈕新增一個Action(不是Outlet), 如下圖所示, 在Connection部分選擇Action, Name的部份輸入”actnButtonClick”

在右邊的header文檔可以看出action與先前加入的Outlet有所不同.

依照上面的方式, 我們將Action 2 按鈕加入到同一個Action. 請按下Control鍵, 然后將Action 2按鈕拖放到先前的 –(IBAction)actnButtonClick:(id) sender的聲明. 此時僅會出現Connect Action的方法, 如下圖所示：

8. 關閉Interface Builder, 回到Visual Studio 重新載入ViewController.Designer.cs文檔. 可以發現剛剛新增的action, 被轉換為沒有回傳值的方法.

9. 開啟Lab01_HelloWorldViewController.cs 在類別中的空白出輸入”partial”, Visual Studio 會提示您新增actnButtonClick的事件處理常式. 請輸入以下程序代碼:

執行程序, 確認執行結果是否符合預期

基本控制項

在上一節中, 我們已經練習過UIButton以及UILabel控制項的操作. 接下來我們將說明其他的基本控制項。

• Slider

1. 這讓我們通過程序動態產生Slider控制項. 首先我們在 Lab01-HelloWorldViewController 類別中新增Slider控制項的聲明

2. 在ViewDidLoad 事件處理中初始化控制項, 并在ValueChanged 事件中將目前slider的值傳到Label控制項顯示

3. 執行專案, 試著滑動slider

• Switch

1. 同樣通過程序動態產生, 我們在Lab01_HelloWorldViewController類別中聲明

2. 在ViewDidLoad 事件處理中初始化控制項, 并在ValueChanged 事件中將目前slider的值傳到Label控制項顯示

3. 執行專案, 試著切換Switch控制項

1. 開啟Lab01_HelloWorldViewController.xib. 并放置1個UIImageView對象, 如下圖所示：

針對UIImageView對象新增1個Outlet并命名為_img

2. 這里我們借用btnClickMe的事件處理, 指定UIImageView的圖片來源.(請在專案中加入圖片文檔, 這里我們使用flower.jpg)

上述的程序代碼中, 圖片的資料來源是預先放置在專案目錄中的圖片文檔.

3. 執行專案后點擊ClickMe后的結果如下:

結語

通過上述的介紹, 是不是覺得使用C#來開發iOS的應用程序, 與開發Windows Form應用程序非常相似呢? 相信各位都能舉一反三, 運用其他的控制項來建立自己的iOS應用程序, 在接下來的文章中, 將會介紹如何開發iOS的多頁面應用程序, 以及程序如何在頁面中預覽。

本文轉載自