# Xamarin - 使用 Xamarin.Forms 構建跨平臺用戶體驗 通過?[Keith Pijanowski](https://msdn.microsoft.com/zh-cn/magazine/mt149362?author=Keith+Pijanowski)?|2015 年 12 月 |?[獲取代碼](http://download.microsoft.com/download/D/5/4/D54647CC-A404-4374-B7EF-E469FB5136B9/Code_Pijanowski.Xamarin.1215.zip) 如果您已決定使用 Xamarin 進行試驗，則您已決定啟動令人興奮之旅。與其他開發工具，它將您綁定到單個平臺，Xamarin 為四個不同的平臺，可以訪問。借助 Xamarin，您可用于您的 C# 技能編寫適用于 iOS、 Android、 Windows Phone 和 Mac OS X 應用程序。請務必注意 Xamarin 提供了完全本機體驗。獲取本機性能，完成在所有平臺和本機 UI 上的 API 訪問。本文將重點介紹三個移動平臺支持的 Xamarin: iOS、 Android 和 Windows Phone。 使用 Xamarin 的優勢是令人興奮，原因有多種。原因之一是使用平臺 Xamarin 是它們充滿樂趣。Xamarin 是了解在同時使用 C# 技能的更多詳細信息中的所有這些平臺的天堂。而無需在多個工作區 (Xcode、 Android Studio/Eclipse 和 Visual Studio) 中工作的多種語言 (C#、 Java 和目標的 C/Swift)，您可以在一個熟悉的環境 (Visual Studio) 使用一種語言 (C#) 進行工作。 也有幾個使用 Xamarin 開發應用程序的財務優點。借助 Xamarin，您可以創建一個單一的解決方案可以呈現 iOS、 Android、 Windows Phone 上的應用程序的版本和設置這些平臺表示顯著的成本節約和工作效率提升之間重用 OS x。 代碼重用和技能。當涉及到從中獲利您的應用程序時，基本的經濟性決定，增加了潛在客戶創建更多的機會，為獲取更多付費客戶。總體來說，Xamarin 所支持的三個移動平臺在全球范圍內表示 98%以上的所有移動設備。 最后，如果您是構建移動企業業務線 (LOB) 應用程序，然后讓創建相關的所有平臺的解決方案的功能意味著，員工可能使用他們自己的設備進行工作。 ## 傳統的 Xamarin 方法 傳統 Xamarin 解決方案，它支持所有三個移動平臺由作為最低保護措施的四個項目組成 — 可移植類庫 (PCL) 和每個平臺的特定于平臺的項目。PCL (或共享的代碼項目) 包含模型、 數據訪問代碼和業務邏輯。PCL 中的代碼可以引用，并可以重復使用從其他項目。但是，Pcl 包含任何 UI 代碼。UI 代碼都保留在特定于平臺的項目。也很重要注意的是傳統的 Xamarin 旨在提供本機編程環境以及它們所代表的平臺的功能奇偶校驗。你可以在 OBJECTIVE-C、 Swift 或 Java 實現的所有內容可以在 C# 中使用 Xamarin 和 Visual Studio。您想要訪問在 iOS、 Android 和 Windows Phone 可以; 上的任何 APIXamarin 具有 100%本機 API 訪問權限。此代碼也是特定于平臺的項目中。 在傳統的 Xamarin 方法將允許您在共享大量的代碼時，沒有一種方法來共享更多的代碼。 ## 輸入 Xamarin.Forms Xamarin.Forms 進一步推送信封的情況下，仍談到可重用性。具體而言，Xamarin.Forms 同時還允許跨平臺重用的 UI 邏輯提供傳統方法所有的優點。Xamarin.Forms 解決方案仍然結構化方式與傳統的 Xamarin 相同，但是，PCL 現在可以包含用戶界面代碼。有關項目設置和房子映像和其他資源，則跨平臺的不同，仍需要特定于平臺的項目。 它也就的不足為奇 Xamarin 的人員也會嘗試執行此操作。即使 iOS、 Android 和 Windows Phone 的目的是不同的體系結構設計師，并且在不同屋頂下長大，還有大量其 Ui 的通用性。用戶一次查看一頁內容。此外，許多控件在平臺之間很相似。示例、 文本框、 下壓按鈕、 單選按鈕、 標簽，列表視圖和圖像控件是相對相同的跨平臺。總的來說，Xamarin.Forms 附帶了 40 控件、 七個布局和五種頁面類型用于構建本機 Ux。 Xamarin.Forms 采用的編程模型是 XAML / C#。頁面、 布局和控件可以使用 XAML 中與在 Windows Phone 項目中創建的頁更相同的方式指定。也可以完全在代碼中創建頁面、 布局和控件。這兩種方法將在本文中所示。 當使用 Xamarin.Forms 什么可能會比較棘手是設計和實現用戶界面，可以將組織應用程序的功能和內容。這必須在最大化代碼重用在生成的應用程序很自然要使用每個平臺上的相同時間一種方法中完成。為此，Xamarin 提供了五種頁面類型來提供常見 UI 方案: 用于顯示基本內容，則內容頁用于提供導航功能; 導航頁用于創建具有跨頂部或底部的屏幕; 選項卡頁的選項卡式的頁面跨兩個窗格的信息; 提供高級的數據和詳細信息數據的母版-詳細信息頁和用于創建水平滾動內容的頁面的輪播頁。本文將演示每種方案的 Xamarin.Forms 解決方案，通過討論每個五種頁面類型。頁面布局和 Xamarin.Forms 附帶的 UI 控件也會顯示此過程。 ## 顯示內容 在屏幕上顯示的基本內容是通過內容頁。圖 1?顯示用于捕獲用戶反饋的頁面的 XAML。 圖 1 的內容頁面的 XAML ~~~ <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" ? xmlns:x="http://schemas.microsoft.com/winfx/2009/XAML" ? x:Class="XamarinFormsTestHarness.FeedbackPage" ? Title="Feedback"> ? <StackLayout Padding="10,10,10,10"> <Label Text="Name:" FontAttributes="None" FontSize="Medium" TextColor="#3498DB"/> ? <Entry Text="{Binding Name}" Placeholder="First and Last" Keyboard="Default"/> ? <Label Text="Email:" FontSize="Medium" TextColor="#3498DB" /> ? <Entry Text="{Binding Email}" Placeholder="name@company.com" Keyboard="Email" /> ? <Label Text="Feedback:" TextColor="#3498DB" FontSize="Medium"/> ? <Editor Text="{Binding Text}" HeightRequest="200" BackgroundColor="Gray"/> ??? <Button x:Name="ButtonSubmitFeedback" Text="Submit" ????? BackgroundColor="#3498DB" ????? TextColor="White" ????? Command="{Binding SaveFeedbackCommand}"/> ? </StackLayout> </ContentPage> ~~~ 中的 XAML?圖 1?使用堆棧布局來組織標簽、 項、 編輯器和按鈕等基本控件。作為 Xamarin.Forms 本機功能的示例，在 iOS 上一項呈現為 UITextField、 EditText 為 Android 和文本框中為 Windows Phone。 需要注意的一點說明: Xamarin XAML 是不同于 Windows Phone XAML。不能使用從 Windows Phone 頁面的 XAML，并將其放到 Xamarin 內容頁。例如，如果您習慣于使用邊距和填充屬性對您的控件的位置進行細微調整，則您將不高興，若要了解這些屬性不可用許多 Xamarin.Forms 控件中。此外，許多控件和它們的屬性具有與它們對應的 Windows Phone 相比不同的名稱。這些差異可能看起來像一種新產品的癥狀。在許多情況下這可能是為 true，但還請記住 Xamarin 并非僅針對 Windows Phone 開發人員。Xamarin 旨在提供了用于所有背景的移動開發人員環境。如果某個控件以它在 Window Phone 不名為相同，可能會使用 Xamarin 的名稱是來自于 Android 或 iOS 的名稱。 內容頁是用于所有其他頁類型的構造塊。輪播頁面、 選項卡式頁面、 導航頁和母版詳細信息頁面使用內容頁來生成其 Ux。 ## 母版詳細信息方案 母版詳細信息方案都是在移動應用程序中很常見。因此，Xamarin 生成特定的頁面類型來處理此情況。母版詳細信息頁上可用的應用程序功能或應用程序數據進行組織。例如，管理客戶和訂單的應用程序，客戶的列表可以顯示在主頁面。一旦在用戶觸摸特定客戶，則可以在詳細信息頁顯示該客戶的所有訂單。母版詳細信息頁面也用于顯示應用程序的菜單選項。在此方案中，主頁面顯示應用程序中可用的功能列表和每個詳細信息頁會提供相應的功能。圖 2?顯示了使用作為適用性應用程序的主菜單的母版詳細信息頁的構造函數代碼。圖 3?演示如何在主機頁面全部呈現在每個平臺。主頁面全部呈現在 iOS 和 Android 作為從屏幕的左邊算幻燈片中的彈出菜單。在 Windows Phone 上它將呈現為一個完整的頁。當用戶按某個選項時，它們都會轉到合適的頁面。 圖 2 母版詳細信息頁的代碼 ~~~ using System; using Xamarin.Forms; namespace XamarinFormsTestHarness { ? public class MasterDetailControlPage : MasterDetailPage ? { ??? public MasterDetailControlPage() ????? { ????? MenuPage menuPage = new MenuPage(); ????? menuPage.MenuListView.ItemSelected += (sender, e) => ??????? MenuSelected(e.SelectedItem as MenuItem); ????? // The Detail page must be set or the page will crash when rendered. ????? this.Master = menuPage; ????? this.Detail = new NavigationPage(new FeedbackPage()); ????? this.IsPresented = true; ????? } ??????? ... ? } } ~~~  在 iOS 上 (左)、 Android (中心) 和 Windows Phone (右) 呈現的圖 3 母版詳細信息頁 有很多值得注意的代碼中的相關事實?圖 2?以使其易于理解。首先，母版詳細信息頁實際上是一個控制器。它不包含主機的 UX 頁或任何詳細信息頁。這些頁面并在單獨的文件。其工作就是顯示的正確頁面，基于用戶的請求。在?圖 3?主頁面是一個名為 MenuPage 的內容頁。MenuPage 會實例化并將母版詳細信息頁的屬性設置到 Master。為簡潔起見，此處顯示并不 MenuPage 的 XAML。它可以找到本文附帶的代碼下載中。中顯示的母版詳細信息頁面?圖 2?也不包含任何詳細信息頁的用戶體驗。它們也在單獨的文件中。實例化和設置到母版詳細信息頁的詳細信息屬性，當用戶選擇菜單選項的詳細信息頁。 母版詳細信息頁這兩個主構造函數中設置頁和詳細信息頁。在最初顯示是否未設置這兩個屬性時，將 bomb 母版詳細信息頁。 它還是必須了解 IsPresented 屬性。此屬性指示是否為主頁顯示給用戶。如果設置為 True 則主頁面，顯示。如果設置為 False，則將顯示當前的詳細信息頁。 Windows Phone 將整個 Master 頁上為單個頁面視圖的體驗。換而言之，當用戶導航到詳細信息視圖時 Windows Phone 并不將其視為標準頁面導航。當用戶點擊后退按鈕上的詳細信息視圖時，用戶將進入到母版詳細信息頁的初始導航之前所示的頁面。這是用戶體驗較差，因為用戶很可能想要被帶回母版的母版詳細信息頁面的視圖。要解決這個問題 Xamarin.Forms 允許 OnBackButtonPressed 事件中被重寫。由于所有 Windows Phone 和 Android 設備都有一個后退按鈕，將在 Windows Phone 和 Android 上調用此事件。如果您的應用程序在 iOS 上運行，因為 iOS 沒有后退按鈕，則不會調用此事件。在 iOS 中用戶可以通過點擊母版頁圖標導航回母板頁，必須先將其顯示在左上方的所有詳細信息頁。務必要始終設置主文件夾頁的 icon 屬性，否則用戶將被限制在其中一個沒有辦法回到主頁面與應用程序的詳細信息頁上。 ## 應用程序導航 導航頁上管理適用于 iOS 和 Android 的頁面導航。NavigationPages 是推送/彈出導航。將新的頁推送到堆棧的頂部，然后將其彈出。跟蹤所有導航都的 Windows Phone 操作系統，并且所有 Windows Phone 設備上都安裝硬件后退鍵。因此，用戶始終可以返回到上一屏幕。因此，在 Windows Phone 上導航頁上不起作用。 適用于 iOS 和 Android 導航頁會提供較頁頂部的鏈接的形式顯示當前頁的標題和標題的前一頁的用戶體驗。根頁將只包含頁的標題。如果用戶期望觸控前一頁的標題它們是帶回前一頁。 使用導航頁上的最簡單方法是在代碼中對其實例化并將一個頁面傳遞到其構造函數。下面的代碼行用于創建中的詳細信息頁?圖 2: ~~~ this.Detail = new NavigationPage(displayPage); ~~~ 導航頁是在 iOS 上尤其重要，因為它在運行沒有硬件的設備后退按鈕。而無需導航頁上提供的功能，用戶不具有能夠在 iOS 上返回一頁。 ## 選項卡 選項卡式頁面的 UI 將呈現為顯示在屏幕頂部或底部顯示的選項卡列表。在 iOS 上選項卡的列表顯示在該屏幕的底部，詳細信息區域上方。如果有多個選項卡不能容納在屏幕上，iOS 呈現將提供一個"更多"選項卡在屏幕上提供訪問權限，無法容納的選項。在 Android 上標簽顯示在下方的詳細信息區域在屏幕的頂部。如果該集合為太大，無法在屏幕上顯示，用戶可以水平滾動選項卡的集合。在 Windows Phone 上選項卡式頁上呈現為透視頁。 有兩種方法來創建選項卡式的頁。首先，應用程序開發人員可以內容頁面對象設置到選項卡式的頁面的 Children 屬性，如中所示?圖 4。為每一項的 Children 集合轉換，將創建一個選項卡。每一頁的標題和圖標屬性用于創建的選項卡。當每個選項卡將具有不同的外觀，并且每個選項卡中的數據不同，此方法很有用。圖 5?演示如何從選項卡式的頁面?圖 4?呈現在每個平臺上。 圖 4 使用 Children 屬性創建選項卡式的頁面 ~~~ using Xamarin.Forms; namespace XamarinFormsTestHarness { ? class TabbedControlPage : TabbedPage ??? { ??? public TabbedControlPage() ????? { ????? this.Title = "My Workouts"; ????? this.Children.Add(new ThisWeek()); ????? this.Children.Add(new LastWeek()); ????? this.Children.Add(new ThisMonth()); ????? this.Children.Add(new LastMonth()); ????? this.Children.Add(new All()); ????? } ??? } } ~~~  圖 5 選項卡式頁面呈現在 iOS 上 (左)、 Android (中心) 和 Windows Phone (右) 若要創建選項卡式的頁面的另一種方法是將分配到該選項卡式的頁面的 ItemsSource 屬性從同一個類實例化的對象的列表。將創建此列表中的每個對象的一個選項卡。然后必須將 DataTemplate 設置到選項卡式的頁面的 ItemTemplate 屬性。必須使用數據綁定來從 ItemSource 屬性中的相應對象中獲取數據的內容頁面從創建 DataTemplate。請務必將此內容頁面的 title 屬性綁定到綁定的對象中的屬性。Title 屬性將用于創建選項卡標簽。此內容頁面的其余部分可能用于將綁定到其他屬性的綁定對象中。此方法是最適合于每個選項卡會顯示不同的數據相同的用戶體驗的選項卡式頁面。 ## 傳送帶 輪播頁的用戶界面使用戶可以刷從端到端屏幕以顯示不同頁的內容。Windows Phone 開發人員會將識別輪播頁上，為全景圖。輪播頁包含 Children 屬性選項卡式頁面一樣。若要創建輪播頁，設置到輪播頁上的子屬性的內容頁面對象。每個內容頁將呈現為內容的屏幕。輪播頁中不使用每個內容頁面的 Title 屬性。(這是在每個標題用作選項卡標題的選項卡式頁面。) 因此，如果對于每個屏幕，你需要一個標簽，您將需要手動為內容頁面內容的一部分實現這一方案。圖 6?顯示此頁上的每個平臺的呈現方式。請注意，在 iOS 和 Android 上沒有任何可見線索，通知用戶的其他內容的左側或右側的當前視圖。Windows Phone 實現這一點顯示頁面標題的一部分。出于此原因，使用要小心輪播在 iOS 和 Android。用戶可能會錯過您的應用程序中的重要內容。  圖 6 輪播呈現頁面在 iOS 上 (左)、 Android (中心) 和 Windows Phone (右) ## 為三個平臺設計 如果您熟悉使用所有三個平臺然后此時您可能已發現每個 Xamarin.Forms 頁面類型表示具有所需的平臺之一中的 UI 方案和創造性地然后中與其他兩個實現。例如，需要提供到以前的頁面的鏈接的導航頁面以在 iOS 上提供后退鍵功能，因為 iOS 沒有后退鍵。導航頁還呈現了在 Android 上以類似的方式因為即使 Android 具有后退鍵中具有指向當前頁的頁首以前訪問過的網頁的鏈接是在 Android 上的常用 UI 結構。 同樣，在 iOS 和 Android 上經常使用的選項卡。因此，Xamarin.Forms 需要在工具箱中具有此 UI 結構。在 Windows Phone 上選項卡將呈現為透視頁，它是操作系統的基本組成部分。 母版詳細信息頁會提供彈出面板，有時在 iOS 和 Android 使用。 最后，Windows Phone 具有全景圖頁的概念。全景圖頁面最適合用作應用程序的主頁。全景圖頁面的目的是提供應用程序的高級視圖。設計良好的全景圖頁就像雜志的封面。它使用戶快速瀏覽一下在包含的內容。如果是以極具吸引力的方式，全景圖會將用戶進一步拉入應用程序。水平輕掃屏幕的內容之間的想法并不 iOS 和 Android 中常見的情形。因此，必須小心 Xamarin.Forms 應用程序中使用輪播頁面時。 Xamarin.Forms 作為平臺的發展演變，很可能添加類型的詳細頁面。Xamarin 開發人員必須設計責任看一看每種頁面類型，并確定是否有對其應用程序以之為目標的所有平臺而言非常重要。 ## 總結 Xamarin 提供兩種主要方法構建共享代碼的本機應用程序: 傳統的 Xamarin 和 Xamarin.Forms。選擇正確的方法取決于您的構建。 如果您的應用程序需要每個平臺上的專用的交互和利用了許多特定于平臺的 Api，使用傳統的 Xamarin 方法。傳統的 Xamarin 還提供了構建 Ui 自定義的每個平臺的能力。 Xamarin.Forms 是一個完整的框架，構建本機應用程序使用單一、 共享代碼庫。請考慮 Xamarin.Forms，如果您是原型，構建數據輸入應用程序或您的應用程序所要求的一些特定于平臺的功能。Xamarin.Forms 規則也適用于項目共享代碼所在比為每個平臺的自定義 UI 更重要。 * * * Keith Pijanowski?*是工程師、 企業家和商人。他在軟件行業有 20 多年的經驗，就職的公司既有初創公司也有大型公司，從編寫代碼到業務拓展均有涉獵。與他聯系。?[keithpij@msn.com](mailto:keithpij@msn.com)?或在 Twitter 上:[@keithpij](https://twitter.com/@keithpij)。*