MVVM之DataBinding入门
目录
MVVM介绍
不习惯简书界面，可以试试蚂蚁笔记生成的博客地址 dataBinding,我的博客地址
本篇这是基础入门篇，要想看源码剖析请移步到 DataBinding实现原理探析
MVVM框架类似于早期的MVC和最热的MVP，但是比起这两个更为强势。MV-VM相比于MVP，其实就是将Presenter层替换成了ViewModel层，我们都知道，MVP的好处就是将逻辑代码从View层抽离出来，做到与UI层的低耦合，但是无形中会创造出许多的接口，有些接口很是冗余，不仅如此，当后期修改数据或者添加新的功能还需要修改或是添加接口，很是麻烦。
这个时候MV-VM的优势就体现出来了，ViewModel层所需要做的完全就是跟逻辑相关的代码，完全不会涉及到UI。当数据变化，直接驱动UI的改变，中间省去了冗余的接口。同时，在ViewModel层编写代码中，要求开发者需要将每个方法尽可能的做的功能单一，不与外部有任何的引用或者是联系，无形中提高了代码的健壮性，方便了后期的单元测试。
DataBinding其实就是谷歌出台的工具，是实现UI和数据绑定的框架，View和ViewModel通过DataBinding实现单向绑定或双向绑定，做到UI和数据的相互监听，同时开发者的任务分配也就很明确了，负责ViewModel的小伙伴完全不用考虑UI如何实现，很大程度上提高了代码的开发效率和后期出问题跟踪的准确性，针对这些好处，采用MVVM进行代码开发还是非常有必要的。
初步使用
1. module的build.gradle文件加上一行配置代码
android {
...
dataBinding {
enabled = true
}
}
2. 创建布局文件
只需要在之前布局的基础上，外层嵌套 <layout></layout>即可。
<layout
xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<variable
name="student"
type="com.xiaweizi.bean.Student"/>
<!-- 这里 type 必须传完整路径，或者用 import 方式也是可以的 -->
<!--
<import type="com.xiaweizi.bean.Student"/>
<variable
name="student"
type="Student"/>
-->
</data>
<!-- 对应之前的XML文件 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
</LinearLayout>
</layout>
因为XML是不支持自定义导包的，所以通过import先导包，如果类名相同的话可以通过alias进行区分：
<import type="android.view.View"/>
<import type="com.xiaweizi.View"
alias="MyView"/>
<variable
name="view1"
type="View"/>
<variable
name="view2"
type="MyView"/>
这个时候会在app\build\generated\source\debug\包名路径下生成对应的binding类，命名方式，举个例子最为直接：
原XML名:activity_main ----> 生成对应的binding名: ActivityMainBinding
3. Activity中替换原来的setContentView()代码
ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
4. 接下来就是关键的ViewModel层
a. 单向绑定
咱们先从简单的开始，DataBinding有个很大的好处就是摒弃原生findViewById频繁的遍历视图层和ButterKnife的反射，采用的是数组记录每个view
final Object[] bindings = mapBindings(bindingComponent, root, 8, sIncludes, sViewsWithIds);
在XML创建一个TextView
<TextView
android:id="@+id/tv_content"
android:text="@{student.name}"
android:layout_width="match_parent"
android:layout_height="50dp"/>
在代码中通过binding直接可以获取到这个TextView
mBinding.tvContent
那么如何实现单向绑定呢？
Student student = new Student("xiaweizi", 12);
mBinding.setStudent(student);
这样就可以直接改变TextView的值。
ViewModel就是简单的数据
public class Student {
public String name;
public int age;
public Student(String name, int age) {
this.name = name;
this.age = age;
}
}
b. 双向绑定
之前说的单向绑定，即当数据变化，通过mBinding.setStudent(student)方式驱动UI的改变
而双向绑定，无论View还是ViewModel谁改变，都会驱动另一方的改变，实现双向绑定有两种方式：继承BaseObservable和使用ObservableField创建成员变量。
代码实现：
第一种继承BaseObservable：
public class Student extends BaseObservable{
// 如果是 public 则在成员变量上方加上 @Bindable 注解
@Bindable
public String sex;
public void setSex(String sex) {
this.sex = sex;
notifyPropertyChanged(BR.sex);
}
/*************************** 我是分割线 ***************************/
// 如果是 private 则在成员变量的 get 方法中添加 @Bindable 注解
private String name;
@Bindable
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
notifyPropertyChanged(BR.name);
}
public void setSexName(String name, String sex){
this.name = name;
this.sex = sex;
notifyChange();
}
}
这个时候当调用setName()方法,不仅数据改变，UI中的TextView内容也会随之改变。
我们可以发现有两个方法：notifyPropertyChanged()和notifyChange,一个是更新指定的变量，第二个是更新所有该ViewModel中的对象。
而notifyPropertyChanged(int fieldId)里面传的参数，即上面通过@Bindable注解创建对应的变量id。
第二种：使用ObservableField
public class Student extends BaseObservable{
public ObservableField<String> name = new ObservableField<>();
private ObservableInt age = new ObservableInt();
public void setAge(int age) {
this.age.set(age);
}
public int getAge() {
return age.get();
}
}
通过使用ObservableField创建的对象作用相当于第一种的方案，支持ObservableInt、ObservableBoolean或者是ObservableField<T>指定的类型、ObservableArrayMap<String, Object>、ObservableArrayList<Object>等。
ObservableField内部已经封装了get和set方法，如果成员变量是public属性，直接通过
mStudent.name.set("shabi");
String name = mStudent.name.get();
设置和获取对应的成员变量的值。
其他使用
学会了上面基本的用户还是远远不够的，像按钮的点击事件或是EditText内容的监听，这些也是非常重要的，不过学会了一种，其他的举一反三就会容易的多了。
1. 事件处理
dataBinding需要你通过一些表达式来处理view的分发事件，除了少数例子外，事件元素的名称是由监听器中的方法所控制。比如View.OnLongClickListener内部有onLongClick()方法，所以XML定义的事件就为android:onLongClick.
可以直接在Activity内部定义一个类，用于处理事件的监听
public class Presenter {
public void onClickExample(View view) {
Toast.makeText(SimpleActivity.this, "点到了", Toast.LENGTH_SHORT).show();
}
public void onTextChanged(CharSequence s, int start, int before, int count) {
mStudent.name.set(s.toString());
}
public void onClickListenerBinding(Student student) {
Toast.makeText(SimpleActivity.this, student.name.get(),Toast.LENGTH_SHORT).show();
}
}
XML中:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="输入name"
android:onTextChanged="@{presenter::onTextChanged}"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="@{presenter.onClickExample}"
android:text='@{"年龄：" + student.age}'/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:onClick="@{() -> presenter.onClickListenerBinding(student)}"
android:text='@{"姓名：" + student.name}'/>
首先从点击事件开始分析，android:onClick="@{presenter.onClickExample}" 里面对应的方法自然是要与Presenter定义的方法名一致，名字可以不为onClickExample，但是参数必须是View，参数要对应于setOnClickListener(onClickListener listener)对应的onClickListener要实现的接口，即public void onClick(View)。
同理，监听EditText文本的变化，一般只要注意onTextChanged(CharSequence s, int start, int before, int count)方法即可，那么我们可以创建与之对应的方法，在XML文件中引用：android:onTextChanged="@{presenter::onTextChanged}"。
最后再来看从UI中获取数据，也就是数据的回调，即DataBinding的精髓支出，View和ViewModel双向绑定。android:onClick="@{() -> presenter.onClickListenerBinding(student)}这里用到了lamda表达式，这样就可以不遵循默认的方法签名，将student对象直接传回点击方法中。来看一下实现效果：
简单测试.gif
一目了然，我就不赘述了，我们可以发现一点，一开始我们并没有给Student对象设置值，所以显示的是null，并没有报空指针异常，这也是DataBinding的有点之一。
其实dataBinding自带对数据监听的方法：
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@={student.name}"/>
代码中：
student.addOnPropertyChangedCallback(new Observable.OnPropertyChangedCallback() {
@Override
public void onPropertyChanged(Observable observable, int i) {
// i 为 BR 文件中对应的 int 值
Log.i("xwz--->", student.getName());
Log.i("xwz--->", student.getAge());
}
});
这个对数据的监听建立在，使用@Bindable作为双向绑定为条件，当数据变化，便会出发onPropertyChanged方法。需要注意的是android:text="@={student.name}"，@后面多了一个=。
2. ViewStub和include
dataBinding同样是支持ViewStub的，使用起来也很简单，直接贴代码了。
<ViewStub
android:id="@+id/view_stub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout="@layout/viewstub"/>
代码中：
View inflate = binding.viewStub.getViewStub().inflate();
inflate即为替代ViewStub的View.
至于include更简单，用法跟以前是差不多，唯一不同的是可以将ViewModel传到下一个XML中：
<include layout="@layout/layout_include" bind:student="@{student}"/>
layout_include中同样可以共享student这个对象。
3. BindingAdapter的使用
我们之前用的都是Android自带的监听或是属性，比如text、onClick，但是如果项目中需要动态改变ImageView的内容，那我们应该怎么办呢？dataBinding给我们提供了BindingAdapter这个注解，方便我们定义自定义的属性。
假如我们有个需求，点击按钮更换图片，这个时候我们需要定义静态的方法：
@BindingAdapter({"url", "name"})
public static void loadImageView(ImageView view, String url, String name) {
Log.i("xwz--->", url + "\t" + name);
Glide.with(view.getContext())
.load(url)
.into(view);
}
在XML中使用
<ImageView
android:layout_width="160dp"
android:layout_height="160dp"
bind:name="@{student.name}"
bind:url="@{student.imgUrl}"/>
这里有必要解释一下，静态方法loadImageView里第一个参数为作用的View，这里是ImageView;后面的参数即分别对应于@BindingAdapter里面的参数。那这里是怎么跟View联系在一块呢？我们发现XML中有这样一行代码bind:name="@{student.name}这里的name对应的的@BindingAdapter注解里的参数name，并映射于ViewModel中的student.name。当student.name值改变，就会触发loadImageView方法，从而执行里面的方法。
bind名称是任意的定义的，不过要定义对应的命名空间xmlns:bind="http://schemas.android.com/apk/res-auto"。
实现的效果就很简单了：
bindAdapter.gif
更强大的在于可以覆盖Android原生的元素设置属性，比如android:text最常见不过了
@BindingAdapter ("android:text")
public static void setText(TextView view, String text) {
view.setText(text + "xiaweizi");
Log.i("xwz--->", text);
}
XML：
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text='@{"测试"}'/>
这个时候所有设置text的地方后缀全部加上了xiaweizi.
4. @BindingConversion
dataBinding还支持对数据的转换，或者是类型的转换
@BindingConversion
public static String addString(String text){
Log.i("xwz--->", "DemoBindingAdapter: " + "addString: " + text);
return text + "xiaweizi";
}
这个时候会将项目中所有以@{String}方式用到的String后缀全部加上xiaweizi.
@BindingConversion
public static ColorDrawable convertColorToDrawable(int color){
return new ColorDrawable(color);
}
XML:
<View
android:background="@{isError ? @color/red : @color/white}"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
这段代码的作用在于将int类型的color值，转换成了ColorDrawable类型.
5. DataBindingComponent
通过BindingAdapter是可以增加一些自定义的属性或者是修改Android原生的属性，但是它有一个弊端，就是全局修改所有的相关属性，不过配合上DataBindingComponent就可以解决这个问题。
DataBindingUtil.setContentView(this, R.layout.activity_component, new FirstComponent());
开始的是以一个参数的形式传入这个View中，那么只作用于当前的view。
DataBindingUtil.setDefaultComponent(new FirstComponent());
或者是这种设置全局的方式，也可以改变。
DataBindingComponent其实是一个空方法的接口，你需要先创建一个拥有@BindingAdapter的类，这里就不能定义为public，因为这样DataBindingComponent就找不到对应的类，我们为了方便后期的开发，可以定义一个抽象类：
public abstract class AbstractAdapter {
@BindingAdapter ("text")
public abstract void setText(TextView textView, String text);
}
然后定义一个实现类：
public class FirstAdapter extends AbstractAdapter{
@Override
public void setText(TextView textView, String text) {
Log.i("xwz--->", "FirstAdapter: " + "setText: ");
textView.setText(text+"first");
}
}
这个时候当你创建一个实现DataBindingComponent接口的类时，会发现让你实现一个方法：
public class FirstComponent implements android.databinding.DataBindingComponent {
@Override
public AbstractAdapter getAbstractAdapter() {
return new FirstAdapter();
}
}
这里返回的就是创建的adapter，可以根据需求创建对应的component.
RecyclerView中的应用
除了最基本的使用，还有一个频繁出现的就是列表了，那么我们这里就拿RecyclerView作为代表进行演示。
RecyclerView的好处就不多说了，已经完全代替了之前的ListView和GridView，用法也就不赘述了，这里主要介绍一下适配器的编写。虽然网上有很多大神已经帮我们创建了各种通用的adapter，不过作为入门，我们还是要学习一下使用dataBinding创建adapter.
先来个简单的XML文件：
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<import type="com.github.markzhai.sample.Person"/>
<variable
name="person"
type="Person"/>
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24sp"
android:padding="5dp"
android:textColor="#f0f"
android:text='@{"姓名：" + person.name, default="aaa"}'/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:padding="2dp"
android:textColor="#090"
android:gravity="right"
android:layout_marginRight="80dp"
android:text='@{"年龄：" + person.age, default=12}'/>
</LinearLayout>
</layout>
至于ViewModel就是一个简单的Person类，拥有name和age两个属性，接下来就是adapte的编写。
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private List<Person> mList;
public MyAdapter() {
mList = new ArrayList<>();
}
public void setData(List<Person> persons) {
this.mList = persons;
}
@Override
public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
ItemRecyclerBinding itemBinding =
DataBindingUtil.inflate(LayoutInflater.from(parent.getContext()),
R.layout.item_recycler,
parent,
false);
return new ViewHolder(itemBinding);
}
@Override
public void onBindViewHolder(MyAdapter.ViewHolder holder, int position) {
holder.bind(mList.get(position));
}
@Override
public int getItemCount() {
return mList.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder {
final ItemRecyclerBinding itemBinding;
public ViewHolder(ItemRecyclerBinding binding) {
super(binding.getRoot());
this.itemBinding = binding;
}
void bind(Person person) {
itemBinding.setPerson(person);
}
}
}
通过DataBindingUtil.inflate()创建item布局，在ViewHolder中进行数据的绑定，这个时候，当数据源变化的时候，RecyclerView中的数据也跟着变化。
至于item的点击事件可以上面的onClick写法：
创建Presenter处理点击事件：
public static class Presenter{
ItemRecyclerBinding mBinding;
public Presenter(ItemRecyclerBinding binding){
this.mBinding = binding;
}
public void onItemClick(Person person){
Log.i("xwz--->", "name: " + person.getName() + "\tage: " + person.getAge());
Toast.makeText(mBinding.getRoot().getContext(), "name: " + person.getName() + "\tage: " + person.getAge(), Toast.LENGTH_SHORT).show();
}
}
在之前的bind方法中进行绑定：
void bind(Person person) {
itemBinding.setPerson(person);
itemBinding.setPresenter(new Presenter(itemBinding));
}
在XML中设置点击事件即可：
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="@{() -> presenter.onItemClick(person)}"
android:orientation="vertical">
...
</LinearLayout>
这里就可以直接将数据直接回传。
看一下运行效果：
RecyclerView的使用.gif
一些细节
databinding支持一些java的表达式
+ - * / %- 字符串的连接
"a"+"b" - 逻辑和位运算
&& || & | - 一元运算
+ - ! ~ - 移位
>> >>> << - 比较
== > < >= <= instance of- 支持数据类型:
character,String,numeric,null - 强转
cast - 方法的调用
- 成员变量的访问
- 数组访问
- 三元表达式
? :
简单例子：
android:text="@{String.valueOf(index + 1)}"
android:visibility="@{age < 13 ? View.GONE : View.VISIBLE}"
android:transitionName='@{"image_" + id}'
dataBinding不支持的Java特性
this- super
- new
- 泛型
dataBinding判空处理
使用??来进行判空操作
android:text="@{user.displayName ?? user.lastName}"
如果不为空则选择左侧值，否则选择右侧值，类似于：
android:text="@{user.displayName != null ? user.displayName : user.lastName}"
支持数组，集合，map
<data>
<import type="android.util.SparseArray"/>
<import type="java.util.Map"/>
<import type="java.util.List"/>
<variable name="list" type="List<String>"/>
<variable name="sparse" type="SparseArray<String>"/>
<variable name="map" type="Map<String, String>"/>
<variable name="index" type="int"/>
<variable name="key" type="String"/>
</data>
…
android:text="@{list[index]}"
…
android:text="@{sparse[index]}"
…
android:text="@{map[key]}"
资源的访问
dataBinding支持一般语法对资源的访问：
android:padding="@{large? @dimen/largePadding : @dimen/smallPadding}"
小结
dataBinding主要的作用就在于减少Activity和Fragment层的代码,不再使用findViewById，让XML从之前只用于显示视图，到现在可以做一些操作。在性能上更是有很大的提高，内部采用0反射，使用位标记检测需要更新的view，每次数据的改变是在下一帧开始改变等等。
当然也有一些不足之处，Android Studio的IDE支持还不是那么完善，在XML中一些方法不能智能生成和跳转，还有就是报错的错误信息，有的时候并不能定位到准确的位置。不过总体上来说dataBinding带来的好处远远的超过这些不足，所以还没有尝试的小伙伴，不妨试一试，相信你会爱上他的。
