2015 年 12 月

第 30 卷,第 13 期

本文章是由機器翻譯。

Xamarin - 使用 Xamarin.Forms 建置跨平台 UX

Keith Pijanowski

如果您決定要試驗 Xamarin 您已決定啟動令人興奮的旅程。不同於其他開發工具,將在單一平台,Xamarin 可讓您以四個不同的平台。有了 Xamarin,您可以使用 C# 技術撰寫用於 iOS、 Android、 Windows Phone 和 Mac OS X 應用程式。請務必注意 Xamarin 提供完整原生經驗。您取得原生的效能,請完成所有平台和原生 UI 上的 API 存取。本文將著重在三個行動平台支援的 Xamarin: iOS、 Android 和 Windows Phone。

使用 Xamarin 的優點是令人興奮的原因有許多種。其中一個原因是,使用平台 Xamarin 是起來樂趣無窮。Xamarin 是遊樂場,若要了解雖然同時使用 C# 技能的更詳細的上述所有平台。您可在一個熟悉環境 (Visual Studio) 使用一種語言 (C#),而不需使用多個工作區 (Xcode、 Android Studio/Eclipse 和 Visual Studio) 中使用多種語言 (C#、 Java 和目標的 C/Swift)。

另外還有幾個財務使用 Xamarin 開發應用程式的優點。有了 Xamarin,您可以建立單一的解決方案,可以呈現在 iOS、 Android、 Windows Phone 應用程式的版本和 OS X 的程式碼重複使用及技術設定這些平台表示顯著的成本節約和產能提升之間重複使用。說到鑄造應用程式,基本的經濟體系規定的潛在客戶數目增加,會建立更多的機會,取得更多的付費客戶。以下合稱 Xamarin 所支援的三個行動平台代表全球超過 98%的所有行動裝置。

最後,如果您的建置行動企業特定業務 (LOB) 應用程式,然後讓建立的所有相關的平台解決方案的能力會表示員工可能會使用自己的裝置來工作。

傳統的 Xamarin 方法

支援所有的三個行動平台的傳統 Xamarin 解決方案由至少四個專案組成 — 可攜式類別庫 (PCL),以及每個平台特定平台專案。PCL (或共用程式碼專案) 包含模型、 資料存取程式碼和商務邏輯。PCL 中的程式碼可以參考和其他專案中重複使用。不過,PCLs 包含沒有 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 現在可包含 UI 程式碼。平台特定專案所需要的專案設定和房子映像和其他資源,跨平台而不同。

就不會對 Xamarin 的人一定會嘗試執行這項操作。即使 iOS、 Android 和 Windows Phone 不同的架構設計人員所構想,而且在不同的屋頂長大,仍會有很多共同性他們的 Ui。使用者一次檢視一頁內容。此外,許多控制項都具有類似的平台。如範例、 文字方塊、 按鈕、 選項按鈕、 標籤、 清單檢視和影像控制項相當相同跨平台。總而言之,Xamarin.Forms 隨附 40 控制項、 七個版面配置和五個的頁面類型建置原生 UXes。

Xamarin.Forms 所採用的程式設計模型是 XAML / C#。指定頁面、 配置和控制項,可以使用許多相同的方式來建立 Windows Phone 專案中的資料頁中的 XAML。頁面、 配置和控制項可能也會建立完全以程式碼。在本文中,將會顯示這兩種技術。

使用 Xamarin.Forms 時很難是設計和實作 UI,可將組織您的應用程式功能和內容。這必須完成以達到最大重複使用程式碼時同時產生,則在每個平台上使用的應用程式的方式。為了這個目的,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 為 TextBox。

請小心記下: Xamarin XAML 是從 Windows Phone XAML 不同。您無法從 Windows Phone] 頁面的 XAML 而拖放到 Xamarin 內容頁面。例如,如果您是使用邊界和邊框間距屬性用來進行細微調整控制項的定位,則您會不滿意,若要了解這些屬性都無法使用的許多 Xamarin.Forms 控制項。此外,許多控制項,以及其屬性具有不同的名稱,相較於其 Windows Phone 對應項目。這些差異看起來像是新產品的徵兆。在許多情況下這可能是 true,但也請記住,Xamarin 不是只適用於 Windows Phone 開發人員。Xamarin 的目標是提供的所有背景行動開發人員的環境。如果特定的控制項不名為相同在 Windows Phone 中,可能是會以 Xamarin 正在使用的名稱是來自 Android 或 iOS 的名稱。

[內容] 頁面是所有其他網頁型的建置組塊。旋轉木馬頁、 索引標籤式頁面、 巡覽頁面和主版詳細資料] 頁面使用的內容頁面來建立其 UXes。

主版詳細資料案例

主版詳細資料案例是在行動應用程式中很常見。因此,Xamarin 建置特定的分頁類型,以解決這種情況。主版詳細資料頁面可以用來組織應用程式的功能或應用程式資料。比方說,客戶和訂單管理應用程式,一份客戶清單可以顯示在主頁面。一旦使用者會牽涉到特定的客戶,該客戶的訂單可以顯示詳細資料] 頁面中。主版詳細資料網頁也可用來顯示應用程式的功能表選項。在此案例中,主版頁面會顯示一份應用程式中提供的功能,以及每個詳細資料] 頁面會提供適當的功能。圖 2 顯示主功能表或應用程式所使用的主版詳細資料頁面的建構函式程式碼。圖 3 示範如何主版頁面呈現每個平台上。主版頁面 iOS 和 Android 上呈現為投影片中,從螢幕左邊的 popover 功能表。在 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 主版詳細資料頁面呈現在 iOS 上 (左)、 Android (中心) 和 Windows Phone (右)

有不少值得注意的程式碼中的事實 圖 2 使其更容易了解。首先,主版詳細資料頁面是真正控制站。它不包含主要 UX 頁面或任何詳細資料] 頁面。這些頁面是在不同的檔案。它的工作是要顯示正確的頁面,根據使用者的要求。在 圖 3 主版頁面是名為 MenuPage 的內容頁面。MenuPage 會執行個體化,並將主版詳細資料頁的屬性設定到 Master。MenuPage XAML 不是為了簡潔起見如下所示。它可以在本文所附的程式碼下載中找到。所顯示的主版詳細資料網頁 圖 2 也不包含任何詳細資料頁 UX。它們也是在不同的檔案。詳細資料] 頁面會具現化和主版詳細資料頁面的 [詳細資料] 屬性設定,當使用者選取功能表選項。

在這兩個主要的 [主版詳細資料] 頁面上的建構函式的詳細資料頁面的頁面設定。一開始顯示兩個屬性都未設定時,將轟炸主版詳細資料頁面。

它也務必了解 IsPresented 屬性。這個屬性會指出是否主版頁面顯示給使用者。如果設定為 True,則主版頁面會顯示。如果設定為 False 則會顯示目前的詳細資料頁面。

Windows Phone 視為整個主版頁面經驗為單一頁面檢視。換句話說,當使用者巡覽至詳細資料檢視 Windows Phone 不會將它視為標準頁面巡覽。當使用者點選詳細資料檢視的 [上一頁] 按鈕時,使用者將會進入之前初始瀏覽到 [主版詳細資料] 頁面上所顯示的網頁。這是不佳的 UX,因為使用者可能預期會被帶回至主要主版詳細資料頁面的檢視。若要解決這個問題 Xamarin.Forms 可讓覆寫 OnBackButtonPressed 事件。此事件會叫用的 Windows Phone 及 Android,因為所有的 Windows Phone 和 Android 裝置都有一步] 按鈕。如果因為 iOS 沒有上一頁按鈕,在 iOS 上執行應用程式,不會叫用此事件。在 iOS 上使用者時,即可導覽回到主版頁面上,點選主版頁面的圖示,這將顯示在左上方的所有詳細資料] 頁面。請務必一定會設定主版頁面的 icon 屬性,否則使用者將會被困在其中一個應用程式的詳細資料] 頁面,完全沒有辦法回到主要頁面上。

應用程式導覽

瀏覽頁面管理適用於 iOS 和 Android 的頁面巡覽。NavigationPages 會推入/彈出導覽。將新頁面推送至堆疊的頂端,然後將其。Windows Phone 作業系統會持續追蹤所有巡覽以及所有的 Windows Phone 裝置有傳回金鑰的硬體。因此,使用者可以隨時返回上一個螢幕。因此,在 Windows Phone 上瀏覽頁面沒有任何作用。

適用於 iOS 和 Android 的瀏覽頁面會提供 UX 顯示在頁面頂端的連結目前頁面的標題與前一頁的標題。根頁面只會包含頁面的標題。如果使用者接觸前一頁的標題就會進入回前一頁。

使用 [瀏覽] 頁面的最簡單方式是在程式碼中具現化,然後將頁面傳遞至其建構函式。下列程式碼行用來建立詳細資料頁中的 圖 2:

this.Detail = new NavigationPage(displayPage);

因為在其執行不需要硬體裝置的上一頁按鈕,瀏覽頁面是在 iOS 上特別重要。而不需要瀏覽頁面所提供的功能,使用者沒有在 iOS 上返回一頁的能力。

索引標籤

索引標籤式頁面的 UI 會呈現為出現在螢幕頂端或底部的索引標籤清單。在 iOS 上,索引標籤的清單會出現在畫面底部,而且在詳細資料區域上方。如果有超過可在螢幕上容納更多的索引標籤,iOS 轉譯會提供"More"的索引標籤提供在螢幕上的存取權不適合的選項。在 Android 上的索引標籤會顯示在詳細資料區域下方的螢幕頂端。如果集合是太大而無法放在螢幕上,使用者可以水平捲動索引標籤的集合。在 Windows Phone 上的索引標籤的頁面會轉譯為樞紐分析表] 頁面。

有兩種方式建立索引標籤式的頁面。首先,應用程式開發人員可以內容頁面物件在屬性中設定索引標籤式的頁面的子系,如所示 圖 4。每個項目子系集合,將會建立一個索引標籤。每一頁的標題和圖示屬性用來建立索引標籤。當每個索引標籤會有不同的外觀及操作,而且每個索引標籤中的資料不同,這個技術非常有用。圖 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());
      }
    }
}

索引標籤式頁面上呈現 iOS (左)、 Android (中心) 和 Windows Phone (右)
圖 5 索引標籤式頁面上呈現 iOS (左)、 Android (中心) 和 Windows Phone (右)

若要建立索引標籤式的頁面的另一種方式是指派從相同類別的索引標籤的頁面 ItemsSource 屬性來具現化物件的清單。這份清單中每個物件,將會建立一個索引標籤。DataTemplate 則必須設成索引標籤式的頁面的 ItemTemplate 屬性。從使用資料繫結從 ItemSource 屬性中的對應物件取得資料內容] 頁面,您必須建立 DataTemplate。請務必將此內容頁面的標題屬性繫結至繫結物件中的屬性。Title 屬性會用來建立索引標籤的標籤。此內容頁面的其餘部分可能會用來繫結中繫結物件的其他屬性。這項技術最適合索引標籤式頁面,其中每個索引標籤會有相同的 UX 顯示不同的資料。

轉盤的資訊

浮動切換] 頁面的 UI 讓使用者撥動來自螢幕側邊,以便顯示在不同頁面的內容。Windows Phone 開發人員會將旋轉木馬頁面視為全景。[浮動切換] 頁面包含 Children 屬性,如同索引標籤式頁面。若要建立浮動切換] 頁面,請在 [浮動切換] 頁面上的子系屬性中設定內容頁面物件。每個內容頁面將會轉譯為螢幕的內容。每個內容頁面的 Title 屬性不能用 [浮動切換頁面。(這是不同於索引標籤式頁面,其中每個標題做為索引標籤的標題)。 因此,如果您需要每個螢幕的標籤,然後您要實作此手動做為內容頁面內容的一部分。圖 6 顯示此頁面上每個平台的呈現方式。請注意,在 iOS 及 Android 通知使用者的其他內容,向左或右目前檢視的不可見的線索。Windows Phone 的運作方式顯示頁面標題的一部分。基於這個理由,請小心使用旋轉木馬 iOS 和 Android。使用者可能會遺漏重要應用程式中的內容。

旋轉木馬頁面呈現在 iOS 上 (左)、 Android (中心) 和 Windows Phone (右)
圖 6 旋轉木馬 iOS (左)、 Android (中心) 和 Windows Phone (右) 上呈現的頁面

為三個平台設計

如果您熟悉所有三個平台現在您已經可能發覺 Xamarin.Forms 頁面類型的每一個都代表具有需要的其中一種平台 UI 案例,以及其他兩個然後創造力對其進行實作。比方說,提供連結至前一個頁面的瀏覽網頁,才能在 iOS 上提供上一步] 鍵功能,因為 iOS 上一頁鍵。瀏覽頁面也會呈現在 Android 上類似的方式因為擁有先前瀏覽] 頁面,在目前的頁面頂端的連結是受歡迎的 UI 結構,在 Android 上,即使 Android 有上一頁鍵。

同樣地,在 iOS 及 Android 時經常使用索引標籤。因此,Xamarin.Forms 需要在 [工具箱] 中有此 UI 結構。在 Windows Phone 上的索引標籤會轉譯為樞紐分析表頁面,也就是作業系統不可或缺的一部分。

主版詳細資料頁面會提供 popover 面板,有時也適用於 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 或 Twitter: @keithpij

感謝以下技術專家對本文的審閱: 片段 Boggan (Xamarin)