MVVM 架构与数据绑定库

栏目: IOS · Android · 发布时间: 6年前

内容简介:Model-View-Presenter(MVP),即模型-视图-表示层,架构被广泛应用于 Android 应用程序,通过引入表示层将视图与表示逻辑和模型分离。Model-View-ViewModel(MVVM),即模型-视图-视图模型,与 MVP 非常相似,视图模型充当增强的表示层,使用数据绑定器保持视图模型和视图同步。通过将视图绑定到视图模型属性上,数据绑定程序可以处理视图更新而无需手动更改数据来设置视图(例如,不用再设置控件 TextView 的setTest() 或者 setVisibility()

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>
复制代码

接下来,在 标签中包装下布局中的顶层元素,以便为此布局创建绑定类。绑定类具有和布局 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 架构,以及它的三个组成部分是如何一起工作的。

视图是用户界面,即布局。在 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 中导航请使用导航器组件。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Algorithms and Data Structures

Algorithms and Data Structures

Kurt Mehlhorn、Peter Sanders / Springer / 2008-08-06 / USD 49.95

Algorithms are at the heart of every nontrivial computer application, and algorithmics is a modern and active area of computer science. Every computer scientist and every professional programmer shoul......一起来看看 《Algorithms and Data Structures》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

随机密码生成器
随机密码生成器

多种字符组合密码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换