MVVM 架构与数据绑定库

作者 : 开心源码 本文共12340个字,预计阅读时间需要31分钟 发布时间: 2022-05-12 共185人阅读

Model-View-Presenter(MVP),即模型-视图-表示层,架构被广泛应用于 Android 应用程序,通过引入表示层将视图与表示逻辑和模型分离。Model-View-ViewModel(MVVM),即模型-视图-视图模型,与 MVP 非常类似,视图模型充任加强的表示层,使用数据绑定器保持视图模型和视图同步。通过将视图绑定到视图模型属性上,数据绑定程序可以解决视图升级而无需手动更改数据来设置视图(例如,不用再设置控件 TextView 的setTest() 或者者 setVisibility() 属性)。与 MVP 中的表示层一样,视图模型可以很容易地进行单元测试。本文详情了数据绑定库和 MVVM 架构模式,以及它们在 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 注入库也没有使情况改善。而数据绑定库就能很好地处理这个问题。

在编译时创立一个绑定类,它为所有视图提供一个 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 Activitybinding = DataBindingUtil.setContentView(this, R.layout.layout);// For Fragmentbinding = DataBindingUtil.inflate(inflater, R.layout.layout, container, false);// For ViewHolderbinding = DataBindingUtil.bind(view); // Access the View with ID text_viewbinding.textView.setText(R.string.sometext); // Setting declared variablesbinding.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 中导航请使用导航器组件。**

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » MVVM 架构与数据绑定库

发表回复