MVVM 架构与数据绑定库

时间：2022-12-09 21:13:41

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


数据绑定

什么是数据绑定？

MVVM 架构与数据绑定库

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

数据绑定库的好处

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 注入库也没有使情况改善。而数据绑定库就能很好地解决这个问题。

在编译时创建一个绑定类，它为所有视图提供一个 ID 字段，因此不再需要调用 findViewById() 方法。实际上，这种方式比调用 findViewById() 方法快数倍，因为数据绑定库创建代码仅需要遍历视图结构一次。

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

如何设置数据绑定？

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>
接下来，在 <layout> 标签中包装下布局中的顶层元素，以便为此布局创建绑定类。绑定类具有和布局 xml 文件相同的名称，只是在结尾添加 Binding，例如， Activity_main.xml 的绑定类名字是 ActivityMainBinding。 如上所示，命名空间的声明也移到布局标记中。然后，在布局标记内声明将需要绑定的数据作为变量，并设置好名称和类型。示例中，唯一的变量是视图模型，但后续变量会增加。你可以选择导入类，以便能使用 View.VISIBLE 或静态方法等常量。
如何绑定数据？ 
<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 架构与数据绑定库

现在来看看 MVVM 架构，以及它的三个组成部分是如何一起工作的。

  1. 视图是用户界面，即布局。在 Android 中通常是指 Activity、Fragment 或者 ViewHolder 以及配合它们使用的 XML 布局文件。
  2. 模型就是业务逻辑层，提供方法与数据进行互动。
  3. 视图模型就像是视图和模型的中间人，它既能访问模型的数据，又包含 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);
}




标签：

相关文章