Visual Studio跨平臺開發實戰(2) - Xamarin.iOS基本控制項介紹

原文 Visual Studio跨平臺開發實戰(2) - Xamarin.iOS基本控制項介紹

前言

在上一篇文章中, 咱們介紹了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個pro​​perty, 確認後關閉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控制項的宣告

 UISlider _slider; 

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

 _slider = new UISlider(new RectangleF(10, 350, View.Frame.Width -20, 50));
             _slider.MinValue = 0.0f;  _slider.MaxValue = 100.0f;  _slider.SetValue(20.0f, false);  _slider.ValueChanged += (sender, e) =>  {  this.lblOutput.Text = string.Format("滑桿目前的值爲{0}", ((int)_slider.Value).ToString());  };  View.AddSubview(_slider); 

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

 

• Switch

 

1. 一樣透過程式動態產生, 咱們在Lab01_HelloWorldViewController類別中宣告

 UISwitch _switch; 

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

 //初始化子控制項Switch

 _switch = new UISwitch(new RectangleF(10,350,100,30));  _switch.SetState(true, false);  //_switch.Hidden = true;  _switch.ValueChanged += (sender, e) =>  {  this.lblOutput.Text = string.Format("目前Switch的值爲{0}", _switch.On ? "ON":"OFF");  };  View.AddSubview(_switch); 

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

1. 開啓Lab01_HelloWorldViewController.xib. 並放置1個UIImageView物件, 以下圖所示：

針對UIImageView物件新增1個Outlet並命名爲_img

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

 this.btnClickMe.TouchUpInside += (sender, e) => 

 {  //this.lblOutput.Text = string.Format ("我被點了{0}下", ++i);  _img.Hidden = false;  _img.Image = UIImage.FromFile("flower.jpg");  }; 

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

3. 執行專案後點擊ClickMe後的結果以下:

結語

透過上述的介紹, 是否是以爲使用C#來開發iOS的應用程式, 與開發Windows Form應用程式很是類似呢? 相信各位都能觸類旁通, 運用其餘的控制項來創建本身的iOS應用程式, 在接下來的文章中, 將會介紹如何開發iOS的多頁面應用程式, 以及程式如何在頁面中巡覽。

範例程式碼下載. Lab01-HelloWorld.zip

本文同時刊載於昕力資訊網站 ,轉載請註明出處!