Xamarin 新手入門 Part 1 Xamarin.Android 專案開發教學

重要提醒：由於 Visual Studio 2017 的安裝過程有持續更新，因此，若想要知道最新的 Visual Studio 2017 for Xamarin 的安裝過程，可以參考 2018 Q2 最新文章 Visual Studio 2017 for Xamarin 開發環境之安裝與設定說明 (2018 Q2 版本)

èXamarin 新手入門 Part 1 Xamarin.Android 專案開發教學
Xamarin 新手入門 Part 2 Xamarin.iOS 專案開發教學

Xamarin 新手入門 Part 3 Xamarin.Forms 專案開發教學

Xamarin 新手入門 Part 4 Xamarin.Forms Master Detail 專案開發教學

Xamarin 新手入門 Part 5 Xamarin.Forms for Prism 專案開發教學

Xamarin 新手入門 Part 6 我該選擇 Xamarin.Forms 或者 Xamarin 原生方式來開發跨平台應用程式專案呢？

對於已經具備擁有 .NET / C# 開發技能的開發者，可以使用 Xamarin.Forms Toolkit 開發工具，便可以立即開發出可以在 Android / iOS 平台上執行的 App；對於要學習如何使用 Xamarin.Forms & XAML 技能，現在已經推出兩本電子書來幫助大家學這這個開發技術。

這兩本電子書內包含了豐富的逐步開發教學內容與相關觀念、各種練習範例，歡迎各位購買。

想要購買 Xamarin.Forms 快速上手 電子書，請點選 這裡

想要購買 XAML in Xamarin.Forms 基礎篇 電子書，請點選 這裡

了解更多關於 [Xamarin.Android] 的使用方式

了解更多關於 [Xamarin.iOS] 的使用方式

了解更多關於 [Xamarin.Forms] 的使用方式

了解更多關於 [Hello, Android：快速入門] 的使用方式

了解更多關於 [Hello, iOS – 快速入門] 的使用方式

了解更多關於 [Xamarin.Forms 快速入門] 的使用方式

由於 Xamairn 開發環境不斷地進行成長與演變，所以，特別針對關於 Xamarin 的新手開發者，我這裡特別準備了一系列的新手開發練習文章，這些文章將是採用 2018 年最新的 Visual Studio 2017 與 Xamarin Toolkit 工具集所撰寫而成的；讓對於 Xamarin 有興趣的同好，可以跟著這一系列的文章，透過逐步練習，了解到 Xamarin 的好處。這一系列文章將會說明如何使用 Xamarin Android + Android XML 視覺宣告定義 來開發出原生的 Android App、使用 Xamarin iOS + Xcode Storyboard 設計頁面視覺並開發出原生的 iOS App、使用 Visual Studio 2017 提供的 Cross Platform 專案樣板並搭配 XAML 宣告式標記語言來設計頁面內容，在應用程式中絕大部分會用到的頁面畫面與商業邏輯，都將會在一個 .NET Standard Class Library 標準類別庫進行設計，如此可以將大部分的程式碼進行共用的 Xamarin.Forms 的開發方式、最後，會進行說明，如何搭配 Prism 這個開發框架，讓您的 Xamarin.Forms 專案開發上更加如虎添翼。

不論您選擇使用 Xamarin.Android 或者 Xamarin.iOS 原生開發方式進行專案設計，或者使用 Xamarin.Forms 架構來進行跨平台專案開發，對於身為 .NET / C# 的開發者而言，Xamarin 將會是您的首選，因為，在這個開發專案過程中，您不再需要面對不同的程式語言 Java / Objective-C / Swift 等等，我們可以使用 C# 這個程式語言與我們孰悉的 .NET Framework 開發環境，就可以完成您所有應用程式上會用到的商業邏輯設計。

首先，第一篇文章，將是針對 Xamarin.Android 的原生開發的練習，不過，在此之前，各位需要先行準備好您的 Visual Studio 2017 + Xamarin 開發環境；關於要如何準備您們的 Xamarin 開發環境，可以參考 第一次安裝 Visual Studio 2017 到新的作業系統上 及 Visual Studio 2017 / Xamarin 企業級行動化開發平台環境建置問題排除指引 或者 可以參考 Xamarin / Xamarin.Forms 行動跨平台 Mobile Cross-Platform 開發學習指引問答集 FAQ；若您還有 Xamarin 相關的問題，可以到 Xamarin.Forms @ Taiwan 與 Xamarin 同好一同進行討論。

您也可以先行觀看這部只有 5 分鐘的 Getting Started with Xamarin Android Deploying to Emulators 教學影片，任您可以有更清晰的了解整個過程。同樣的，您也可以觀看 Getting Started with Xamarin Android Modifying the UI 這部教學影片，了解如何設計 Android 應用程式個頁面 UI (User Interface 使用者介面)的過程。

您也可以查看微軟官方的 Xamarin 介紹文章 使用者入門系列，來了解更多關於 Xamarin Android 原生專案的開發技術與技巧。

建立一個 Xamarin Android 專案

• 首先，我們打開 Visual Studio 2017 (任何一種版本 Visual Studio Community 2017 / Visual Studio Professional 2017 / Visual Studio Enterprise 2017皆可)
• 點選 Visual Studio 2017 功能表的 [檔案] > [新增] > [專案]
• 當出現 [新增專案] 對話窗，請依序選擇 [已安裝] > [Visual C#] > [Android] > [單一檢視應用程式 (Android)]
• 請在最下方 [名稱] 文字輸入盒欄位，輸入您想要的專案名稱
• 最後，請點選 [確定] 按鈕

• 一旦 Visual Studio 的方案 ( Solution ) , 專案 ( Project ) 建立完成之後，您可以從 方案總管 ( Solution Explorer ) 中，看到整個 Xamarin Android 的專案結構。

• 其中， Assets 目錄下，可以存放一些該專案會用到的檔案，例如，SQLite 資料庫檔案、音樂或者影片檔案等等。
• 在 Resources 目錄下，可以存放您的應用程式頁面會用到資源，例如，在整個應用程式中會用到的不同縮放比率下的圖片檔案資源；其中，這個專案預設會有一個頁面，這個頁面所要呈現的內容，將會定義在 layout 資料夾下的 Main.axml 內，我們先來查看一下這個檔案內容；這個檔案是個 XML 檔案，我們可以滑鼠雙擊 Main.xaml ，以便打開這個檔案。
• 稍微等候一下，您將會看到如下圖的畫面，這裡就是我們要設計頁面呈現內容的地方，在左方，有工具箱視窗，這裡有各種 Android 原生的控制項 (Control / Widget)，您可以使用拖拉的方式，選擇您需要的控制項，拖拉到頁面上。也就是說，所有頁面可以使用與可以看到的視覺控制項與版面配置 Layout，都與 Android SDK 上所提到的相同，因此，使用這樣的開發方式，建議若您有 Android SDK 開發經驗，則是更好，否則，還是要來了解一下 Android SDK 之相關內容；您也可以從這份 使用者介面 文件上進行深入研究。
  在設計應用程式中的每個頁面畫面內容，您可以透過拖拉工具箱的方式，從工具箱中找到您需要的控制項，拖拉到設計畫面上，若想要進行某個控制項的相關細節與特性進行設定，您可以先點選這個控制項，接著從 Visual Studio 屬性視窗中，找您想要修改的屬性，就可以進行這個控制項的特性變更，這與之前大家在於使用 Windows Forms 開發框架下的做法相同；另外就是，每個頁面所可以看到的內容，都會定義在一個 XML 檔案內，您也可以直接修改這個 XML 檔案，達到一樣的效果。
  在這中間視窗的上方，您可以看到有3個下拉選單，您可以透過這些下拉選單，改變預覽的樣貌，在下拉選單的右方，有些按鈕，可以改變這個頁面的呈現方式。

• 在中間的視窗，我們從該視窗的下方，看到兩個標籤頁次 : Designer / Source，分別可以呈現該頁面的視覺預覽畫面和這個頁面的 XML 宣告內容，所以，我們可以點選 Source 標籤頁次，您就會看到這個頁面的 XML 宣告內容。更多關於這方面的資訊，可以查看 User Interface & Navigation 網頁介紹的內容。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/myButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
</LinearLayout>

• 您可以使用滑鼠雙擊 Android 專案中的 Properties 節點，接著切換到 Android 資訊清單頁面標籤，在這個頁面中，您可以找到 最低 Android 版本 這個下拉選單欄位，您可以從這個下拉選單，選擇您的 Android 應用程式可以支援最低之 Android API 版本。

• 現在我們需要來執行這個 Xamarin Android 專案，在這裡請先確認這個專案是否已經有連結上適當的模擬器或者實體手機作為執行與測試的目標，接著，您可以按下 F5 或者工具列上的綠色三角形按鈕。

準備進行 Xamarin Android 專案的建置、執行、與除錯

• 若您的開發環境在安裝、設定上都正確無誤，此時，您可以在 Visual Studio for Android Emulator 上，看到如左下圖的執行結果，現在，您可以點選模擬器上的按鈕五次，此時，模擬器的畫面就是出現如右下圖的結果。因此，我們可以看的出來，這個 Xamarin Android 專案，確實可以產生出可以在 Android 設備上運行的應用程式，並且，我們可以設計頁面上的各種不同使用者介面與控制項，可以與使用者進行互動，並且將我們的商業邏輯加入到這個應用程式內，如此，這個應用程式將會依照我們設計的需求邏輯來運行。
• 更多關於要產生您的應用程式與有效地進行專案測試技巧，可以參考 部署及測試

 

了解這個專案中的程式碼

• 現在，讓我們按下 Shift + F5 來中止除錯執行，回到 Visual Studio 程式中。
• 在 方案總管 視窗中，在最下方找到 MainActivity.cs 檔案，使用滑鼠雙擊這個檔案，打開它，這是一個 C# 程式碼，其內容如下所示：
• 在底下，我們可以看到，我們透過 button 這個變數，就可以取得頁面上的按鈕物件，接著，我們進行這個按鈕物件的點擊事件的綁定，在這裡我們使用的匿名 Anonymous 方法來設計；在這個匿名方法中，我們會將總共點擊這按鈕的次數，顯示在這個按鈕上。而您可以看到，我們完完全全都是使用 C# 程式語言來做到這樣需求設計。
• 從這個 MainActivity 類別定義程式碼中，看到這個類別是繼承 Activity 類別，而一個 Activity 就是表示該應用程式中整個螢幕畫面。我們在這個 MainActivity 類別中，使用 SetContentView 方法，使用關注點分離的 MVC 設計方法，指定這個頁面要顯示、使用到的 UI 控制項與排列方法在上面所提到的 Main.axml 檔案內；因此，這個頁面將會使用這個 XML 檔案內容的宣告事項，將 Layout / Widget 顯示在螢幕上。最後，我們透過了 FindViewById 這個方法，找到按鈕控制項的物件，並且設定該按鈕的點選事件，綁訂到我們設定為匿名委派方法 (Anonymous Delegate Method) 內，也就是說，當使用者在裝置或手機螢幕上點選了這個按鈕，我們將會把當時總共點選次數的文字，設定到這個按鈕上，如此，我們就可以從這個按鈕上，看到當時使用者總共點選這個按鈕幾次了。

關於更多的 UI 與其互動設計需求，可以參考 控制項 這份文件中的說明

using Android.App;
using Android.Widget;
using Android.OS;

namespace XAQStart
{
    [Activity(Label = "XAQStart", MainLauncher = true, Icon = "@mipmap/icon")]
    public class MainActivity : Activity
    {
        int count = 1;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            Button button = FindViewById<Button>(Resource.Id.myButton);

            button.Click += delegate { button.Text = string.Format("{0} clicks!", count++); };
        }
    }
}

進階研讀

您可以繼續來研讀 Xamarin 新手入門 Part 2 Xamarin.iOS 專案開發教學

了解更多關於 [Xamarin.Android] 的使用方式

了解更多關於 [Xamarin.iOS] 的使用方式

了解更多關於 [Xamarin.Forms] 的使用方式

了解更多關於 [Hello, Android：快速入門] 的使用方式

了解更多關於 [Hello, iOS – 快速入門] 的使用方式

了解更多關於 [Xamarin.Forms 快速入門] 的使用方式

關於 Xamarin 在台灣的學習技術資源

歡迎加入 Xamarin 實驗室 粉絲團，在這裡，將會經常性的貼出各種關於 Xamarin / Visual Studio / .NET 的相關消息、文章、技術開發等文件，讓您可以隨時掌握第一手的 Xamarin 方面消息。

歡迎加入 Xamarin.Forms @ Taiwan，這是台灣的 Xamarin User Group，若您有任何關於 Xamarin / Visual Studio / .NET 上的問題，都可以在這裡來與各方高手來進行討論、交流。

Xamarin 實驗室 部落格 是作者本身的部落格，這個部落格將會專注於 Xamarin 之跨平台 (Android / iOS / UWP) 方面的各類開技術探討、研究與分享的文章，最重要的是，它是全繁體中文。

Xamarin.Forms 系列課程 想要快速進入到 Xamarin.Forms 的開發領域，學會各種 Xamarin.Forms 跨平台開發技術，例如：MVVM、Prism、Data Binding、各種 頁面 Page / 版面配置 Layout / 控制項 Control 的用法等等，千萬不要錯過這些 Xamarin.Forms 課程