2017/1/4

Xamarin.Forms 教學系列文(零) 建置環境入門 - With Visual Studio 2015


Xamarin 教學

Xamarin 完全支援使用微軟的 Visual Studio 來進行開發。

如果各位跟作者一樣是窮工程師,可於 Visual Studio 官網下載 Community 版(免費,微軟佛心來著),


進入 Visual Studio 官網 → 下載 →  Visual Studio Community
https://www.visualstudio.com

Visual Studio 的強大等你自己實作中慢慢來體驗,以後有機會再發一篇教學。
超多實用快捷鍵,intellisense 自動選字等...


安裝 Visual Studio

執行安裝檔後,會需要勾選一些開發環境,Android 可依照你需要的 SDK 選擇安裝,大概需要 20G ~ 40G 的空間...
  • 跨平台行動開發
    • C#/.NET ( Xamarin v4.2.1)
    • Microsoft Visual Studio Emulator for Android
    • Android 原生開發套件 (R11C, 32 位元)
    • Android 原生開發套件 (R11C, 64 位元)
    • Android 原生開發套件 (R10E, 32 位元)
    • Android 原生開發套件 (R10E, 64 位元)
    • Android SDK
    • Android SDK 安裝程式 (API 層級 19 與 21)
    • Android SDK 安裝程式 (API 層級 23)
    • Java SE 開發套件
Xamarin 教學



Visual Studio 雖然強,但安裝內容也相當多,需要稍等一下,

頗建議開發人員趁這時,有個理由換一顆 SSD ,會開心很多。

裝好 Visual Studio 後可以照著步驟建立一個新的 Xamarin 專案。


新建 Xamarin 專案

檔案 → 新增 → 專案 → Visual C# → Cross-Platform → Blank Xaml App(Xamarin.Forms Portable) → 選擇專案位置和名稱後按確定即可。

於步驟中選擇 Cross-Platform 後,可於右側看到一堆名字很像的方案,
目前較方便的開發方式還是以 Xaml 加上 Portable 的寫法,其他等教學系列文出來再進行解釋。


Xamarin 教學



VS 2015 建立全新 Xamarin 專案需要注意一個很怪異的 bug。

路徑太長時,此專案會無法正常建置執行。

想當初也只是放在預設 VS 專案資料夾下而已,
目前不確定更新檔是否修正這個 bug 了... 若有遇到新建專案莫名無法執行,陳師傅,先攻他路徑...


按下確定後,等待 VS 把五個專案長出來,會跳出視窗請你連接 Mac,都先關掉。

Xamarin 教學


若你沒有要開發 iOS 或 Windows Phone,
可以對不需要的專案按右鍵,卸載專案,此動作會讓你在建置時省一點時間。

(結果 Visual Studio 2017 不預設載入 Windows Phone 專案... 微軟你也發現了嗎...)

建置 App

接著,對著你要執行結果的平台專案  右鍵 → 設定為起始專案。


Xamarin 教學


有 Android 手機的除了可以利用 USB 線 來執行建置外,(記得將手機上的開發人員選項中的 USB 偵錯開啟 ),還能經由一些設定後走 wifi 將 app 發佈至手機。

要用 VS 內建的模擬器也可以(慢到你會覺得電腦當了),Xamarin 官網有提供 Intel x86 架構上的 Android 模擬器,速度會快一些 (據說是十倍)。

照著以下網址步驟可安裝此模擬器。
https://developer.xamarin.com/guides/android/getting_started/installation/accelerating_android_emulators/

不過我知道你懶得看英文,先來這頁面挑你作業系統的安裝檔。
https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager
安裝完成後可在 Visual Studio 的 工具 → Android → Android Emulator Manager
將之打勾後就能使用了。

Xamarin 教學


但如果你電腦是 AMD,就別肖想了,乖乖用手機開發吧...
Xamarin 教學



乖乖用手機 USB 接上電腦後,
就能看到上方綠色箭頭旁出現你手機的代號,本範例是用 Samsung S6,出現的是 Samsung SM-G9208

Xamarin 教學


舉起你的食指,按下那綠色的箭頭
(第一次建置需要等待 2 ~ 5 分鐘不等,看電腦運算速度,第二次以後的建置時間就快很多了)。

waiting is funny...

...

...

...

Welcome to Xamarin.Forms!

Xamarin 教學



完成你人生第一支 Xamarin App !


總結:
  1. 下載並安裝 Visual Studio( 記得勾選 Xamarin 開發選項)
  2. 新建 Xamarin 專案( Blank Xaml App - Portable) )
  3. 更改起始專案( 依照你要執行 App 的平台)
  4. 將電腦與手機連接後按下建置
  5. Welcom to Xmarin.Forms!

注意:iOS 需要搭配 MacXcode 來編譯,才能在你的 iPhone 上執行 App。
聽說:VS2017 快發布了,針對執行效能有強大改善,可以期待一下。

11 則留言:

  1. 真的很感謝您的分享
    這系列文章對於我們Xamarin新手幫助很多!
    Thanks

    回覆刪除
    回覆
    1. 其實我也是新手...去年微軟買下Xamarin才開始研究
      只是剛好花了些時間讀原文教學,把筆記整理上來也順便推廣這技術,
      不要催我稿就好XD

      刪除
    2. 我是新手 正在體驗這系列文章強大的威力
      真的謝謝分享

      刪除
    3. 要小心才經歷四個月Xamarin.forms就改了兩次小版,
      有些東西舊文章已經不能用了Orz
      最近 2.5 版本新增一些東西,官方教學也都還沒出

      刪除
  2. 大大,想請問一下,我的XAMARIN ANDROID模擬器打開的時候會黑屏,
    ANDROID STUDIO 的模擬器打開來也會黑屏,
    是不是哪邊設定有問題了?
    是環境變數那邊嗎?

    回覆刪除
    回覆
    1. 如果是用 Windows & VS 開啟 Android 模擬器,
      請先確認
      1. Hyper-V 是否啟動
      2. Android SDK & Tools 是否更新至最新版本
      3. 模擬器處理器是 X86

      這樣才能用 Hyper-V 加速模擬器的啟動

      刪除
    2. 對了,如果是第一次開啟可能要等個一分鐘左右,系統才會啟動

      刪除
    3. 解決了
      感謝大大!!
      大大,我能否加您的LINE ?

      刪除
    4. 有任何問題歡迎用粉絲專業找我,我都會回

      刪除
    5. https://www.facebook.com/loganEdgeTw/

      刪除

注意:只有此網誌的成員可以留言。