XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2016/08/08

Xamarin.iOS 您好

Xamarin.iOS 您好

這個範例專案將會說明如何使用 Xamarin.iOS 工具幫助您開發原生 iOS 類型的應用程式;當您決定使用 Xamarin.iOS 來開發原生的 iOS 應用程式,您需要充分了解 iOS SDK 所描述的各項內容,千萬不要為,我只具備了 C# 的知識與經驗,我就可以使用 Xamarin.iOS 開發出任何 iOS 類型應用程式,因為,這樣到時候您會很受傷的。
由於 Xamarin.iOS 遵從 iOS SDK 內容,採用一對一對應的方式,當然也是使用 MVC 開發設計模式,所以,所有的檢視 (View) 畫面內容,都會在 Storyboard 上進行定義,當然,您也需要學會如何操作Storyboard 來設計頁面的 UI。

開始建立新的專案

  1. 首先,開啟您的 Visual Studio 2015 (在此,假設您已經安裝好 Visual Studio 2015 與 Xamarin Toolkit工具)
  2. 接著透過 Visual Studio 2015 功能表,選擇這些項目 檔案 > 新增 > 專案 準備新增一個專案。
  3. 接著,Visual Studio 2015 會顯示 新增專案 對話窗,請在這個對話窗上,進行選擇 Visual C# >iPhone > Single View App (iPhone)
  4. 接著,在最下方的 名稱 文字輸入盒處,輸入 iOSHello 這個名稱,最後使用滑鼠右擊右下方的 確定按鈕。
    HelloBlankXamlApp
  5. 當專案建立到一半,會看到 Xamarin Mac Agent Instructions 對話窗出現,這個對話窗是要提醒您進行與 Mac 電腦連線設定,這是因為,您無法在 Windows 作業系統進行 iOS 相關應用程式的建立與設計工作,而是需要透過 Mac 電腦安裝的 XCode 來協助您完成這些 iOS 應用程式的建立工作。不過,因為這個時候是要開發 iOS 類型的原生專案,所以,您需要讓您的 Windows 電腦可以連上 Mac 電腦。
    XamarinMacAgent連線成功
  6. 當完成這個原生 iOS 專案的新建立工作,可以從方案總管內看到這個專案的結構,原則上,您看到的目錄與檔案內容,都會與使用 iOS SDK 開發專案十分類似。
    iOS原生專案結構

加入處理邏輯

  1. 滑鼠雙擊檔案 Main.storyboard,此時,Xamarin.iOS 正在透過 Mac 遠端電腦,透過 Xcode 開啟這個Storyboard 類型檔案。一旦在 Visual Studio 2015 內,Xcode 的 Storyboard 編輯畫面已經出現之後,請修正上方工具列關於您的除錯環境,確認這個 Xcode 的內容是要依照哪個 iOS 環境來呈現。也請在 Storyboard 子視窗的上方(下圖紅色方框處),調整您的 View 的直向獲這橫向設定。
    • 使用 工具箱 (若您沒有看這個視窗,可以點選 檢視 > 工具箱 來開啟這個子視窗),在其Controls 區域下,拖拉 Label / Button / Text Field 這三種控制項到 Storyboard 上,如下圖所示。
    • 標號1
      Lable 控制項,Lable.Text = 歡迎來到 Xamarin.iOS
    • 標號2
      Lable 控制項,Lable.Text = 您的姓名
    • 標號3
      Lable 控制項,Lable.Text = 空白,Identity.Name = lblWelcome
    • 標號4
      Text Field 控制項,Text Field.Text = 空白,Identity.Name = txtYourName
    • 標號5
      Button 控制項,Button.Text = OK,Identity.Name = btnOK
    iOSStoryboard
  2. 滑鼠雙擊檔案 ViewController,使用底下程式碼覆蓋。
    在 ViewDidLoad 方法內,增加了按鈕的 `TouchUpInside 的處理事件,在這裡,當按下這個按鈕,則會自動根據使用者輸入的姓名,產生另外一段字串。

ViewController.cs

using System;

using UIKit;

namespace iOSHello
{
    public partial class ViewController : UIViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            // Perform any additional setup after loading the view, typically from a nib.

            btnOK.TouchUpInside += (s, e) =>
              {
                  lblWelcome.Text = $"{txtYourName.Text} 您好";
              };
        }

        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
            // Release any cached data, images, etc that aren't in use.
        }
    }
}

實際執行畫面

iOS 執行結果

請在方案總管內,滑鼠右擊 iOSHello 專案,選擇 設定為起始專案,接著按下 F5 開始執行。
請在標題文字 您的姓名 下方,輸入您的姓名
iOS執行結果1
最後,請點選按鈕 OK,就會出現如下圖所示內容
iOS執行結果1

沒有留言:

張貼留言