Xamarin.Forms入門學習路線

原文鏈接:https://www.cnblogs.com/qinjin/p/XamarinForms-LearningPath.html

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可以學習一下:

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又快又方便。
如果要在組件商店中下載需要注意最後一步需要翻牆,因爲網站用了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,所以項目裏的代碼有所改動,跟以前應該不太一樣了。我們項目裏參考並使用的控件有CheckboxRadioButton等。
  • 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組件有:圓形圖片、CheckboxRadioButton、圖片選擇器等,有自己寫的,也有在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

 

 

 

https://docs.microsoft.com/zh-cn/xamarin/cross-platform/samples/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章