【轉】Xamarin Forms 介紹

標籤：android   des   style   blog   http   color   使用   os   

特此聲明，本篇博文轉自：http://blog.csdn.net/kinfey/article/details/29621381

什麼是 Xamarin Forms ?

Xamarin Forms 是一個高效建立跨平台使用者介面的庫 。通過Xamarin Forms 可以一次編碼產生基於主流移動平台（iOS, Android, Windows Phone）的應用介面。和HTML 5 不同， 它是一套原生的介面解決方案，這意味著通過Xamarin Forms 渲染的介面是與底層API 緊密相連， 那你可以結合諸如iOS 中的Core Motion ， PassKit 還有StoreKit 這些API 使用 ，也可以使用諸如NFC / Google Play Service 的Android API ,當然少不了Windows Phone 的Tiles 。

Xamarin Forms 的優勢

       通過一次編碼，產生多平台介面。假若你做的工作涉及到三個平台，那你會對重重複復的介面邏輯工作厭煩，Xamarin Forms 真的是一個不錯的解決方案。

使用 Xamarin Forms

       你可以通過C#寫入程式碼方式去架構你的介面，還有你可以通過XAML方式去構建。 

Xamarin Forms 能適配的介面

Pages (頁面)

Layout(布局)

Controls(控制項)

好來看看一個簡單的例子，由於這篇文章只是初探，我只會把部分精彩的節錄下來，大家可以下載代碼細看。如果要探究就繼續關注我的blog , 接下來會陸續有關於Xamarin Forms 的更深入文章。

1. 建立Xamarin.Forms 項目

這裡需要說明一點，Xamarin Forms項目有兩種模版一種是基於Share Project ,一種是基於PCL ,這裡要看各自項目的需要，我預設選取PCL（關於兩個模版的使用，我會在之後文章和大家說說）

2. 建立成功後，會產生包含CnBetaDemo.Shared，CnBetaDemo.iOS, CnBetaDemo.Android 三個項目(如果你用Visual Studio 建立你就會有CnBetaDemo.Windows Phone 的項目) 。 CnBetaDemo.Shared就是我們需要處理的共用邏輯層和Xamarin.Forms。其餘兩個就是我們所需要對應的平台。

3.依據MVVM 方式架構我們的CnBetaDemo.Shared , 這裡不得不提到Xamarin 的原理 。Xamarin 是一個基於共用邏輯層的跨平台原生應用方案。

為何用MVVM 在我之前文章有所提及。（部落格決定放到csdn，我會遷移後貼上地址）。之前一年的做法是把邏輯共用，現在可以把頁面通過Xamarin.Forms進行構造即可，所以CnBetaDemo.Shared就成為了我們跨平台架構項目的核心代碼層。

4.  簡單看看ViewModel層 ，這裡我以讀取CnBeta RSS 為例 ，FeedViewModel 的一些主要代碼：

主要通過async和await 的方式載入資料

   1:  private async Task ExecuteLoadItemsCommand()

   2:          {

   3:              if (isBusy)

   4:                  return;

   5:   

   6:              IsBusy = true;

   7:   

   8:              try{

   9:   

  10:                  var httpClient = new HttpClient();

  11:   

  12:                  var feed="http://cnbeta.feedsportal.com/c/34306/f/624776/index.rss";

  13:   

  14:   

  15:                  var responseString = await httpClient.GetStringAsync(feed);

  16:   

  17:                  FeedItems.Clear();

  18:   

  19:                  var items= await ParseFeed(responseString);

  20:   

  21:                  foreach(var item in items)

  22:                  {

  23:   

  24:                      //Console.WriteLine(item.Title);

  25:                      FeedItems.Add(item);

  26:                  }

  27:              }

  28:              catch(Exception ex){

  29:   

  30:                  var page = new ContentPage ();

  31:   

  32:                  var result = page.DisplayAlert ("出錯 ", "載入失敗.", "確認", null);

  33:   

  34:              }

  35:   

  36:              IsBusy = false;

  37:   

  38:          }

   1:  private async Task<List<FeedItem>> ParseFeed(string rss)

   2:          {

   3:              return await Task.Run (() => {

   4:                  var xdoc=XDocument.Parse(rss);

   5:   

   6:                  var id=0;

   7:   

   8:                  return ( from item in xdoc.Descendants("item")

   9:                      select new FeedItem

  10:                      {

  11:                          Title = (string)item.Element("title"),

  12:                          Description=(string)item.Element("description"),

  13:                          PublishDate=(string)item.Element("pubDate"),

  14:                          Id= id++

  15:                      }).ToList();

  16:              });

  17:          }

5. 通過Xamarin Forms 構造View

          這裡需要建立一個簡單的表單ListView, 和自訂Cell, 當然Xamarin Forms會依舊平台進行相應渲染產生原生的表單支援

   1:  public class FeedView : ContentPage

   2:      {

   3:          private FeedViewModel ViewModel{

   4:              get {  return BindingContext as FeedViewModel;  }

   5:          }

   6:   

   7:          public FeedView ()

   8:          {

   9:   

  10:              BindingContext = new FeedViewModel ();

  11:   

  12:              var stack = new StackLayout {

  13:                  Orientation= StackOrientation.Vertical,

  14:                  Padding = new Thickness(0,8,0,8)

  15:              };

  16:   

  17:              var listView = new ListView ();

  18:   

  19:   

  20:              listView.ItemsSource = ViewModel.FeedItems;

  21:   

  22:              var cell = new DataTemplate (typeof(ListTextCell));

  23:   

  24:              cell.SetBinding (TextCell.TextProperty, "Title");

  25:   

  26:              cell.SetBinding (TextCell.DetailProperty, "PublishDate");

  27:   

  28:              listView.ItemTemplate = cell;

  29:   

  30:   

  31:              stack.Children.Add (listView);

  32:   

  33:              Content = stack;

  34:          }

  35:   

  36:          protected override void OnAppearing()

  37:          {

  38:              base.OnAppearing ();

  39:   

  40:              if (ViewModel == null || !ViewModel.CanLoadMore || ViewModel.IsBusy || ViewModel.FeedItems.Count > 0)

  41:                  return;

  42:   

  43:              ViewModel.LoadItemsCommand.Execute (null);

  44:          }

  45:      }

6. 運行看看

歡迎大家下載My Code看看 點擊下載