[关闭]
@linux1s1s 2016-04-26T11:40:30.000000Z 字数 7574 阅读 2532

MVX Android设计架构浅析-MVVM

Android_Architecture 2016-04

简介

读过MVX Android设计架构浅析的童鞋应该还记得2005年微软工程师John Gossman在自己的博客上首次公布了MVVM模式。时隔10年之久才在Android活跃起来，究其原因是之前Android并不支持Data-binding，所以在了解MVVM之前很有必要对Data-binding有个充分的认识。当然这里不是重点，所以不再深究。

那么MVVM和前篇博客中介绍的MVX Android设计架构浅析-MVP有啥区别呢？下面用两张简单的交互图解释一下。

此处输入图片的描述

此处输入图片的描述

如果上面两张图看的不太明白，可以复习一下MVX Android设计架构浅析-MVP其中的代码部分介绍的很清楚。

简单的说一下上面MVVM的交互图
可以看到对view中数据的所有绑定和更新操作都是通过Data Binding框架实现的。通过ObservableField类，View在model发生变化时会作出反应，在XML文件中对属性的引用使得框架在用户操作View时可以将变化推送给对应的ViewModel。我们也可以通过代码订阅属性的变化，这样可以实现例如当CheckBox被点击后，TextView被禁用这样的功能。像这样使用标准Java类来表示View的视觉状态的一个很大优势是明显的：你可以很容易对这种视觉行为进行单元测试。

简单交互图

我们将上面的图示经过精简一下MVVM的交互就简单表示如下
此处输入图片的描述

代码

Talk is cheap,show me the code.（废话少说，直接上代码）

MVVM – VIEW – XML

  1. <layout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools">
  3.     <data>
  4.         <variable name="data" type="com.nilzor.presenterexample.MainModel"/>
  5.     </data>
  6.     <RelativeLayout
  7.         android:layout_width="match_parent"
  8.         android:layout_height="match_parent"
  9.         android:paddingLeft="@dimen/activity_horizontal_margin"
  10.         android:paddingRight="@dimen/activity_horizontal_margin"
  11.         android:paddingTop="@dimen/activity_vertical_margin"
  12.         android:paddingBottom="@dimen/activity_vertical_margin"
  13.         tools:context=".MainActivityFragment">
  15.         <TextView
  16.             android:text="@{data.numberOfUsersLoggedIn}"
  17.             android:layout_width="wrap_content"
  18.             android:layout_height="wrap_content"
  19.             android:layout_alignParentEnd="true"
  20.             android:id="@+id/loggedInUserCount"/>
  22.         <TextView
  23.             android:text="# logged in users:"
  24.             android:layout_width="wrap_content"
  25.             android:layout_height="wrap_content"
  26.             android:layout_alignParentEnd="false"
  27.             android:layout_toLeftOf="@+id/loggedInUserCount"/>
  29.         <RadioGroup
  30.             android:layout_marginTop="40dp"
  31.             android:id="@+id/existingOrNewUser"
  32.             android:gravity="center"
  33.             android:layout_width="wrap_content"
  34.             android:layout_height="wrap_content"
  35.             android:layout_centerHorizontal="true"
  36.             android:orientation="horizontal">
  38.             <RadioButton
  39.                 android:layout_width="wrap_content"
  40.                 android:layout_height="wrap_content"
  41.                 android:text="Returning user"
  42.                 android:checked="@{data.isExistingUserChecked}"
  43.                 android:id="@+id/returningUserRb"/>
  45.             <RadioButton
  46.                 android:layout_width="wrap_content"
  47.                 android:layout_height="wrap_content"
  48.                 android:text="New user"
  49.                 android:id="@+id/newUserRb"
  50.                 />
  52.         </RadioGroup>
  54.         <LinearLayout
  55.             android:orientation="horizontal"
  56.             android:layout_width="match_parent"
  57.             android:layout_height="wrap_content"
  58.             android:id="@+id/username_block"
  59.             android:layout_below="@+id/existingOrNewUser">
  61.             <TextView
  62.                 android:layout_width="wrap_content"
  63.                 android:layout_height="wrap_content"
  64.                 android:textAppearance="?android:attr/textAppearanceMedium"
  65.                 android:text="Username:"
  66.                 android:id="@+id/textView"
  67.                 android:minWidth="100dp"/>
  69.             <EditText
  70.                 android:layout_width="wrap_content"
  71.                 android:layout_height="wrap_content"
  72.                 android:id="@+id/username"
  73.                 android:minWidth="200dp"/>
  74.         </LinearLayout>
  76.         <LinearLayout
  77.             android:orientation="horizontal"
  78.             android:layout_width="match_parent"
  79.             android:layout_height="wrap_content"
  80.             android:layout_alignParentStart="false"
  81.             android:id="@+id/password_block"
  82.             android:layout_below="@+id/username_block">
  84.             <TextView
  85.                 android:layout_width="wrap_content"
  86.                 android:layout_height="wrap_content"
  87.                 android:textAppearance="?android:attr/textAppearanceMedium"
  88.                 android:text="Password:"
  89.                 android:minWidth="100dp"/>
  91.             <EditText
  92.                 android:layout_width="wrap_content"
  93.                 android:layout_height="wrap_content"
  94.                 android:inputType="textPassword"
  95.                 android:ems="10"
  96.                 android:id="@+id/password"/>
  98.         </LinearLayout>
  100.         <LinearLayout
  101.             android:orientation="horizontal"
  102.             android:layout_width="match_parent"
  103.             android:layout_height="wrap_content"
  104.             android:layout_below="@+id/password_block"
  105.             android:id="@+id/email_block"
  106.             android:visibility="@{data.emailBlockVisibility}">
  108.             <TextView
  109.                 android:layout_width="wrap_content"
  110.                 android:layout_height="wrap_content"
  111.                 android:textAppearance="?android:attr/textAppearanceMedium"
  112.                 android:text="Email:"
  113.                 android:minWidth="100dp"/>
  115.             <EditText
  116.                 android:layout_width="wrap_content"
  117.                 android:layout_height="wrap_content"
  118.                 android:inputType="textEmailAddress"
  119.                 android:ems="10"
  120.                 android:id="@+id/email"/>
  121.         </LinearLayout>
  123.         <Button
  124.             android:layout_width="wrap_content"
  125.             android:layout_height="wrap_content"
  126.             android:text="@{data.loginOrCreateButtonText}"
  127.             android:id="@+id/loginOrCreateButton"
  128.             android:layout_below="@+id/email_block"
  129.             android:layout_centerHorizontal="true"/>
  130.     </RelativeLayout>
  131. </layout>

MVVM – VIEW – JAVA

  1. package com.nilzor.presenterexample;
  3. import android.app.Fragment;
  4. import android.os.Bundle;
  5. import android.view.LayoutInflater;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. import android.widget.CompoundButton;
  9. import android.widget.Toast;
  11. import com.nilzor.presenterexample.databinding.FragmentMainBinding;
  13. public class MainActivityFragment extends Fragment {
  14.     private FragmentMainBinding mBinding;
  15.     private MainModel mViewModel;
  17.     public MainActivityFragment() {
  18.     }
  20.     @Override
  21.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  22.         View view = inflater.inflate(R.layout.fragment_main, container, false);
  23.         mBinding = FragmentMainBinding.bind(view);
  24.         mViewModel = new MainModel(this, getResources());
  25.         mBinding.setData(mViewModel);
  26.         attachButtonListener();
  27.         return view;
  28.     }
  30.     private void attachButtonListener() {
  31.         mBinding.loginOrCreateButton.setOnClickListener(new View.OnClickListener() {
  32.             @Override
  33.             public void onClick(View v) {
  34.                 mViewModel.logInClicked();
  35.             }
  36.         });
  37.     }
  39.     @Override
  40.     public void onViewCreated(View view, Bundle savedInstanceState) {
  41.         ensureModelDataIsLodaded();
  42.     }
  44.     private void ensureModelDataIsLodaded() {
  45.         if (!mViewModel.isLoaded()) {
  46.             mViewModel.loadAsync();
  47.         }
  48.     }
  50.     public void showShortToast(String text) {
  51.         Toast.makeText(getActivity(), text, Toast.LENGTH_SHORT).show();
  52.     }
  53. }

MVVM – VIEWMODEL

  1. package com.nilzor.presenterexample;
  3. import android.content.res.Resources;
  4. import android.databinding.ObservableField;
  5. import android.os.AsyncTask;
  6. import android.view.View;
  8. import java.util.Random;
  10. public class MainModel {
  11.     public ObservableField numberOfUsersLoggedIn = new ObservableField();
  12.     public ObservableField isExistingUserChecked = new ObservableField();
  13.     public ObservableField emailBlockVisibility = new ObservableField();
  14.     public ObservableField loginOrCreateButtonText = new ObservableField();
  15.     private boolean mIsLoaded;
  16.     private MainActivityFragment mView;
  17.     private Resources mResources;
  19.     public MainModel(MainActivityFragment view, Resources resources) {
  20.         mView = view;
  21.         mResources = resources; // You might want to abstract this for testability
  22.         setInitialState();
  23.         updateDependentViews();
  24.         hookUpDependencies();
  25.     }
  26.     public boolean isLoaded() {
  27.         return mIsLoaded;
  28.     }
  30.     private void setInitialState() {
  31.         numberOfUsersLoggedIn.set("...");
  32.         isExistingUserChecked.set(true);
  33.     }
  35.     private void hookUpDependencies() {
  36.         isExistingUserChecked.addOnPropertyChangedCallback(new android.databinding.Observable.OnPropertyChangedCallback() {
  37.             @Override
  38.             public void onPropertyChanged(android.databinding.Observable sender, int propertyId) {
  39.                 updateDependentViews();
  40.             }
  41.         });
  42.     }
  44.     public void updateDependentViews() {
  45.         if (isExistingUserChecked.get()) {
  46.             emailBlockVisibility.set(View.GONE);
  47.             loginOrCreateButtonText.set(mResources.getString(R.string.log_in));
  48.         }
  49.         else {
  50.             emailBlockVisibility.set(View.VISIBLE);
  51.             loginOrCreateButtonText.set(mResources.getString(R.string.create_user));
  52.         }
  53.     }
  55.     public void loadAsync() {
  56.         new AsyncTask() {
  57.             @Override
  58.             protected Void doInBackground(Void... params) {
  59.                 // Simulating some asynchronous task fetching data from a remote server
  60.                 try {Thread.sleep(2000);} catch (Exception ex) {};
  61.                 numberOfUsersLoggedIn.set("" + new Random().nextInt(1000));
  62.                 mIsLoaded = true;
  63.                 return null;
  64.             }
  65.         }.execute((Void) null);
  66.     }
  68.     public void logInClicked() {
  69.         // Illustrating the need for calling back to the view though testable interfaces.
  70.         if (isExistingUserChecked.get()) {
  71.             mView.showShortToast("Invalid username or password");
  72.         }
  73.         else {
  74.             mView.showShortToast("Please enter a valid email address");
  75.         }
  76.     }
  77. }

附：
MVX Android设计架构浅析-MVC
MVX Android设计架构浅析-MVP
MVX Android设计架构浅析-MVVM

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注