Xamarin.Forms入門學習路線

Xamarin 介紹

Xamarin是一套跨平台解決方案，目的是使用C#語言創造原生的iOS，Android，Mac和Windows應用。

Xamarin的三個優勢：

1. Xamarin App擁有原生App的性能，因為最后生成的App中是使用的原生的控件和原生的API，所以它的體驗和效率與原生App相近。
2. 使用熟悉的C#語法，在Objective-C，Swift或者Java中能做的任何事情都可以用C#做到。除此之外，C#還有強大的IDE智能提示，lambdas語法，更自然的異步語法（Task、Async），NuGet快速獲取組件。
3. 在不同的平台上使用同樣的語言還具有共享代碼的優勢，各個平台大約可以共享75%的APIs和數據結構代碼。如果使用Xamarin.Forms來創建UI幾乎可以共享100%的代碼。

最終的思想，共享代碼

說白了，Xamarin宣稱的最大的優勢就是在三個平台上使用同一種語言來共享代碼，總體說來有三種技術實現：

1. Shared Projects：可以在里面添加供三個平台公用的代碼，圖片和多媒體文件等，代碼部分可使用#if __ANDROID__等條件編譯符來指定哪一部分會編譯輸出到特定平台中。
2. Portable Class Libraries(PCLs)：使用更多的還是PCLs，PCLs庫直接就能被各個平台所引用，一些流行的庫如SQLite，Json.NET,ReactiveUI都支持PCL。
3. Xamarin.Forms：支持你用C#代碼來創建在三個平台上共享的UI界面，總共可以使用超過40個控件，它們都會在運行時映射為原生控件。

共享代碼的關系就如下圖：

Xamarin 安裝指南

工欲善其事，必先利其器。Xamarin的安裝過程參考簡書上的一篇文章，內容很齊全很詳細：http://www.jianshu.com/p/c67c14b3110c

由於牆的原因，從官網下載的安裝包無法直接安裝，可以通過安裝包中解析出配置文件，從中獲取下載路徑：
Windows下載路徑
Mac下載路徑

Windows下的大體流程如下：

1. Visual Studio肯定是需要的，推薦VS2013
2. 安裝jdk，修改環境變量
3. 安裝Android SDK，需要修改為國內鏡像
4. 安裝NDK
5. 安裝GTK
6. 安裝Xamarin.VisualStudio
7. 安裝XamarinStudio（可選）

注意6和7的版本號很重要，必須要跟Mac端相匹配，跟破解補丁的版本也需要匹配。如果以后升級，通常只需要更新6和7就可以了。

關於Android模擬器，之前折騰過不少，最后推薦一款專用於游戲玩家的Andorid模擬器，海馬玩模擬器，它的性能很好很流暢，不過游戲模擬器屏幕默認是橫屏的，第一次要手動改成豎屏。

Mac下的大體流程：
如果只考慮用Mac開發iOS程序，不考慮在Mac下開發Android程序，那么大體流程如下:

1. 安裝MonoFramework
2. 安裝monotouch
3. 安裝XamarinStudio

需要注意三者之間的版本一一對應。

關於商業證書，Xamarin的價格是很昂貴的：

上面看到的價格只是針對單用戶單設備平台，通常我們使用Xamarin都希望至少能用於Android和iOS兩個平台，所以價格還得乘以2。

安裝完畢后如果沒有購買商業證書，那么可以按照上面那篇文章來破解試用，如果使用的版本號在3.11之前，那么只需要完成離線破解，IDE不需要登陸Xamarin賬號，如果版本號在3.11之后，而且要編譯iOS（目的是為了連接Mac端的BuildHost，如果是在Mac上開發編譯iOS則不需要），那么還需要完成在線破解，具體破解流程文章里有，大體流程如下，最后提醒一下試用完了別忘了購買官方的商業授權。

離線破解流程

1. 軟件讀取機器特征碼；
2. 將特征碼通過郵件發給破解者，等待他回復授權證書，不付費證書有效期1個月，付費20元證書有效期10年；
3. 將證書和對應版本的破解文件拷貝到指定目錄。

在線破解流程

1. 郵件申請開通在線服務
2. 修改host的IP地址
3. 導入SSL證書
4. 登陸Xamarin賬號

Xamarin.Forms 程序結構

程序的目錄結構大致就可以參考這個圖，最頂上一層表示三個特定平台的工程，第二層表示一個PCL或者SAP工程，通常也是Forms所在的工程，然后引用兩個核心庫Xamarin.Forms.Core和Xamarin.Forms.Xaml，然后特定平台的工程還要引用兩個特定平台的庫，這個特定平台的庫可以讓程序集使用特定平台的API。

Xamarin.Forms 官方Demo

Xamarin提供了很多學習用的Demo，地址是：https://developer.xamarin.com/samples-all/。不過官網的網速確實太慢，在GitHub上還有更多更全的Forms的Demo：https://github.com/xamarin/xamarin-forms-samples。
其中我認為幾個比較重要的Demo可以學習一下：

• CustomRenderers：教你怎樣重寫Forms里的一些原生控件的樣式；
• Forms2Native：教你怎樣從Forms頁面跳轉到Native頁面；
• Native2Forms：教你怎樣從Native頁面跳轉回Forms頁面；
• FormsGallery：里面有幾乎全部的Forms控件展示；
• Navigation：教你Forms的App頁面導航跳轉是怎么回事；
• UsingDependencyService：教你使用依賴服務在Forms里調用Native的方法；
• XamFormsImageResize：教你圖片尺寸相關的東西；

Xamarin.Forms官方文檔

Xamarin官方提供了一套很全的在線學習指南，地址是：https://developer.xamarin.com/guides/xamarin-forms/getting-started/，這份指南目錄結構良好，便於快速查看，從怎樣開始第一個程序到后面怎樣到商城發布一應俱全。
還有一個學習途徑就是官網教材，可以免費下載離線版：https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/，教材的隨書Demo地址：https://github.com/xamarin/xamarin-forms-book-preview-2。這本教材支持Forms1.3以上，並且章節一直在保持更新，截至2016/02/25已發布到24章，Demo的核心庫已更新到2.0並且加入了UWP工程。
如果說在線學習指南可以幫助你快速入門，那么這本教程可以幫助你更細化的理解Forms程序。
下面我將24章的官方教材的目錄做個簡單介紹，后面有時間也會對重要的幾章做個更詳盡的剖析：

1. How Does Xamarin.Forms Fit In?（Forms適合什么場景）
2. Anatomy of an App（剖析一個FormsApp）
3. Deeper into Text（深入文本）
4. Scrolling the Stack（滾動面板）
5. Dealing with Sizes（處理尺寸大小）
6. Button Clicks（按鈕點擊）
7. XAML vs. Code（創建UI的兩種方式）
8. Code and XAML in Harmony（XAML和代碼的協調合作）
9. Platform-Specific API Calls（平台特定的API調用）
10. XAML Markup Extensions（XAML擴展標記語言介紹）
11. The Bindable Infrastructure（綁定的基礎知識）
12. Styles（樣式）
13. Bitmaps（位圖）
14. Absolute Layout（絕對布局）
15. The Interactive Interface（交互控件）
16. Data Binding（數據綁定）
17. Mastering the Grid（熟練掌握Grid布局）
18. MVVM（數據綁定開發模式Mvvm講解）
19. Collection Views（集合控件講解--List）
20. Async and File I/O（異步I/O操作文件）
21. Transforms（變換---縮放、定位等）
22. Animation（動畫）
23. Triggers and Behaviors（觸發器和行為）
24. Page Navigation（頁面導航）

其中我感覺有幾章比較重要，如果對Xaml（WPF主要用的界面標記語言）開發不太熟悉的同事需要看一下這幾章：

• 7.XAML vs. Code：了解Xaml和Code兩種方式來創建UI界面
• 8.Code and XAML in Harmony：了解XAML和后台代碼如何協同工作
• 10.XAML Markup Extensions：了解擴展標記語言
• 11.The Bindable Infrastructure：了解綁定的基礎知識
• 16.Data Binding：更深入的了解數據綁定
• 18.MVVM：了解基於數據綁定的UI開發模式Mvvm

要對Forms的細節有深入理解看下面幾章：

• 3.Deeper into Text：深入理解文本
• 5.Dealing with Sizes：深入理解如何處理尺寸大小，重點也是拿文本舉例，教你如何理解移動開發里面像素、物理尺寸（英尺、厘米）、DPI、DIU，主要思想反正就是不要去關注表示大小的那些數值，字體應該使用字體枚舉，布局應該是用比例去控制，要充分相信Xamarin平台能幫你控制好大小尺寸。
• 13.Bitmaps：了解怎樣在Forms中使用圖片，也是滿滿的都是坑，顯示在界面上的圖片體積一定要盡量的小，不要將一張原始尺寸的圖片加載成縮略圖然后放在列表中顯示，否則程序一定會內存溢出，一定要對圖片進行裁剪，將適合的體積的圖片用在適合的地方。從這一章中還可以學習圖片在具體平台下的用法和差異等。
• 19.Collection Views：了解集合控件，列表在App當中用得非常普遍，所以應當着重了解。
• 20.Async and File I/O：在Xamarin中只能使用異步IO（或者說是PCL中只能使用異步IO），從趨勢看未來的.Net Core可能也只支持異步IO、異步Http請求等，感覺這種更重視性能的IO思想是未來框架的趨勢，所以可以借此熟悉一下，C#的異步語法應該算是眾多編程語言中的佼佼者了。

下面對第五章Dealing with Sizes稍作講解，這章重點介紹了移動平台下尺寸相關的一些知識，先看下下面兩個表格：

型號	iPhone 2，3	iPhone 4	iPhone 5	iPhone 6	iPhone 6 Plus
像素尺寸	320x480	640x960	640x1136	750x1134	1080x1920
屏幕尺寸	3.5英寸	3.5英寸	4英寸	4.7英寸	5.5英寸
像素密度	165 DPI	330 DPI	326 DPI	326 DPI	401 DPI
單位點包含像素數量	1	2	2	2	3
點數尺寸	320x480	320x480	320x568	375x667	414x736
每英寸包含點數量	165	165	163	163	154

 

屏幕類型	WVGA	WXGA	720P	1080P
像素尺寸	480x800	768x1280	720x1280	1080x1920
縮放比例	1	1.6	1.5	2.25
DIUs尺寸	480x800	480x800	480x853	480x853

第一張圖是iPhone下的一些尺寸元素間的關系，第二張是WinPhone的，這里沒有給出Android的，其實Android整體上說來跟iPhone的那些參數很相似。
Forms中真正使用的不是像素，而是點數，點里面包含的像素數量是不一致的，像iPhone2，3基本上是一一對應，一個點包含一個像素，iPhone4，5，6就是兩倍像素，iPhone6Plus就是三倍像素，所以iPhone的圖片里出現@2x，@3x這些標識就是對應平台所使用的像素不同的圖片。我們在Forms中使用的那些表示寬高的值就是這種點數單位，要知道設置的這些值可以獲取整個頁面的Width和Height值。
下面說下字號，Forms提供了幾種枚舉字號：Default，Micro，Small，Medium，Large，在不同的設備，不同的用戶系統字號設置，不同的控件中，相同的枚舉返回的字號數值可能都不一樣。通過Device.GetNamedSize方法獲取的FontSize值的單位是double，表示文本字符從最下面到最上面到高度，字體的寬度一般都是FontSize值的一半，字體的行距一般是FontSize值的1.2倍。

Forms中UI布局細節

在Forms中設計各種元素布局等細節依然可以參考設計網頁采用的盒模型的思想。從大的塊元素的分離到小如一個文字，都可以想象成一個個小盒子。由內容區，內邊距，邊框，外邊距組成。

Forms中還有幾個比較容易混淆的類：ContentView，Frame，BoxView。
雖然可以按照盒模型的思想來布局元素，但是Forms中沒有標准的margin的概念，Forms的做法是在一個內容視圖外面再嵌套一個ContentView，ContentView繼承自Layout，只多了一個Content屬性來存放內容視圖。此時，ContentView的Padding屬性就可以想象成盒子的Margin。
Frame在布局中也比較常用，通常用於定義頁面中一組視圖的區塊，它繼承自ContentView，多了些邊框、陰影等屬性。
BoxView是一個矩形填充區，在Forms中用得最多的地方就是用它來繪制橫線、豎線等分割線。雖然看起來很山寨，但它卻是是Forms中的一個標准用法。

APP的發布

前面教程重點是介紹Xamarin.Forms相關的東西，對於平台特定的那些沒有做介紹，比如平台和Forms之間的交互（依賴注入，前面的Demo介紹PPT有），比如最后APP的發布，發布相關的東西參考前面提到的在線教程：

Android發布教程

我們項目中的Android安裝包沒有發布進商城，是通過網址直接下載，所以發布教程沒有驗證：https://developer.xamarin.com/guides/android/deployment,_testing,_and_metrics/publishing_an_application/

iOS發布教程

iOS需要發布，流程主要是有很多和apple打交道的地方比較麻煩，比如說開發者證書，AppStore證書，用特定的證書打包你的IPA，提交到itunesconnect，審核等等，Xamarin的教程如下：https://developer.xamarin.com/guides/ios/deployment,_testing,_and_metrics/app_distribution/

Xamarin組件商店的使用

Xamarin有自己的組件商店，里面有很多免費和收費的組件，剛開始就在這上面找東西，不過網速實在不可恭維，后來發現免費插件這上面有的GitHub上幾乎都有，所以使用GitHub又快又方便。
如果要在組件商店中下載需要注意最后一步需要FQ，因為網站用了google提供的jquery庫：https://components.xamarin.com/
GitHub上Xamarin提供的一個常用的免費插件目錄，這個插件庫里有Xamarin官方的也有第三方的。我們的項目所使用的插件大多來自這個目錄，里面有插件的NuGet和GitHub地址： https://github.com/xamarin/plugins
GitHub上Xamarin官方插件庫的源代碼： https://github.com/jamesmontemagno/Xamarin.Plugins

GitHub上去找東西

在GitHub上使用“Xamarin.Forms”為關鍵詞進行搜索，可以快速找到相關資源。

• Xamarin-Forms-Labs：這個庫很大，包含的東西很多，IOC容器、序列化組件、緩存組件、UI控件等，我們用得最多的還是UI控件。但是用法不是像其他插件一樣直接引用它的相關dll（之前嘗試過很久，直接使用會導致莫名其妙的問題），而是直接拷貝代碼到我們項目中直接用，但是這個庫也正如它的名字一樣，是實驗性的，在GitHub介紹上也可以看到可用控件里幾乎所有控件都是beta狀態，我們在使用過程中也發現了不少Bug，所以項目里的代碼有所改動，跟以前應該不太一樣了。我們項目里參考並使用的控件有Checkbox、RadioButton等。
• XamarinFormsGestureRecognizers：這個沒有使用過，從說明來看是一個手勢功能相關的庫。XamarinForms里的控件默認只有Tap點擊事件，其他手勢操作都在平台內部，這個庫就是教你怎樣將它們連接起來，然后在PCL中寫針對控件的手勢操作代碼。

IDE技巧

• Android很簡單，在Windows上啟動海馬玩模擬器，模擬器啟動時間比較長，但啟動好之后就可以不用關了，然后只需要用Visual Studio設置Android項目為啟動項，附加到模擬器進行調試即可；真機用Usb連接使用同樣的方式在IDE里調試。
• iOS比較麻煩，需要打開Mac電腦上的BuildHost（如果Mac不在身邊，可使用遠程軟件tightvnc操作，不過一台Mac同時只能供一人使用），然后Visual Studio設置iOS為啟動項，可自動尋找局域網內的Mac電腦上的BuildHost，然后輸入配對碼即可連接成功，如果失敗請重啟BuildHost再試；真機調試一樣，不過真機只能連接在Mac電腦上。

一些常用插件

Forms中插件的使用也比較簡單，基本上用一次就會了。首先，插件的使用方式都很統一，Forms的PCL中一般引用兩個庫,兩個庫都是PCL的，一個帶Abstractions后綴，里面只定義了接口和實體，不包含邏輯代碼；另一個不帶Abstractions后綴，就像工廠一樣，只負責創建Abstractions程序集里定義的那些接口的實現者，創建的方式不是使用前面提到的Xamarin提供的依賴注入（ UsingDependencyService ），而是條件編譯的方式直接New對應平台的實現者。在Andorid和iOS（或者WP）里引用了帶Abstractions后綴的程序集，然后引用一個真正的屬於該平台的程序集（非PCL，可以調用平台特殊API），這個程序集實現了Abstractions程序集里的接口，它的實例化對象在運行時被真正使用。如果我們自己寫插件就可以使用Xamarin提供的依賴注入的方式，在特定平台內部寫好功能類，然后在PCL中直接導出就可以使用了。
然后下面列出一些常用插件：

• Corcav.Behaviors：幫助你將列表的每一項綁定命令到這個列表的BindingContext，而不是具體項的BindingContext，幫助將事件轉為命令，Xamarin自身不帶這個功能。
• EZ-Compress-for-Xamarin ：壓縮圖片流的庫。
• MvvmLight：Mvvm開發模式的支持庫，還用到了里面的Ioc容器（SimpleIoc，我們系統里有兩套Ioc容器，一個就是這個，另一個是Xamarin的依賴注入容器）；還用到了它提供的導航組件。
• Xam.Plugins.Messaging：提供打電話、發短信、發Email等功能。
• Media.Plugin：提供拍照、選照片的功能。
• PCLStorage ：跨平台的異步I/O庫。
• Vibrate：提供了手機震動的功能。
• Toasts.Forms.Plugin ：頂部的那個彩色浮動提示框。

然后一些用得比較多的UI組件有：圓形圖片、Checkbox、RadioButton、圖片選擇器等，有自己寫的，也有在Xamarin-Forms-Labs的基礎上改的。
Andorid使用插件時注意在工程的Properties的AndroidManifest.xml中寫入對應的權限。

Xamarin官方論壇

遇到疑難的問題，上Xamarin官方論壇搜索，大部分你遇到的問題上面應該都會有，基本用不着主動提問，這個地址我認為訪問頻率相當高，地址如下：http://forums.xamarin.com/

沒有涉及到的東西

本教程沒有涉及到GIS相關的內容。
沒有對特定平台內部相關知識介紹，我們團隊的成員對平台特定API都了解太少，特別是涉及UI方面的，要掌握這些知識的難度跟學習原生開發無異，所以對一些難題解決起來比較費力，比如之前的Android和iOS的Tab頁樣式差異問題（Android的Tab在屏幕上面，iOS的Tab在屏幕底部）。因為Tab屬於頁面，跟控件不一樣，不能使用CustomRenderers的技術重寫樣式，在論壇上搜索的結果如下：
http://forums.xamarin.com/discussion/54668/bottom-tab-bar-menu-for-android
https://forums.xamarin.com/discussion/10004/tabs-on-the-bottom-for-android-example-code
http://forums.xamarin.com/discussion/56320/is-there-any-way-to-show-tabs-on-bottom-in-android-using-tabbedpagerenderer
主要意思先是從設計的角度強調不要進行這樣通用的設計，如果一定是通用樣式那么給出的解決方案也是平台內部的，首先不說技術門檻，這個實現方式跟Forms的思想就是有沖突的，所以最好的方案就是在新APP里用Forms純手寫Tab頁面。

資源匯總

官方Demo：
https://developer.xamarin.com/samples-all/
https://github.com/xamarin/xamarin-forms-samples
官方程序安裝地址：
https://static.xamarin.com/installer_assets/v3/Windows/Universal/InstallationManifest.xml
https://static.xamarin.com/installer_assets/v3/Mac/Universal/InstallationManifest.xml
windows下的ios模擬器
最新的版本信息查詢地址：
https://developer.xamarin.com/releases/current/
一個博客提供的最新下載地址：
https://www.coderbusy.com/archives/256.html?from=groupmessage&isappinstalled=0
可根據以上版本號手動構造下載地址如下：
Win:
http://dl.google.com/android/ndk/android-ndk-r10e-windows-x86_64.exe
http://dl.google.com/android/installer_r24.4.1-windows.exe
http://download.xamarin.com/GTKforWindows/Windows/gtk-sharp-2.12.30.msi
https://dl.xamarin.com/XamarinforVisualStudio/Windows/Xamarin.VisualStudio_4.2.1.58.msi
http://download.xamarin.com/studio/Windows/XamarinStudio-5.10.3.26-0.msi
Mac:
http://download.xamarin.com/Installer/MonoForAndroid/jdk-7u71-macosx-x64.dmg
http://dl.google.com/android/android-sdk_r24.4.1-macosx.zip
http://dl.google.com/android/ndk/android-ndk-r10e-darwin-x86_64.bin
http://dl.xamarin.com/MonoFrameworkMDK/Macx86/MonoFramework-MDK-4.6.2.7.macos10.xamarin.universal.pkg
https://dl.xamarin.com/MonoDevelop/Mac/XamarinStudio-6.1.2.44.dmg
https://dl.xamarin.com/MonoTouch/Mac/xamarin.ios-10.2.1.5.pkg
http://dl.xamarin.com/MonoforAndroid/Mac/xamarin.android-7.0.2-37.pkg
http://dl.xamarin.com/XamarinforMac/Mac/xamarin.mac-2.10.0.113.pkg
官方文檔：
https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/
官方教材：
https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/
https://github.com/xamarin/xamarin-forms-book-samples/
官方論壇：
http://forums.xamarin.com/
常用插件：
https://github.com/xamarin/plugins
https://github.com/jamesmontemagno/Xamarin.Plugins
https://components.xamarin.com/
https://github.com/XLabs/Xamarin-Forms-Labs
MvvmCross
https://github.com/MvvmCross/MvvmCross
https://github.com/MvvmCross/MvvmCross-Plugins