Xamarin.Android之MvvmCross

欢迎你们加入如下开源社区

Xamarin-Cn：https://github.com/Xamarin-Cn

Mvvmcross-Cn：https://github.com/Mvvmcross-Cn 

（另外微信订阅号 Xamarin 全部者@善友兄也给予了运营权限，后面将开始陆续运营起来，给你们推送相关的文章）

 

简介

相信作了开发有必定经验的人都知道IOC的存在，而Xamarin.Android中尚未IOC的存在。特别是在Xamarin.Android下，若是仅仅只是显示简单的数据，就须要经过不少的FindViewById来查找组件，而且还要负责呈现，今天咱们将经过学习MVVMCross组件来简化这些操做，达到PCL部分的最大化，下面咱们以一个官方的DEMO来学习。

 

题外话：

因为公司的发展须要，须要招聘Xamarin方面的人才，若是你对Xamarin感兴趣的能够直接联系楼主，如今咱们要召集8我的进行这方面的培训，因此只要有C#基础，而且有很强的兴趣均可以来。而且在产品完成后咱们将会把开发的经验都撰写成博客发表，造福整个Xamarin（Q+976691141）。 

 

PCL部分

 

基础准备

首先咱们须要新建一个名为“TipCalc.Core”的“类库（可移植）”的项目，而且咱们须要按照下图选择对应的平台：

 

若是你的平台没有红色框住的部分也没有问题的，由于当前主流的PCL的方案是Profile259，若是你要查看你新建的类库是否是259能够查看项目的csproj文件，就是{项目名}.csproj，用记事本打开，而后定位到这个位置就能够看到了：

 

警告：

若是上面的PCL部分你按照个人选择以后，肯定按钮是禁用的，就须要跟着下面的教程来解决这个问题，首先咱们须要打开下面这个文件夹：

C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETPortable\v4.5\Profile\Profile78\SupportedFrameworks

将该文件夹中的如下文件复制：

若是不存在“Xamarin.iOS.Unified.xml”也没有关系，以后咱们打开下面这个文件夹：

C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETPortable\v4.5\Profile\Profile259\SupportedFrameworks

 

将上面的文件复制到其中，而后重启VS就能够解决问题了。

 

项目搭建

 

删除Class1.cs文件

咱们并不须要使用该文件

 

安装MvvmCross

咱们打开“程序包管理器控制台”输入如下指令后回车：

Install-Package MvvmCross.HotTuna.MvvmCrossLibraries

 

 

添加Tip Calculation 服务

建立一个名为“Services”的文件夹，并在该文件夹中新建一个名为“ICalculation”的接口，具体的内容代码以下所示：

1 namespace TipCalc.Core.Services
2 {
3     public interface ICalculation
4     {
5         double TipAmount(double subTotal, int generosity);
6     }
7 }

 

 

并在该文件夹中新建一个Calculation类实现上面的接口，具体代码以下：

 1 namespace TipCalc.Core.Services
 2 {
 3     public class Calculation : ICalculation
 4     {
 5         public double TipAmount(double subTotal, int generosity)
 6         {
 7             return subTotal * ((double)generosity)/100.0;
 8         }
 9     }
10 }

以上部分在实际项目中咱们能够认为是应用服务层。

 

添加视图模型

视图模型将会链接最终的界面与上面的服务层，而为了达到这些效果，咱们的视图模型必须继承自MvxViewModel。下面咱们先新建一个ViewModels文件夹并新建一个TipViewModel类，具体的代码以下所示：

 1 namespace TipCalc.Core.ViewModels
 2 {
 3     public class TipViewModel : MvxViewModel
 4     {
 5         private readonly ICalculation _calculation;
 6         public TipViewModel(ICalculation calculation)
 7         {
 8             _calculation = calculation;
 9         }
10 
11         public override void Start()
12         {
13             _subTotal = 100;
14             _generosity = 10;
15             Recalcuate();
16             base.Start();
17         }
18 
19         private double _subTotal;
20 
21         public double SubTotal
22         {
23             get { return _subTotal; }
24             set { _subTotal = value; RaisePropertyChanged(() => SubTotal); Recalcuate(); }
25         }
26 
27         private int _generosity;
28 
29         public int Generosity
30         {
31             get { return _generosity; }
32             set { _generosity = value; RaisePropertyChanged(() => Generosity); Recalcuate(); }
33         }
34 
35         private double _tip;
36 
37         public double Tip
38         {
39             get { return _tip; }
40             set { _tip = value; RaisePropertyChanged(() => Tip);}
41         }
42 
43         private void Recalcuate()
44         {
45             Tip = _calculation.TipAmount(SubTotal, Generosity);
46         }
47     }
48 }

经过上面的代码咱们能够看到，视图模型的构造函数要求传入一个实现了ICalculation接口的参数，而这个过程将会有IOC帮咱们完成。剩下的咱们能够看到咱们重写了Start方法用来给视图模型中的值赋初始值，而且在每一个值改变的同时还调用了Recalcuate方法来从新计算。

 

OK，完成这些以后，咱们还须要一个启动项对依赖注入进行配置，而且指定初始显示的视图模型，咱们直接在项目根目录下新建一个App类，而且该类须要继承自MvxApplication类，并在构造函数中写入如下代码：

 1 namespace TipCalc.Core
 2 {
 3     public class App : MvxApplication
 4     {
 5         public App()
 6         {
 7             Mvx.RegisterType<ICalculation,Calculation>();
 8             Mvx.RegisterSingleton<IMvxAppStart>(new MvxAppStart<TipViewModel>());
 9         }
10     }
11 }

其中咱们能够看到咱们经过Mvx.RegisterType对IOC进行了配置，这样IOC才可以知道在须要ICalculation接口的时候实例化哪一个类，而下一行的代码则是指定初始的视图模型，也就是首页，完成上面这些配置后咱们的PCL部分完成了，能够通用于Android和IOS。

 

Android UI呈现

首先咱们建立一个“Blank App（Android）”项目，项目名为“TipCalc.UI.Droid”。并将项目默认生成的MainActivity.cs文件和Resources/Layout文件夹下的Main.axml删除并添加TipCalc.Core.csproj引用。

 

安装MvvmCross

跟PCL部分同样，咱们还须要安装对应的类库：

Install-Package MvvmCross.HotTuna.MvvmCrossLibraries

 

 

添加MvvmCross Android绑定资源

该部分是为了咱们可以在界面中使用bind属性，因此咱们须要在Resources/Values文件夹下新建一个xml资源，名字能够为“MvxBind”，对应的内容以下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <resources>
 3   <declare-styleable name="MvxBinding">
 4     <attr name="MvxBind" format="string"/>
 5     <attr name="MvxLang" format="string"/>
 6   </declare-styleable>
 7   <declare-styleable name="MvxListView">
 8     <attr name="MvxItemTemplate" format="string"/>
 9     <attr name="MvxDropDownItemTemplate" format="string"/>
10   </declare-styleable>
11   <item type="id" name="MvxBindingTagUnique"/>
12   <declare-styleable name="MvxImageView">
13     <attr name="MvxSource" format="string"/>
14   </declare-styleable>
15 </resources>

 

 

添加启动类

虽然PCL中有启动项了，可是咱们须要在特定中进行注册，因此咱们还须要新建一个Setup类，而且该类的主要内容以下：

 1 namespace TipCalc.UI.Droid
 2 {
 3     public class Setup : MvxAndroidSetup
 4     {
 5         public Setup(Context applicationContext)
 6             : base(applicationContext)
 7         {
 8         }
 9 
10         protected override IMvxApplication CreateApp()
11         {
12             return new App();
13         }
14     }
15 }

主要做用就是将App实例化并返回，以便在特定平台中进行初始化。

 

添加视图

咱们须要在Resources/Layout文件夹下新建一个视图名为View_Tip.axml，而且其中的内容以下所示：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:local="http://schemas.android.com/apk/res/TipCalc.UI.Droid"
 4     android:orientation="vertical"
 5     android:layout_width="fill_parent"
 6     android:layout_height="fill_parent">
 7     <TextView
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:text="SubTotal" />
11     <EditText
12         android:layout_width="fill_parent"
13         android:layout_height="wrap_content"
14         local:MvxBind="Text SubTotal" />
15     <TextView
16         android:layout_width="fill_parent"
17         android:layout_height="wrap_content"
18         android:text="Generosity" />
19     <SeekBar
20         android:layout_width="fill_parent"
21         android:layout_height="wrap_content"
22         android:max="40"
23         local:MvxBind="Progress Generosity" />
24     <View
25         android:layout_width="fill_parent"
26         android:layout_height="1dp"
27         android:background="#ffff00" />
28     <TextView
29         android:layout_width="fill_parent"
30         android:layout_height="wrap_content"
31         android:text="Tip to leave" />
32     <TextView
33         android:layout_width="fill_parent"
34         android:layout_height="wrap_content"
35         local:MvxBind="Text Tip" />
36 </LinearLayout>

经过其中的内容咱们能够看到，其中多了一个MvxBind属性，经过这个属性咱们能够直接将控件的属性直接与ViewModel中对应的属性直接关联起来，这样咱们能够省去与控件交互的部分，可是咱们仍是须要Activity来将界面与咱们的ViewModel进行关联。

 

添加视图类

咱们直接新建一个名为TipCalcView的活动，而后将其继承的类改为MvxActivity，具体的代码以下：

 1 namespace TipCalc.UI.Droid.Views
 2 {
 3     [Activity(Label = "Tip", MainLauncher = true)]
 4     public class TipView : MvxActivity
 5     {
 6         public new TipViewModel ViewModel
 7         {
 8             get { return (TipViewModel) base.ViewModel; }
 9             set { base.ViewModel = value; }
10         }
11 
12         protected override void OnViewModelSet()
13         {
14             base.OnViewModelSet();
15             SetContentView(Resource.Layout.View_Tip);
16         }
17     }
18 }

完成这些以后，直接运行，咱们能够看到调整进度条的同时，Tip to leave的值会跟着动，彻底是实时的。

 

固然原生的方式与MvvmCross的方式是能够直接并存的。