天天看點

Xamarin.Forms入門學習路線Xamarin.Forms入門學習路線

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.Forms入門學習路線Xamarin.Forms入門學習路線

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.Forms入門學習路線Xamarin.Forms入門學習路線

上面看到的價格隻是針對單使用者單裝置平台,通常我們使用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 程式結構

Xamarin.Forms入門學習路線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中設計各種元素布局等細節依然可以參考設計網頁采用的盒模型的思想。從大的塊元素的分離到小如一個文字,都可以想象成一個個小盒子。由内容區,内邊距,邊框,外邊距組成。

Xamarin.Forms入門學習路線Xamarin.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,是以項目裡的代碼有所改動,跟以前應該不太一樣了。我們項目裡參考并使用的控件有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

https://github.com/xamarin/xamarin-forms-samples

https://docs.microsoft.com/zh-cn/xamarin/xamarin-forms/user-interface/picker/populating-itemssource

https://docs.microsoft.com/zh-cn/xamarin/xamarin-forms/data-cloud/web-services/asmx

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

繼續閱讀