MVVM 架构与数据绑定库

时间 2019-12-06

原文原文链接

Model-View-Presenter（MVP），即模型-视图-表示层，架构被普遍应用于 Android 应用程序，经过引入表示层将视图与表示逻辑和模型分离。Model-View-ViewModel（MVVM），即模型-视图-视图模型，与 MVP 很是类似，视图模型充当加强的表示层，使用数据绑定器保持视图模型和视图同步。经过将视图绑定到视图模型属性上，数据绑定程序能够处理视图更新而无需手动更改数据来设置视图（例如，不用再设置控件 TextView 的setTest() 或者 setVisibility() 属性）。与 MVP 中的表示层同样，视图模型能够很容易地进行单元测试。本文介绍了数据绑定库和 MVVM 架构模式，以及它们在 Android 上协同工做方式。 数据绑定什么是数据绑定？android

数据绑定是一种把数据绑定到用户界面元素（控件）的通用机制。一般，数据绑定会将数据从本地存储或者网络绑定到显示层，其特征是数据的改变会自动在数据源和用户界面之间同步。

数据绑定库的好处数据库

TextView textView = (TextView) findViewById(R.id.label);
EditText editText = (EditText) findViewById(R.id.userinput);
ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress);
 
editText.addTextChangedListener(new TextWatcher() {
   @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { }
   @Override public void afterTextChanged(Editable s) { }
   @Override public void onTextChanged(CharSequence s, int start, int before, int count) {
       model.setText(s.toString());
   }
});
 
textView.setText(model.getLabel());
progressBar.setVisibility(View.GONE);
复制代码

如上述代码所示，大量的 findViewById() 调用以后，又是一大堆 setter/listener 之类的调用。即便使用 ButterKnife 注入库也没有使状况改善。而数据绑定库就能很好地解决这个问题。bash

在编译时建立一个绑定类，它为全部视图提供一个 ID 字段，所以再也不须要调用 findViewById() 方法。实际上，这种方式比调用 findViewById() 方法快数倍，由于数据绑定库建立代码仅须要遍历视图结构一次。网络

绑定类中也实现了视图文件的绑定逻辑，所以全部 setter 会在绑定类中被调用，你无须为之操心。总之，它能让你的代码变得更简洁。架构

如何设置数据绑定？app

android {
   compileSdkVersion 25
   buildToolsVersion "25.0.1"
   ...
   dataBinding {
       enabled = true
   }
   ...
}
复制代码

首先在 app 的 build.gradle 中添加 dataBinding { enabled = true }。以后构建系统会收到提示对数据绑定启用附加处理，如，从布局文件建立绑定类。框架

<layout xmlns:android="http://schemas.android.com/apk/res/android">
  <data>
    <variable name="vm" type="com.example.ui.main.MainViewModel" />
    <import type="android.view.View" />
  </data>
  ...
</layout>
复制代码

接下来，在标签中包装下布局中的顶层元素，以便为此布局建立绑定类。绑定类具备和布局 xml 文件相同的名称，只是在结尾添加 Binding，例如， Activity_main.xml 的绑定类名字是 ActivityMainBinding。如上所示，命名空间的声明也移到布局标记中。而后，在布局标记内声明将须要绑定的数据做为变量，并设置好名称和类型。示例中，惟一的变量是视图模型，但后续变量会增长。你能够选择导入类，以便能使用 View.VISIBLE 或静态方法等常量。 如何绑定数据？ide

<TextView
    android:id="@+id/my_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="@{vm.visible ? View.VISIBLE : View.GONE}">
    android:padding="@{vm.bigPadding ? @dimen/paddingBig : @dimen/paddingNormal}"
    android:text='@{vm.text ?? @string/defaultText + "Additional text."}' />
复制代码

视图属性上的数据绑定指令以@开头，以大括号结束。你可使用任何变量在数据段中导入你以前声明的变量。这些表达式基本支持你在代码中的全部操做，例如算术运算符或字符串链接。工具

Visibility 属性中还支持 if-then-else 三元运算符。还提供了合并运算符 ??，若是左边的值为空，则返回右操做数。在上述代码中，你能够像在正常布局中同样访问资源，所以你能够根据布尔变量的取值选择不一样的 dimension 资源，也可使用 padding 属性查看这些资源。布局

即便你在代码中使用 getters 和 setters，你所声明的变量的属性也能够用字段访问语法的形式访问。你能够在 slide 上的文本属性中看到此部分，其中 vm.text 调用视图模型的 getText() 方法。最后，一些小的限制也适用，例如，不能建立新对象，可是数据绑定库仍然很是强大。 哪些属性是能够绑定的？

android:text="@{vm.text}"
android:visibility="@{vm.visibility}"
android:paddingLeft="@{vm.padding}"
android:layout_marginBottom="@{vm.margin}"
app:adapter="@{vm.adapter}"
复制代码

实际上，标准视图的大多数属性已经被数据绑定库支持。在数据绑定库内部，当你使用数据绑定时，库按照视图类型查找属性名称的 setter。例如，当你把数据绑定到 text 属性时，绑定库会在视图类中使用合适的参数类型查找 setText() 方法，上述示例是 String。

当没有对应的布局属性时，你也可使用数据绑定的 setter。例如，你能够在 xml 布局中的 recycleler 视图上使用 app:adapter 属性，以利用数据绑定设置适配器参数。

对于标准属性，不是全部的都在 View 上有对应的 setter 方法。例如，paddingLeft 状况下，数据绑定库支持自定义的 setter，以便将绑定转移到 padding 属性上。可是，遇到 layout_marginBottom 的状况，当绑定库没有提供自定义 setter 时咱们要怎么处理呢？ 自定义 Setter

@BindingAdapter("android:layout_marginBottom")
public static void setLayoutMarginBottom(View v, int bottomMargin) {
   ViewGroup.MarginLayoutParams layoutParams =
           (ViewGroup.MarginLayoutParams) v.getLayoutParams();
  
   if (layoutParams != null) {
       layoutParams.bottomMargin = bottomMargin;
   }
}
复制代码

对于上述状况，自定义 setter 能够被重写。Setter 是使用 @BindingAdapter 注解来实现的，布局属性使用参数命名，使得绑定适配器被调用。上面示例提供了一个用于绑定 layout_marginBottom 的适配器。

方法必须是 public static void ，并且必须接受绑定适配器调用的首个视图类型做为参数，而后将数据强绑定到你须要的类型。在这个例子中，咱们使用一个 int 类型为类型 View（子类型）定义一个绑定适配器。最后，实现绑定适配器接口。对于 layout_marginBottom，咱们须要获取布局参数，而且设置底部间隔：

@BindingAdapter({"imageUrl", "placeholder"})
public static void setImageFromUrl(ImageView v, String url, int drawableId) {
   Picasso.with(v.getContext().getApplicationContext())
           .load(url)
           .placeholder(drawableId)
           .into(v);
}
复制代码

也可能须要设置多种属性以绑定适配器调用。为了达到此目的，MMVM 会提供你的属性名称列表并用于 @BindingAdapter 实现注解。另外，在现有方法中，每一个属性都有本身的名称。只有在全部声明的属性被设置后，这些 BindingAdapter 才会被调用。

在加载图片过程当中，我想为加载图片定义一个绑定适配器来绑定 URL 与 placeHolder。如你所见，经过使用 Picasso image loading library，绑定适配器很是容易实现。你能够在自定义绑定适配器中使用任何你想要的方法。 在代码中使用绑定

MyBinding binding;
 
// For Activity
binding = DataBindingUtil.setContentView(this, R.layout.layout);
// For Fragment
binding = DataBindingUtil.inflate(inflater, R.layout.layout, container, false);
// For ViewHolder
binding = DataBindingUtil.bind(view);
 
// Access the View with ID text_view
binding.textView.setText(R.string.sometext);
 
// Setting declared variables
binding.set<VariableName>(variable);
复制代码

如今咱们在 xml 文件中定义了绑定，而且编写了自定义 setter，那咱们如何在代码中使用绑定呢？数据绑定库经过生成绑定类为咱们完成全部的工做。要获取布局的相应绑定类的实例，就要用到库提供的辅助方法。Activity 对应使用 DataBindingUtil.setContentView()，fragment 对应使用 inflate()，视图拥有者请使用 bind()。如前所述，绑定类为定义 final 字段的 ID 提供了全部视图。一样，您能够在绑定对象的布局文件中设置你所声明的变量。 自动更新布局 若是使用数据绑定，在数据发生变化时，库代码能够控制布局自动更新。然而，库仍然须要得到关于数据变化的通知。若是绑定的变量实现了 Observable 接口(不要跟 RxJava 的 Observable混淆了)就能解决这个问题。

对于像 int 和 boolean 这样的简单数据类型，库已经提供了合适的实现 Observable 的类型，好比 ObservableBoolean。还有一个 ObservableField 类型用于其它对象，好比字符串。

public class MyViewModel extends BaseObservable {
   private Model model = new Model();
 
   public void setModel(Model model) {
       this.model = model;
       notifyChange();
   }
   
   public void setAmount(int amount) {
       model.setAmount(amount);
       notifyPropertyChanged(BR.amount);
   }
 
   @Bindable public String getText() { return model.getText(); }
   @Bindable public String getAmount() { return Integer.toString(model.getAmount()); }
}
复制代码

在更复杂的状况下，好比视图模型，有一个 BaseObservable 类提供了工具方法在变化时通知布局。就像上面在 setModel() 方法中看到那样，咱们能够在模型变化以后经过调用 notifyChange() 来更新整个布局。

再看看 setAmount()，你会看到模型中只有一个属性发生了变化。这种状况下，咱们不但愿更新整个布局，只更新用到了这个属性的部分。为达此目的，能够在属性对应的 getter 上添加 @Bindable 注解。而后 BR 类中会产生一个字段，用于传递给 notifyPropertyChanged() 方法。这样，绑定库能够只更新确实依赖变化属性的部分布局。汇总 • 在布局文件中申明变量并将之与视图中的属性绑定。

• 在代码中建立绑定来设置变量。

• 确保你的变量类型实现了 Observable 接口 —— 能够从 BaseObservable 继承 —— 这样数据变化时会自动反映到布局上。

模型、视图、视图模型(MVVM)架构

如今来看看 MVVM 架构，以及它的三个组成部分是如何一块儿工做的。

视图是用户界面，即布局。在 Android 中一般是指 Activity、Fragment 或者 ViewHolder 以及配合它们使用的 XML 布局文件。

模型就是业务逻辑层，提供方法与数据进行互动。

视图模型就像是视图和模型的中间人，它既能访问模型的数据，又包含 UI 状态。它也定义了一些命令能够被事件，好比单击事件调用。视图模型包含了应用中的呈现逻辑。

在 MVVM 架构模式中，模型和视图模型主要经过数据绑定来进行互动。理想状况下，视图和视图模型没必要相互了解。绑定应该是视图和视图模型之间的胶水，而且处理两个方向的大多数东西。然而，在Anroid中它们不能真实的分离：

你要保存和恢复状态，但如今状态在视图模型中。

你须要让视图模型知道生命周期事件。

你可能会遇到须要直接调用视图方法的状况。

在这些状况下，视图和视图模型应该实现接口，而后在须要的时候经过命令通讯。视图模型的接口在任何状况都是须要的，由于数据绑定库会处理与视图的交互，并在上下文须要的时候使用自定义组件。

视图模型还会更新模型，好比往数据库添加新的数据，或者更新一个现有数据。它也用于从模型获取数据。理想状况下，模型也应该在变化的时候通知视图模型，但这取决于实现。

通常来讲，视图和视图模型的分离会让呈现逻辑易于测试，也有助于维持长期运行。与数据绑定库一块儿会带来更少更简洁的代码。示例

<layout xmlns:android="...">
  <data>
    <variable name="vm" type="pkg.MyViewModel" />
  </data>
 
  <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <EditText
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:visibility="@{vm.shouldShowText}"
      android:text="@={vm.text}" />
 
    <Button
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:onClick="@{vm::onButtonClick}"
      android:text="@string/button"/>
  </FrameLayout>
</layout>
复制代码

使用 MVVM 的时候，布局只引用一个变量，即这个视图的视图模型，在这个示例中是 MyViewModel。在视图模型中，你须要提供布局所须要的属性，其简单复杂程度取决于你的用例。

public class MyViewModel extends BaseObservable {
   private Model model = new Model();
 
   public void setModel(Model model) {
       this.model = model;
       notifyChange();
   }
 
   public boolean shouldShowText() {
       return model.isTextRequired();
   }
 
   public void setText(String text) {
       model.setText(text);
   }
 
   public String getText() {
       return model.getText();
   }
 
   public void onButtonClick(View v) {
       // Save data
   }
}
复制代码

这里有一个 text 属性。将 EditText 用于用户输入的时候，可使用双向绑定，同时，数据绑定库将输入反馈回视图模型。为此，咱们建立一个 setter 和 getter 并将属性绑定到 EditText 的 text 属性，这时候大括号前面的 = 号标志着咱们要在这里进行双向绑定。

另外，咱们只想在模型须要输入 text 的时候显示 EditText。这种状况下，咱们会在视图模型中提供一个布尔属性将其与 visibility 属性绑定。为了让它工做，咱们还要建立一个绑定适配器(BindingAdapter)，在值为 false 的时候设置 visibility 为 GONE，在值为 true 的时候设置为 VISIBLE。

@BindingAdapter("android:visibility")
public static void setVisibility(View view, boolean visible) {
   view.setVisibility(visible ? View.VISIBLE : View.GONE);
}
复制代码

最后，咱们想在点击 Button 时存储信息，因而，在视图模型中建立一个 onButtonClick() 命令，它负责处理与模型的交互。在布局中，咱们经过对该方法引用将命令绑定到 Button 的 onClick 属性上。为了使它直接工做，咱们须要在方法中引入一个 View 的单个参数，相似于 OnClickListener。若是你不想使用 View 参数，你也能够直接在布局中使用 lambda 表达式。

为方便测试，咱们须要在视图模型中展现逻辑处理，但要尽可能避免将逻辑处理直接放入其中。固然，你也能够自定义绑定适配器，这种方法更简单。 生命周期和状态 在实现 MVVM 架构的时候要考虑的另一件事情是，在应用中如何处理生命周期和状态。首先，我建议你为视图模型建立一个基类用于处理这类问题。

public abstract class BaseViewModel<V extends MvvmView> extends BaseObservable {
   private V view;
 
   @CallSuper public void attachView(V view, Bundle sis) {
       this.view = view;
       if(sis != null) { onRestoreInstanceState(sis); }
   }
  
   @CallSuper public void detachView() {
       this.view = null;
   }
 
   protected void onRestoreInstanceState(Bundle sis) { }
   protected void onSaveInstanceState(Bundle outState) { }
 
   protected final V view() { return view; }
}
复制代码

Activity 和 Fragment 中都有生命周期回调。如今它们都放在视图模型中来处理。所以，咱们须要传递生命周期回调。我建议使用两个回调，它们能知足大多数须要：标志着视图被建立出来的 attachView() 和标志着视图被销毁的 detachView()。在 attachView() 中，传入视图接口，用于在必要时向视图发送命令。attachView() 一般在 Fragment 的 onCreate() 或 onCreateView() 中调用，detachView() 则是在 onDestory() 和 onDestoryView() 中调用。

如今 Activity 和 Fragment 也提供回调，用于在系统销毁组件或配置发生变化时保存状态。咱们把状态保存在视图模型中，还须要将这些回调传递给视图模型。我建议把 savedInstanceState 直接传递至 attachView()，以便在这里自动恢复状态。另外一个 onSaveInstanceState() 方法须要用于保存状态，这个方法必须在 Activity 和 Fragment 的相关回调中调用。若是有 UI 状态，可为每一个视图模型建立单独的状态类，当这个类实现 Parcelable 时，保存和恢复状态都很容易，由于你只须要保存或恢复一个对象。视图

public abstract class BaseActivity<B extends ViewDataBinding, V extends MvvmViewModel> 
   extends AppCompatActivity implements MvvmView {
 
   protected B binding;
   @Inject protected V viewModel;
  
   protected final void setAndBindContentView(@LayoutRes int layoutResId, @Nullable Bundle sis) {
       binding = DataBindingUtil.setContentView(this, layoutResId);
       binding.setVariable(BR.vm, viewModel);
       viewModel.attachView((MvvmView) this, sis);
   }
 
   @Override @CallSuper protected void onSaveInstanceState(Bundle outState) {
       super.onSaveInstanceState(outState);
       if(viewModel != null) { viewModel.onSaveInstanceState(outState); }
   }
 
   @Override @CallSuper protected void onDestroy() {
       super.onDestroy();
       if(viewModel != null) { viewModel.detachView(); }
       binding = null;
       viewModel = null;
   }
}
复制代码

如今，让咱们讨论下视图的细节。上面例子是建立 activity 基类。View 模型可经过注入用于基类，以便初始化架构配置。而后你只须要在 activity 的 onCreate() 或 fragment 的 onCreateView() 中调用这个方法便可。

上面代码使用了 setAndBindContentView() 方法处理，和一般的 setContentView() 调用不一样，它能够在 onCreate() 中调用。此方法能设置内容视图并建立绑定，在绑定上设置视图模型变量，并将视图附加到视图模型上，同时还提供保存的示例状态。

如你所见，onSaveInstanceState() 和 detachView() 回调也能够在基类中实现。 onSaveInstanceState() 将回调转发到视图模型中，onDestroy() 则在视图模型上调用 detachView() 接口。

经过这样设置基类后，你就可使用 MVVM 架构编写 APP 了。 其余考虑项 了解 MVVM 架构 Android 应用的基础后，还需对应用程序架构作进一步完善。

依赖注入 使用依赖注入能够很是容易地将组件注入到视图模型中，并将组件很好的联合在一块儿，如使用 Dagger 2 依赖注入框架。

依赖注入能够进一步解耦代码，让代码更简单也更容易测试。同时，也大大加强了代码的可维护性。更重要的是，依赖接口能真正实现解耦。

业务逻辑注意：视图模型只包含呈现逻辑，因此不要把业务逻辑放在视图模型中。建立模型类的存储接口并选择的存储方式将其实现：

public interface ModelRepo {
   Single<List<Model>> findAll();
   Single<Model> findById(int id);
 
   void save(Model model);
   void delete(Model model);
}
复制代码

对于网络，则使用 Retrofit 建立网络相关的代码来实现定义的接口。

public interface ModelRepo {
   @GET("model")
   Single<List<Model>> findAll();
 
   @GET("model/{id}")
   Single<Model> findById(@Path("id") int id);
 
   @PUT("model")
   Completable create(@Body Model model);
}
复制代码

对于像查找、建立这样的基本操做，能够将存储库注入到视图模型中以获取和操做数据。对于其它更复杂的状况，好比校验，则须要建立独立的组件来实现这些行为，并将其注入到视图模型中。导航 Android 中另外一个重要内容是导航，由于你须要视图提供组件，它多是启动 Activity 的 Context，也多是替换 Fragment 的 FragmentManager。同时，使用视图接口来调用导航命令只会让架构变得更复杂。

所以，咱们须要一个独立的组件来处理应用中的导航。Navigator 接口定义了一些公共方法用于启动 Activity，处理 Fragment 并将它们注入视图模型中。你能够直接在视图模型中进行导航，而不须要 Context 或者 FragmentManager，由于这些都是由导航器的实现来处理的。

public interface Navigator {
   String EXTRA_ARGS = "_args";
 
   void finishActivity();
   void startActivity(Intent intent);
   void startActivity(String action);
   void startActivity(String action, Uri uri);
   void startActivity(Class<? extends Activity> activityClass);
   void startActivity(Class<? extends Activity> activityClass, Bundle args);
 
   void replaceFragment(int containerId, Fragment fragment, Bundle args);
   void replaceFragmentAndAddToBackStack(int containerId, @NonNull Fragment fragment, 
                                         Bundle args, String backstackTag);
 
   ...
}
复制代码

视图持有者能够在视图模型中使用导航器进行导航，十分方便。好比，点击回收视图的某张卡片能够启动新的 Activity。

单元测试最后，咱们了解一下视图模型和单元测试。正如前面提到的，MVVM 架构能简化测试呈现逻辑。我更通常使用 Mockito，它让我能够模拟视图接口和其它注入视图模型和组件。固然，你也可使用 PowerMock 来进行要求更高的测试，它使用字节码控制，能够模拟静态方法。

public class MyViewModelUnitTest {
   @Mock ModelRepo modelRepo;
   @Mock Navigator navigator;
   @Mock MvvmView myView;
   MyViewModel myViewModel;
 
   @Before public void setup() {
       MockitoAnnotations.initMocks(this);
       myViewModel = new MyViewModel(modelRepo, navigator);
       myViewModel.attachView(myView, null);
   }
 
   @Test public void buttonClick_submitsForm() {
       final Model model = new Model();
       doReturn(model).when(modelRepo).create();
 
       myViewModel.onButtonClick(null);
 
       verify(modelRepo).save(model);
       verify(navigator).finishActivity();
   }
}
复制代码

在 setup() 方法中初始化 mock，建立视图模型，同时注入 mock 对象并将视图接口附加到视图模型。写测试用例的时候，如有必要，先经过 Mockito 的 doReturn().when() 语法指定 mock 对象的行为。而后在视图模型中调用测试方法。最后使用断言和 verify() 方法检查返回值是否正确，检查 mock 的方法是否按预期进行调用。

总结

• 关于按照 ModelViewViewModel 模式使用数据绑定库组织 app 架构，总结以下： • 视图模型是视图和模型之间的中间介。 • 视图经过数据绑定自动更新视图模型的属性。 • 视图事件可调用视图模型中的命令。 • 视图模型也可在视图上调用命令。 • 在 Android 中，视图模型能够处理基本的生命周期回调和状态保存及恢复。 • 依赖注入有助于测试和得到更整洁的代码。 • 不要在视图模型中放置业务逻辑，它们只包含展现逻辑。另外，要使用存储库进行数据访问。 • 在 Android App 中导航请使用导航器组件。