AndroidDataBinding-MVVM模式

作者: 君临城的狮子 | 来源:发表于2015-07-21 01:33 被阅读2616次

    前言:前些天公司大牛给我分享了这篇教程,我看了几遍,觉得真心不错,就在这里分享给大家了。

    本教程是跟着Data Binding Guide学习过程中得出的一些实践经验,同时修改了官方教程的一些错误,每一个知识点都有对应的源码,争取做到实践与理论相结合。
    Data Binding 解决了 Android UI 编程中的一个痛点,官方原生支持 MVVM 模型可以让我们在不改变既有代码框架的前提下,非常容易地使用这些新特性。其实在此之前,已经有些第三方的框架(RoboAndroid) 可以支持 MVVM 模型,无耐由于框架的侵入性太强,导致一直没有流行起来。
    Data Binding 框架一出,是不是也意味着像RoboGuice、ButterKnife这样的依赖注入框架也会慢慢失去市场,因为在 Java 代码中直接使用View变量的情况会越来越少。
    准备
    Android Studio 更新到 1.3 版本
    打开 Preferences,找到Appearances & Behavior下的Updates选项,把Automatically Check updates for修改成Canary Channel

    image

    注意
    Data Binding 是一个 support 包,因此与 Android M 没什么关系,可以不用下载 Android MNC Preview 的 SDK。
    新建一个 Project
    修改 Project 的build.gradle,为 build script 添加一条依赖,Gradle 版本为 1.2.3。

    classpath'com.android.tools.build:gradle:1.2.3'
    classpath'com.android.databinding:dataBinder:1.0-rc0'
    

    为用到 Data Binding 的模块添加插件,修改对应的build.gradle

    apply plugin:'com.android.databinding'
    

    基础
    工程创建完成后,我们通过一个最简单的例子来说明 Data Binding 的基本用法。
    布局文件
    使用 Data Binding 之后,xml的布局文件就不再单纯地展示 UI 元素,还需要定义 UI 元素用到的变量。所以,它的根节点不再是一个ViewGroup,而是变成了layout,并且新增了一个节点data。

    <layout xmlns:android="http://schemas.android.com/apk/res/android"> 
        <data> 
        </data> 
        <!--原先的根节点(Root Element)--> 
        <LinearLayout> 
        .... 
        </LinearLayout>
    </layout>
    

    要实现 MVVM 的 ViewModel 就需要把数据与UI进行绑定,data节点就为此提供了一个桥梁,我们先在data中声明一个variable,这个变量会为 UI 元素提供数据(例如 TextView 的 android:text),然后在 Java 代码中把"后台"数据与这个variable进行绑定。
    如果要用一个表格来展示用户的基本信息,用 Data Binding 应该怎么实现呢?
    数据对象
    添加一个 POJO 类 -User,非常简单,四个属性以及他们的 getter 和 setter。

        private final String firstName;
        private final String lastName;
        public User(String firstName,String lastName) {
            this.firstName = firstName;
            this.lastName = lastName;    
        }
        public String getFirstName() {
            return firstName;    
        }
        public String getLastName() {
            return lastName;    
        }
    }
    

    稍后,我们会新建一个User类型的变量,然后把它跟布局文件中声明的变量进行绑定。
    定义 Variable
    再回到布局文件,在data节点中声明一个变量user。

    <data>
        <variable name="user"  type="com.liangfeizc.databindingsamples.basic.User" />
    </data>
    

    其中type属性就是我们在 Java 文件中定义的User类。
    当然,data节点也支持import,所以上面的代码可以换一种形式来写。

    <data> 
        <import type="com.liangfeizc.databindingsamples.basic.User" />
        <variable name="user" type="User" />
    </data>
    

    然后我们刚才在 build.gradle 中添加的那个插件 -com.android.databinding会根据xml文件的名称Generate一个继承自ViewDataBinding的类。
    例如,这里 xml 的文件名叫activity_basic.xml,那么生成的类就是ActivityBasicBinding。
    注意
    java.lang.*包中的类会被自动导入,可以直接使用,例如要定义一个String类型的变量:

    <variable name="firstName" type="String" />
    

    绑定 Variable
    修改BasicActivity的onCreate方法,用DatabindingUtil.setContentView()来替换掉setContentView(),然后创建一个user对象,通过binding.setUser(user)与variable进行绑定。

    @Override
    protected void onCreate(BundlesavedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityBasicBinding binding = DataBindingUtil.setContentView(this,R.layout.activity_basic);
        User user = new User("fei","Liang");    
        binding.setUser(user);
    }
    

    除了使用框架自动生成的ActivityBasicBinding,我们也可以使用自定义的类名。

    <data class="com.example.CustomBinding">
    </data>
    

    注意
    ActivityBasicBinding类是自动生成的,所有的 set 方法也是根据variable名称生成的。例如,我们定义了两个变量。

    <data> 
        <variable name="firstName" type="String" /> 
        <variable name="firstName" type="" />
    </data>
    

    那么就会生成对应的两个 set 方法。

    setFirstName(StringfirstName);
    setLastName(StringlastName);
    

    使用 Variable
    数据与 Variable 绑定之后,xml 的 UI 元素就可以直接使用了。

    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@{user.lastName}" />
    

    至此,一个简单的数据绑定就完成了,可参考完整代码

    高级用法###

    使用类方法
    首先为类添加一个静态方法

    public class MyStringUtils{
    public static String capitalize(final String word) {
        if(word.length()>1){
            return String.valueOf(word.charAt(0)).toUpperCase()+word.substring(1);        
        }
        return word;    
        }
    }
    

    然后在 xml 的data节点中导入:

    <import type="com.liangfeizc.databindingsamples.utils.MyStringUtils" />
    

    使用方法与 Java 语法一样:

    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@{StringUtils.capitalize(user.firstName)}" />
    

    类型别名
    如果我们在data节点了导入了两个同名的类怎么办?

     <import type="com.example.home.data.User" />
     <import type="com.examle.detail.data.User" />
     <variable name="user" type="User" />
    

    这样一来出现了两个User类,那user变量要用哪一个呢?不用担心,import还有一个alias属性。

     <import type="com.example.home.data.User" />
     <import type="com.examle.detail.data.User" alias="DetailUser" />
     <variable name="user" type="User" />
    

    Null Coalescing 运算符

    android:text="@{user.displayName ?? user.lastName}"
    

    就等价于

    android:text="@{user.displayName != null ? user.displayName : user.lastName}"
    

    属性值
    通过${}可以直接把 Java 中定义的属性值赋值给 xml 属性。

    <TextView 
        android:text="@{user.lastName}" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:visibility="@{user.isAdult ? View.VISIBLE : View.GONE}"/>
    

    使用资源数据
    这个例子,官方教程有错误,可以参考Android Data Binder 的一个bug

    <TextView 
        android:padding="@{large? (int)@dimen/largePadding : (int)@dimen/smallPadding}" 
        android:background="@android:color/black" 
        android:textColor="@android:color/white" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@string/hello_world" />
    

    Observable Binding
    本来这一节的标题应该叫双向绑定,但是很遗憾,现在的Data Binding暂时支持单向绑定,还没有达到Angular.js的威力。
    要实现 Observable Binding,首先得有一个实现了android.databinding.Observable的类,为了方便,Android 原生提供了已经封装好的一个类 -BaseObservable,并且实现了监听器的注册机制。
    我们可以直接继承BaseObservable。

    public class ObservableUser extends BaseObservable{
        private String firstName;
        private String lastName;
        @Bindable 
        public String getFirstName() {
            return firstName;    
        }
        @Bindable 
        public String getLastName() {
            return lastName;    
        }
        public void setFirstName(String firstName) {
            this.firstName=firstName;
            notifyPropertyChanged(BR.firstName);   
        }
        public void setLastName(String lastName) {
            this.lastName=lastName;        
            notifyPropertyChanged(BR.lastName);    
        }
    }
    

    BR是编译阶段生成的一个类,功能与R.java类似,用@Bindable标记过getter方法会在BR中生成一个entry,当我们
    通过代码可以看出,当数据发生变化时还是需要手动发出通知。 通过调用notifyPropertyChanged(BR.firstName)来通知系统BR.firstName这个entry的数据已经发生变化,需要更新 UI。
    除此之外,还有一种更细粒度的绑定方式,可以具体到成员变量,这种方式无需继承BaseObservable,一个简单的POJO就可以实现。

    public class PlainUser{
        public final ObservableField<String>         
        firstName = new ObservableField<>();
        public final ObservableField<String>     
        lastName = new ObservableField<>();
        public final ObservableInt age = new ObservableInt();
    }
    

    系统为我们提供了所有的primitive type所对应的Observable类,例如ObservableInt、ObservableFloat、ObservableBoolean等等,还有一个ObservableField对应着reference type
    剩下的数据绑定与前面介绍的方式一样,具体可参考ObservableActivity
    带 ID 的 View
    Data Binding有效降低了代码的冗余性,甚至完全没有必要再去获取一个 View 实例,但是情况不是绝对的,万一我们真的就需要了呢?不用担心,只要给 View 定义一个 ID,Data Binding就会为我们生成一个对应的final变量。

    <TextView 
        android:id="@+id/firstName" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" />
    

    上面代码中定义了一个 ID 为firstName* 的TextView,那么它对应的变量就是

    public final TextView firstName;
    

    具体代码可参考ViewWithIDsActivity.java
    ViewStubs
    xml中的ViewStub经过 binding 之后会转换成ViewStubProxy, 具体代码可参考ViewStubActivity.java
    简单用代码说明一下,xml 文件与之前的代码一样,根节点改为layout,在LinearLayout中添加一个ViewStub,添加ID

    <layout xmlns:android="http://schemas.android.com/apk/res/android">
         <LinearLayout 
                ...> 
             <ViewStub 
                 android:id="@+id/view_stub" 
                 android:layout="@layout/view_stub"
                 ... />
         </LinearLayout>
    </layout>
    

    在 Java 代码中获取binding实例,为ViewStubProy注册ViewStub.OnInflateListener事件,搞定!

    binding = DataBindingUtil.setContentView(this,R.layout.activity_view_stub);
    binding.viewStub.setOnInflateListener(new ViewStub.OnInflateListener() {
        @Override 
        public void onInflate(ViewStub stub,View inflated) {
            ViewStubBinding binding = DataBindingUtil.bind(inflated);
            User user = new User("fee","lang");        
            binding.setUser(user);    
        }
    });
    

    Dynamic Variables
    完整代码可以参考dynamic
    以RecyclerView为例,Adapter的DataBinding需要动态生成,因此我们可以在onCreateViewHolder的时候创建这个DataBinding,然后在onBindViewHolder中获取这个DataBinding

    public static class BindingHolder extends RecyclerView.ViewHolder{
        private ViewDataBinding binding;
        public BindingHolder(View itemView) {
            super(itemView);    
        }
        public ViewDataBinding getBinding() {
            return binding;   
        }
        public void setBinding(ViewDataBinding binding) {
            this.binding = binding;    
        }
    }
    @Override 
    public BindingHolder onCreateViewHolder(ViewGroup viewGroup,inti) {
        ViewDataBinding binding = DataBindingUtil.inflate(LayoutInflater.from(viewGroup.getContext()),R.layout.list_item,            viewGroup,false);
        BindingHolder holder = new BindingHolder(binding.getRoot()); 
        holder.setBinding(binding);
        return holder;
    }
    @Override 
    public voidon BindViewHolder(BindingHolder holder,int position) {
        User user = users.get(position);        
        holder.getBinding().setVariable(BR.user, user);    
        holder.getBinding().executePendingBindings();
    }
    

    注意此处DataBindingUtil的用法:

    ViewDataBinding binding = DataBindingUtil.inflate(LayoutInflater.from(viewGroup.getContext()),R.layout.list_item, viewGroup, false);
    

    Attribute setters
    有了Data Binding,即使属性没有在declare-styleable中定义,我们也可以通过 xml 进行赋值操作。 为了演示这个功能,我自定义了一个 View -UserView,其中R.styleable.UserView中只定义了一个age属性,其中firstName和lastName只有对应的两个setter方法。
    只要有setter方法就可以这样为属性赋值:

    <com.liangfeizc.databindingsamples.attributesetters.UserView
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:paddingLeft="@dimen/largePadding" 
        app:onClickListener="@{activity.clickListener}" 
        app:firstName="@{@string/firstName}" 
        app:lastName="@{@string/lastName}" 
        app:age="27" />
    

    onClickListener也是同样道理,只不过我们是在Activity中定义了一个Listener。
    转换器 (Converters)
    重要
    使用Converter一定要保证它不会影响到其他的属性,例如这个@BindingConversion-就会影响到, 因为他们都是都符合从 int 到 int 的转换。
    具体代码可参考ConversionsActivity.java
    在 xml 中为属性赋值时,如果变量的类型与属性不一致,通过DataBinding可以进行转换。

    <Button 
        android:onClick="toggleIsError" 
        android:text="@{isError.get() ? @color/red : @color/white}" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" />
    

    只需要定义一个标记了@BindingConversion的静态方法即可:

    @BindingConversion
    public static int convertColorToString(intcolor) {
        switch(color) {
            caseColor.RED:
                return R.string.red;
            caseColor.WHITE:
                return R.string.white;    
        }
        return R.string.app_name;
    }
    

    include
    用法可以参考代码 IncludeActivity.java
    如果在非根节点的 ViewGroup 中使用include会导致 crash,已经在 StackOverflow 上提了一个问题Android Data Binding makes app crash when using include tag in a non-root ViewGroup

    转载自(源码下载): LyndonChin/MasteringAndroidDataBinding · GitHub

    相关文章

      网友评论

      本文标题:AndroidDataBinding-MVVM模式

      本文链接:https://www.haomeiwen.com/subject/yzppqttx.html