2017/1/13

Xamarin.Forms 教學系列文(一)前言




本系列教學文資料皆來自這本微軟免費的電子書 -  

Creating Mobile Apps with Xamarin.Forms 

這本書寫得很好,有興趣看原文的可以自己載來看,缺點 (也是優點) 就是講得很細 (屁話太多),必須花很多時間去吸收。

而本系列教學主旨讓想學 Xamarin.Forms,卻又不爽看英文和屁話的開發人員降低學習門檻。

誰適合學 ?

Xamarin 適合已經懂一些 C#,又想用 Visual Studio 來開發手機 App 的開發人員學習。

在 Xamarin 程式碼內有大量的 Lambda 語法,若對這塊還不熟的可以先行了解。


雖然頗私心的,但這系列教學我會跳過大部分關於 Windows Phone 的內容。
另外,會在句子內保留一些專業的英文單字 (無法翻成中文阿,不是我故意裝 ABC)。


需求環境?
  • Visual Studio 2017 in Windows.
  • MacBook installed with Xcode and Xamarin Platform.
  • iPhone 
  • Android 
  • Noooooooooooookia with Windows Mobile

更詳細的 Visual Studio 環境建置我有獨立一篇文章解說,可以參考
http://www.loganedge.tw/2017/01/xamarinforms-visual-studio-2015-android.html

若想利用 Macbook 進行 iOS 的開發,相關的設定也可以參考
http://www.loganedge.tw/2017/01/xamarin-ios-mac-visual-studio.html
本系列教學文都以 Xamarin.Forms in Visual Studio 為主

程式碼範例

各章節的原始碼皆可在以下網址下載
http://aka.ms/xamarinbook/codesamples

如果有 Xamarin.Forms 的問題想討論或詢問,可以使用以下論壇
http://forums.xamarin.com/categories/xamarin-forms


什麼是 Xamarin.Forms ?

在 2014 年 5 月 28 號 Xamarin 發佈了 Xamarin.Forms,
能夠同時開發 Android, iOS 和 Windows 的應用程式。

Xamarin.Forms 支援五種裝置
  • iPhoen, iPad, iPod Touch 使用的 iOS 系統 
  • Android 手機和平板
  • Windows 10 或 Windows 10 手機使用的  Universal Winddows Platform(UWP) 系統
  • Windows 8.1 
  • Windows 8.1 手機

底下這張圖可以解釋 Xamarin.Forms 和三種系統的架構,
程式人員在第二和三層做一個統合開發,就能同時完成 iOS、Android、Windows 的 App。



Xamarin.Forms.Core 會分別將 user-interface 對應各平台不同的 user-interface。

舉例來說,
在 Xamarin.Forms 內有個叫做 Slider 的物件,分別對應了 iOS 的 UISlider 和 Android 的 SeekBar

如下圖,
手機畫面上的元件包含了 Label,Button,Switch 和 Slider,還有一個 ToolBarItem 分別在平台畫面上方的位置。

這些不同手機的物件,在 Xamarin.Forms 都只需要寫一次



 Xamarin.Forms 也支援平板的開發,底下這張為 iPad Air 2 模擬器的執行結果。



標籤式語法 XAML

Xamarin 前端支援的語法為 XAML (念法為 傑摩~ “zammel”),是 XML 衍伸而來的標籤式語法,聽不懂的話,他就是有點像 HTML...

<contentpage x:class="TestXamarin.MainPage" 
             xmlns:local="clr-namespace:TestXamarin" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns="http://xamarin.com/schemas/2014/forms">

    <label horizontaloptions="Center" 
           text="Welcome to Xamarin Forms!" 
           verticaloptions="Center">

    </label>
</contentpage>

藉由標籤語法,可以省去許多寫 .cs 的繁瑣 (未來會介紹),但標籤式語法最大的缺點就是無法加入迴圈、邏輯或運算。
(心中吶喊:好希望 MVC 的 Razor 引進啊 !!!)


Xamarin.Forms 的遺憾

Xamarin.Forms 定義和統合了不同手機平台較相似的 API,

但是,若你的 App 要開發相當多原生 API 的功能時,

很抱歉,Xamarin.Forms 可能較不適合。

另一方面來說,Xamarin.Forms 很適合做 App 的快速原型開發,

等到各平台畫面和功能都確定後,再著手修改會用到原生 API 功能就好。





10 則留言:

  1. 回覆
    1. 哈哈,感謝! 希望這套技術能因為這教學的中文化,在台灣更好推廣

      刪除
  2. 謝羅根分享
    我發現這網址文章不存在耶~
    http://www.loganedge.tw/2017/01/xamarin-ios-mac-xcode.html?m=1

    回覆刪除
    回覆
    1. 被抓到Bug了...文章連結已修正,感謝!

      刪除
    2. 神速哈哈讚
      然後Server time好像差8小時

      刪除
    3. 我剛剛回別人的留言才意會到你這則留言的意義XD
      感謝Debug哈哈

      刪除