[Visual Studio & Xamarin] 开发架构(三)- 跨平台的MVVMCross与portable class library-Android

這一篇文章要來探討MVVM開發法與PCL可攜式類別的應用。接著前兩篇開發架構討論，來到MVVM的開發應用。

在MVVM的架構中，會把一個開發切成Model，View與View-Model。在這個範例中，我用Windows Phone與Android Phone來

兩個設備來實作Base在MVVM與PCL結構上的跨平台開發。

如下圖，實際上這兩個設備，在Windows Phone上呈現View的部分，是xaml這個Layout檔案，而在Android設備上，

則是axml Layout檔案。而在Visual Studio結合Xamarin的開發下，MVVM除了可以協助分層清楚的開發外，還可以利用PCL類別

來達成跨越Windows Phone，Windows 8，iPhone，Android Phone與網頁平台的開發。

1. 在Visual Studio裡面建立一個Android專案

在Visual Studio新增一個Android Phone專案，選擇[Android Application]。

2. 建立一個portable class library類別專案

這邊再加入一個新的專案，專案選擇[可攜式類別庫]。

勾選我們要支援的平台，在這邊選擇Windows Phone 8，Windows Store apps，Xamarin.iOS與Xamarin.Android。

這可以堪稱復仇者聯盟了，所有平台都到齊了。

3.安裝MVVMCross Library

在Android與PCL兩個專案中，按下滑鼠右鍵，選擇[管理NuGet 套件]。

在管理NuGet套件的頁面中，輸入[MVVMCross]來找尋MVVMCross套件，找到後把他安裝起來。

4. PCL的MVVMCross套件結構

在PCL專案中安裝完MVVMCross套件，這邊我們先簡單的來觀察檔案結構。

在PCL專案中可以看到有一個ViewModels的資料夾，資料夾中有一個FirstViewModel.cs檔案。

檔案中有一個Property _hello。在Set方法中可以看到以下的宣告 set { _hello = value; RaisePropertyChanged(() => Hello); }

其中RaisePropertyChanged(() => Hello 這句是表示當_hello的值有更新的時候，通知前端邦定這個屬性的控制項也同步更新這個值。

編譯這個PCL專案，然後在Android專案中加入參考這個PCL專案編譯出來的Dll檔案。

01 namespace PortableClassLibrary1.ViewModels
02 {
03     public class FirstViewModel
04         : MvxViewModel
05     {
06         private string _hello = "請輸入文字!";
07         public string Hello
08         {
09             get { return _hello; }
10             set { _hello = value; RaisePropertyChanged(() => Hello); }
11         }
12     }
13 }

5. 觀察Android的檔案結構

開啟Android專案下的[Resources]à[layout]à[FirstView.axml]檔案。

可以觀察到在兩個不同的文字標籤控制項都有著[local:MvxBind="Text Hello"] 這段屬性宣告，這是宣告這個控制項要與後端的

Viewmodel中的Hello property做綁定的動作。

01	<?xml version="1.0" encoding="utf-8"?>

02	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	xmlns:local="http://schemas.android.com/apk/res-auto"

04	android:orientation="vertical"

05	android:layout_width="fill_parent"

06	android:layout_height="fill_parent">

07

<EditText

08	android:layout_width="fill_parent"

09	android:layout_height="wrap_content"

10	android:textSize="40dp"

11	local:MvxBind="Text Hello" />

12

<TextView

13	android:layout_width="fill_parent"

14	android:layout_height="wrap_content"

15	android:textSize="40dp"

16	local:MvxBind="Text Hello" />

17	</LinearLayout>

6. 編譯程式

接著在Visual Studio中編譯這個Android的App，你試著在第一個[EditText]文字標籤裡面輸入文字，會發現下方的[TextView]

文字也會自動更著改變，而我們其實沒有在Android專案中撰寫這樣的程式，而是用宣告的方式來綁定文字標籤與ViewModel。

也就是說，是由ViewModel來通知你的前端何時來變更顯示值。

7. 在Android 畫面中加入按鈕

接下來我們來嘗試在Layout裡面宣告一個按鈕，當按鈕事件被觸發的時候，事實上是由ViewModel的方法來觸發更新

前端畫面上的值。在Android Layout中我們拖拉一個按鈕。

在Layout原始碼的Button標籤下我們做底下的宣告。

 

8. 修改PCL專案中的ViewModel程式

在專案中新增一個方法Method1，內容就是去更改_hello屬性的值。

在前端當按鈕事件被按下的時候，我們希望將事件處理導向ViewModel，最簡單的方式就是在ViewModel裡面宣告ICommand。

接著事件處理常式裡面呼叫Method1。記得重新編譯這個程式。

01 namespace PortableClassLibrary1.ViewModels
02 {
03     public class FirstViewModel
04         : MvxViewModel
05     {
06         private string _hello = "請輸入文字!";
07         public string Hello
08         {
09             get { return _hello; }
10             set { _hello = value; RaisePropertyChanged(() => Hello); }
11         }
12
13         void Method1() {
14             Hello = "按鈕事件";
15         }
16
17         public ICommand MyCommand
18         {
19             get
20             {
21                 return new MvxCommand(()=>Method1());
22             }
23         }
24     }
25 }

 

 

9. 重新編譯Android App

重新編譯App後，當你按下畫面中的Button click，可以看到畫面中的文字標籤的字也改變了。

這前端的View的顯示更新已經是透過ViewModel來處理更新了。

10. 補充: 在跨越平台到Windows Phone之前…

在下一個章節我們新增Windows Pone專案範例之前，我們再來討論一個問題。在上一個畫面中我們可以看到Button上寫著Click me。

試想像如果在每個不同的手機平台上都有這個按鈕，這個按鈕我們從本來的[Click me]這個名稱要改為 [Click]，那可能每一個平台都要改一次，

所以我們也可以透過屬性的綁定，來統一讓ViewModel來修改這個顯示名稱。

在FirstViewModel.cs檔案我們做以下的宣告:

 

1 public string ButtonText { get { return "統一按鈕名稱"; } }

 

在Android Layout檔案裏面我們在Button控制項多加下方的屬性宣告。

 

1 <Button
2     android:layout_width="match_parent"
3     android:layout_height="wrap_content"
4     android:text="Click me"
5     local:MvxBind="Click MyCommand; Text ButtonText" />

 

編譯Android，可以看到Android App的Button 上文字被改變了。