提及MvvmCross,要先說到Mvvm,Mvvm是Mvc框架的一種變形。對應的分別爲Model、View和ViewModel層。三層之間的關係是這樣的:android
Model層爲數據層,實現了業務數據的定義,View層爲表現層,ViewModel層隔離了數據層和表現層,實現了對業務數據的隔離以及和表現層數據的綁定。ios
1. 先要建立一個Xamarin跨平臺的解決方案。方案模板使用Blank Xaml App(Xamarin.Forms Protable)。app
2. 建立好的解決方案大致應該是這樣子,包含一個可移植的項目、一個Android的項目和一個iOS的項目。若是有其它的項目,咱們暫時移除掉。框架
3. 添加MvvmCross引用。引用MvvmCross須要從Nuget中添加。ide
在解決方案上點擊右鍵,選擇 管理解決方案NuGet程序包 這一項。佈局
4. 在NuGet管理器中直接搜索 MvvmCross,搜索結果第一項就是MvvmCrossthis
在右邊的解決方案欄中選擇要引用MvvmCross的項目,點擊安裝,Nuget管理器自動下載MvvmCross並添加引用。url
安裝完成後,查看解決方案,咱們會發現項目已經引用了MvvmCross相應的程序集。spa
可移植項目作爲解決方案共享的項目,主要創建全部項目公用的內容。這裏咱們主要創建公共類庫以及ViewModel。設計
1. 首先將項目中的App.xaml和mainPage.xaml移除。
2. 新建一個ViewModels文件夾,保存公共的ViewModel。
3. 在ViewModels下新建MainViewModel.cs。
4. 新建App類,作爲MvvmCross公共的應用程序入口。
整理後項目結構大致是這樣的
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>(); } } }
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界面以及界面邏輯。咱們分別建立界面佈局、與ViewModel綁定以及實現界面邏輯。
1. 添加MvvmCross 在Android項目的Setup類。
2. 添加界面佈局並綁定ViewModel數據。
3. 實現入口Activity,綁定佈局。
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(); } } }
<?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>
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的界面設計,須要鏈接到Mac系統才能在VS中進行界面設計。
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) { } } }
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; } } }
咱們在界面上添加一個TextField和一個Button,分別命名爲txtField和btnShow。
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的項目也設計完成了,咱們運行一下看看效果。