MvvmCross
說起MvvmCross,要先說到Mvvm,Mvvm是Mvc框架的一種變形。對應的分別為Model、View和ViewModel層。三層之間的關系是這樣的:
Model層為數據層,實現了業務數據的定義,View層為表現層,ViewModel層隔離了數據層和表現層,實現了對業務數據的隔離以及和表現層數據的綁定。
園子里也有朋友進行了詳細的解釋
http://www.cnblogs.com/888h/archive/2010/12/24/1915214.html
http://kb.cnblogs.com/page/120678/
舉個栗子
閑話少說,下面我們就用Xamarin和MvvmCross來做個小例子。
創建解決方案
1. 先要創建一個Xamarin跨平台的解決方案。方案模板使用Blank Xaml App(Xamarin.Forms Protable)。
2. 創建好的解決方案大體應該是這樣子,包含一個可移植的項目、一個Android的項目和一個iOS的項目。如果有其它的項目,我們暫時移除掉。
3. 添加MvvmCross引用。引用MvvmCross需要從Nuget中添加。
在解決方案上點擊右鍵,選擇 管理解決方案NuGet程序包這一項。
4. 在NuGet管理器中直接搜索 MvvmCross,搜索結果第一項就是MvvmCross
在右邊的解決方案欄中選擇要引用MvvmCross的項目,點擊安裝,Nuget管理器自動下載MvvmCross並添加引用。
安裝完成后,查看解決方案,我們會發現項目已經引用了MvvmCross相應的程序集。
可移植項目
可移植項目做為解決方案共享的項目,主要建立所有項目公用的內容。這里我們主要建立公共類庫以及ViewModel。
1. 首先將項目中的App.xaml和mainPage.xaml移除。
2. 新建一個ViewModels文件夾,保存公共的ViewModel。
3. 在ViewModels下新建MainViewModel.cs。
4. 新建App類,做為MvvmCross公共的應用程序入口。
整理后項目結構大體是這樣的
- App.cs
using Acr.UserDialogs; using MvvmCross.Core.ViewModels; using MvvmCross.Platform; using MvvmCross.Platform.IoC; using XamarinSample.ViewModels; namespace XamarinSample { public class App : MvxApplication { public override void Initialize() { base.Initialize(); // 注冊所有的服務類 CreatableTypes().EndingWith("Service").AsInterfaces().RegisterAsLazySingleton(); Mvx.RegisterSingleton(UserDialogs.Instance); RegisterAppStart<MainViewModel>(); } } }
- MainViewModel.cs
using System.Windows.Input; using MvvmCross.Core.ViewModels; namespace XamarinSample.ViewModels { public class MainViewModel : MvxViewModel { /// <summary> /// 獲取或設置標題 /// 設置標題時將觸發屬性改變事件 /// </summary> public string Title { get { return _title; } set { _title = value; RaisePropertyChanged(() => _title); } } private ICommand _showTitleCommand; private string _title; /// <summary> /// 獲取 顯示標題的Command /// </summary> public ICommand ShowTitleCommand { get { return _showTitleCommand ?? (_showTitleCommand = new MvxCommand(ShowTitle)); } } private void ShowTitle() { Acr.UserDialogs.UserDialogs.Instance.Alert(Title,"這是一個標題", "知道了"); } } }
通過以上步驟,可移植項目已經整理完成了,下面我們針對各個移動端項目分別實現調用。
Android項目
Android項目主要實現Android界面以及界面邏輯。我們分別創建界面布局、與ViewModel綁定以及實現界面邏輯。
1. 添加MvvmCross 在Android項目的Setup類。
2. 添加界面布局並綁定ViewModel數據。
3. 實現入口Activity,綁定布局。
- Setup.cs
using Android.Content; using MvvmCross.Core.ViewModels; using MvvmCross.Droid.Platform; namespace XamarinSample.Droid { public class Setup : MvxAndroidSetup { public Setup(Context applicationContext) : base(applicationContext) { } protected override IMvxApplication CreateApp() { return new App(); } } }
- MainPage.axml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:local="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="50" android:id="@+id/textView2" android:singleLine="true" android:gravity="center_vertical" local:MvxBind="Text Title, Mode=TwoWay" android:hint="請輸入標題" android:inputType="text" android:layout_marginTop="100" android:layout_marginBottom="20" android:textSize="26dip" android:background="@color/design_fab_stroke_end_outer_color" /> <Button android:text="顯示標題" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/button1" local:MvxBind="Click ShowTitleCommand" android:textSize="30dip" /> </LinearLayout>
- MainActivity.cs
using Android.App; using Android.Content.PM; using Android.OS; using MvvmCross.Droid.Views; using XamarinSample.ViewModels; namespace XamarinSample.Droid { [Activity(Label = "XamarinSample", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] public class MainActivity : MvxActivity<MainViewModel> { protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); SetContentView(Resource.Layout.MainPage); } } }
OK, 至此Android端的項目完成了,讓我們執行一下看看效果
iOS項目
iOS 項目也主要實現了iOS上的界面邏輯,但如果要完成iOS的界面設計,需要連接到Mac系統才能在VS中進行界面設計。
- 添加iOS項目的Setup對象。
Setup.cs
using MvvmCross.Core.ViewModels; using MvvmCross.iOS.Platform; using MvvmCross.iOS.Views.Presenters; using UIKit; namespace XamarinSample.iOS { public class Setup : MvxIosSetup { protected override IMvxApplication CreateApp() { return new App(); } public Setup(IMvxApplicationDelegate applicationDelegate, UIWindow window) : base(applicationDelegate, window) { } public Setup(IMvxApplicationDelegate applicationDelegate, IMvxIosViewPresenter presenter) : base(applicationDelegate, presenter) { } } }
- 在修改 AppDelegate.cs 文件,對象繼承於 ,修改FindishedLaunching方法。
using Foundation; using MvvmCross.Core.ViewModels; using MvvmCross.iOS.Platform; using MvvmCross.Platform; using UIKit; namespace XamarinSample.iOS { [Register("AppDelegate")] public class AppDelegate : MvxApplicationDelegate { public override UIWindow Window { get; set; } public override bool FinishedLaunching(UIApplication app, NSDictionary options) { Window = new UIWindow(UIScreen.MainScreen.Bounds); var setup = new Setup(this, Window); setup.Initialize(); var startup = Mvx.Resolve<IMvxAppStart>(); startup.Start(); Window.MakeKeyAndVisible(); return true; } } }
- 新建Views文件夾,並在文件夾下添加界面文件MainView。
- 打開MainView.xib界面文件,進行界面設計。
我們在界面上添加一個TextField和一個Button,分別命名為txtField和btnShow。
- 修改MainView.cs對象,實現數據綁定。
using MvvmCross.Binding.BindingContext; using MvvmCross.iOS.Views; using UIKit; using XamarinSample.ViewModels; namespace XamarinSample.iOS.Views { public partial class MainView : MvxViewController<MainViewModel> { public MainView() : base("MainView", null) { } public override void DidReceiveMemoryWarning() { base.DidReceiveMemoryWarning(); // Release any cached data, images, etc that aren't in use. } public override void ViewDidLoad() { base.ViewDidLoad(); var set = this.CreateBindingSet<MainView, MainViewModel>(); set.Bind(txtTitle).To(vm => vm.Title); set.Bind(btnShow).To(x => x.ShowTitleCommand); set.Apply(); // Perform any additional setup after loading the view, typically from a nib. } } }
好了,iOS的項目也設計完成了,我們運行一下看看效果。
小結
本篇主要演示了如何使用在Xamarin 和MvvmCross 完成Android 和iOS多個平台的項目。示例的代碼已經上傳
https://github.com/3368aa/XamarinTest
本人對Xamarin也是邊學邊做,如有錯誤之處,請指正。
下一篇我們開始針對MvvmCross進行下講解。