美文网首页Android框架
DataBinding ObserVable 双向绑定

DataBinding ObserVable 双向绑定

作者: Michael0016 | 来源:发表于2017-03-06 17:05 被阅读0次

    Observable观察者

    我们知道,Data Binding中如果我们直接修改Model实体对象(也就是POJO)中的数据,这些数据并不能直接更新到UI,所以Data Binding给了我们一套很好的通知机制,分别有三类: Observable objects, observable fields, and observable collections,分别表示观察对象、观察字段、观察集合,若相应的对象、字段、集合中数据变化时候,那么UI将会自动更新数据。下面我们一一来介绍它们的用法:

    Observable objects

    因为Observable是个接口,Google为我们提供了一个BaseObservable类,我们只要把Model类继承自它就获得了通知UI更新数据的能力了,再getter方法上添加Bindable注解,在setter方法中使用notifying提醒UI更新数据。

    private static class User extends BaseObservable {
       private String userName;
       private String userPassword;
       public User(String userName, String userPassword) {
            this.userName = userName;
            this.userPassword = userPassword;
        }
    
        @Bindable
        public String getUserName() {
            return userName;
        }
    
        public void setUserName(String userName) {
            this.userName = userName;
            notifyPropertyChanged(BR.userName);
        }
    
        @Bindable
        public String getUserPassword() {
            return userPassword;
        }
    
        public void setUserPassword(String userPassword) {
            this.userPassword = userPassword;
            notifyPropertyChanged(BR.userPassword);
        }
    }
    

    首先我们需要在getter方法上添加Bindable注解后,Bindable注解会自动生成一个BR类,该类位于app module包下,通过BR类我们设置更新的数据,当Model中的数据发生变化时,setter方法中的notifyPropertyChanged()就会通知UI更新数据了。

    View(Activity)展示

       protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            NamePasswordBinding namePasswordBinding= DataBindingUtil.setContentView(this,R.layout.name_password);
            final com.bean.User user=new User("Michael","1234");
            namePasswordBinding.setUser(user);
            namePasswordBinding.loginBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    user.setUserName("qianrushi");
                    user.setUserPassword("123456");
                }
            });
    }
    

    效果如下:


    observable.gif

    ObservableFields

    我们刚刚介绍的通知UI更新的方法是用User类继承自BaseObservable,然后在getter上添加注解、在setter中添加notify方法,这感觉总是有点麻烦,步骤繁琐,于是,Google推出ObservableFields类,使用它我们可以简化我们的Model类,如:

    public class User{
        public final ObservableField<String> userName = new ObservableField<>();
        public final ObservableField<String> userPassword = new ObservableField<>();
    }
    

    onCreate()方法中的代码就变成了这样:

        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            NamePasswordBinding namePasswordBinding= DataBindingUtil.setContentView(this,R.layout.name_password);
            final com.bean.User user=new User();
            user.userName.set("Michael");
            user.userPassword.set("1234");
            namePasswordBinding.setUser(user);
            namePasswordBinding.loginBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    user.userName.set("qianrushi");
                    user.userPassword.set("123456");
                }
            });
         }
    

    效果如下:

    observable.gif

    当然ObservableField<T>中传入的泛型可以是Java中的基本类型,当然我们还可以使用 ObservableBoolean, ObservableByte, ObservableChar, ObservableShort, ObservableInt, ObservableLong, ObservableFloat, ObservableDouble, ObservableParcelable等具体的类型,效果也和ObservableField<T>是一样的,如:

    public class User{
        public final ObservableField<String> userName = new ObservableField<>();
        public final ObservableField<Integer> userPassword = new ObservableField<>();
        public final ObservableInt userAge = new ObservableInt();
    }
    

    Observable Collections

    Google也为我们提供了一些通知类型的集合,有这三种:ObservableArrayList<T>、ObservableArrayMap<K,V>、ObservableMap<K,V>,它和平场使用的List、Map用法一样,但是多了通知功能。
    我们在layout中的<data>区域导入包后就可以直接用它了,当它内部的数据发生改变时就自动会通知UI界面更新。
    下面xml布局使用ObservableMap<K,V>,当map中的数据改变时候同时也通知了UI界面更新。

    <layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">
    
        <data>
            <import type="android.databinding.ObservableMap"/>
            <import type="com.sunzxyong.binding.Keys"/>
            <variable
                name="map"
                type="ObservableMap<String,Object>"/>
        </data>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context=".MainActivity">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{map[Keys.name]}" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{String.valueOf(1+(Integer)map[Keys.age])}" />
            <Button
                android:id="@+id/btn"
                android:layout_marginTop="30dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="changeData" />
        </LinearLayout>
    </layout>
    

    onCreate()方法:

    protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            ActivityMainBinding mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
            final ObservableMap<String, Object> map = new ObservableArrayMap<>();
            map.put("name", "sunzxyong");
            map.put("age", 22);
            mBinding.setMap(map);
    
            mBinding.btn.setOnClickListener(new android.view.View.OnClickListener() {
                @Override
                public void onClick(android.view.View v) {
                    map.put("name","hello");
                    map.put("age",20);
                }
            });
    

    相关文章

      网友评论

        本文标题:DataBinding ObserVable 双向绑定

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