Android DataBinding實現MVVM架構 Get Started

DataBinding 是Google官方發布的一個框架,顧名思義即為數據綁定,實現了MVVM架構, 增強了xml的功能, 大幅度精簡了java代碼量,使代碼邏輯更加清晰。 MVVM 相對於 MVP,其實就是將 Presenter 層替換成了 ViewModel 層。 DataBinding 能夠省去我們一直以來的findViewById() 步驟,大量減少Activity 內的代碼,數據能夠單向或雙向綁定到layout 文件中,有助於防止內存洩漏,而且能自動進行空檢測以避免空指針異常。

啟用 DataBinding 的方法是在對應 Model 的 build.gradle 文件裡加入以下代碼,同步後就能引入對 DataBinding 的支持
android {
    dataBinding {
        enabled = true
    }
}

一.基礎入門

啟用 DataBinding 後,這裡先來看下如何在佈局文件中綁定指定的變量

打開佈局文件後,點選佈局中的ViewGroup,按住Alt+Enter,點擊 “Convert to data binding layout”,就可以生成 DataBinding 需要的佈局規則


<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    </android.support.constraint.ConstraintLayout>
</layout>

和原始佈局的區別在於多出了一個layout 標籤將原佈局包裹了起來,data 標籤用於聲明要用到的變量以及變量類型,要實現MVVM 的ViewModel 就需要把數據(Model)與UI(View)進行綁定,data 標籤的作用就像一個橋樑搭建了View 和Model 之間的通道

這裡先來聲明一個 Model
public class User {

    private String name;

    private String password;
 
    ···
}
在 data 標籤裡聲明要使用到的變量名稱、類別的全路徑
<data>
    <variable
        name="user"
        type="com.yang.mymvvmpractice.model.User" />
</data>

layout

佈局根節點必須是<layout> . 同時layout只能包含一個View標籤. 不能直接包含<merge>

data

 <data> 標籤的內容即DataBinding的數據. data標籤只能存在一個.

Variable

通過 <variable> 標籤可以指定類, 然後在控件的屬性值中就可以使用
<data>
    <variable name="user" type="com.yang.mymvvmpractice.model.User" />
</data>
通過DataBinding的 setxx() 方法可以給Variable設置數據. name值不能包含 _ 下劃線

import

如果 User 類型要多處用到,也可以直接將之 import 進來,這樣就不用每次都指明整個包名路徑了,而 java.lang.* 包中的類會被自動導入,所以可以直接使用

如果存在 import 的类名相同的情况,可以使用 alias 指定别名
<data>
    <import type="com.yang.mymvvmpractice.model.User" />
    <import
        alias="TempUser"
        type="com.yang.mymvvmpractice.model2.User" />
    <variable
        name="userInfo"
        type="User" />
    <variable
        name="tempUserInfo"
        type="TempUser" />
</data>
使用類別
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@{user.userName}"
    />
<!--user就是在Variable標籤中的name, 可以隨意自定義, 然後就會使用type中的類別-->

class

 <data> 標籤有個屬性 <class> 可以自定義DataBinding生成的類名以及路徑
<!--自定義類名-->
<data class="CustomDataBinding"></data>

<!--自定義生成路徑以及類型-->
<data class=".CustomDataBinding"></data> <!--自動在包名下生成包以及類別-->
默認:
public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // ActivityMainBinding這個類別根據layout名稱生成(id+Binding)
    ActivityMainBinding viewDataBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);

    UserBean userBean = new UserBean();
    userBean.setUserName("Hulk");

    // setUser這個方法根據Variable標籤的name屬性自動產生
    viewDataBinding.setUser(userBean);
  }
}

alias

 <variable> 標籤如果需要導入(import)兩個同名的類時可以使用 alias 屬性(別名屬性)
<data>
    <import type="com.yang.mymvvmpractice.model.User" />
    <import
        alias="TempUser"
        type="com.yang.mymvvmpractice.model2.User" />
    <variable
        name="userInfo"
        type="User" />
    <variable
        name="tempUserInfo"
        type="TempUser" />
</data>

include

在include其他佈局的時候可能需要傳遞變量(variable)值過去
<variable
    name="userName"
    type="String"/>

....

<include
    layout="@layout/include_demo"
    bind:userName="@{userName}"/>
include_demo
<data>

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

...

android:text="@{userName}"
兩個佈局通過 include bind:<變量名> 值來傳遞. 而且兩者必須有同一個變量

二・單向數據綁定

實現數據變化自動驅動 UI 刷新的方式有三種:BaseObservableObservableFieldObservableCollection

BaseObservable

一個純淨的 ViewModel 類被更新後,並不會讓 UI 自動更新。而數據綁定後,我們自然會希望數據變更後 UI 會即時刷新,Observable 就是為此而生的概念

BaseObservable 提供了notifyChange()notifyPropertyChanged() 兩個方法,前者會刷新所有的值域,後者則只更新對應BRflag,該BR 的生成通過註釋@Bindable 生成,可以通過BR notify 特定屬性關聯的視圖
public class Goods extends BaseObservable {

    //如果是 public 修饰符,则可以直接在成员变量上方加上 @Bindable 注解
    @Bindable
    public String name;

    //如果是 private 修饰符,则在成员变量的 get 方法上添加 @Bindable 注解
    private String details;

    private float price;

    public Goods(String name, String details, float price) {
        this.name = name;
        this.details = details;
        this.price = price;
    }

    public void setName(String name) {
        this.name = name;
        //只更新本字段
        notifyPropertyChanged(com.leavesc.databinding_demo.BR.name);
    }

    @Bindable
    public String getDetails() {
        return details;
    }

    public void setDetails(String details) {
        this.details = details;
        //更新所有字段
        notifyChange();
    }

    public float getPrice() {
        return price;
    }

    public void setPrice(float price) {
        this.price = price;
    }

}
實現了 Observable 接口的類允許註冊一個監聽器,當可觀察對象的屬性更改時就會通知這個監聽器,此時就需要用到 OnPropertyChangedCallback 

當中 propertyId 就用於標識特定的字段
        goods.addOnPropertyChangedCallback(new Observable.OnPropertyChangedCallback() {
            @Override
            public void onPropertyChanged(Observable sender, int propertyId) {
                if (propertyId == com.leavesc.databinding_demo.BR.name) {
                    Log.e(TAG, "BR.name");
                } else if (propertyId == com.leavesc.databinding_demo.BR.details) {
                    Log.e(TAG, "BR.details");
                } else if (propertyId == com.leavesc.databinding_demo.BR._all) {
                    Log.e(TAG, "BR._all");
                } else {
                    Log.e(TAG, "未知");
                }
            }
        });
BaseObservable和Observable的區別:

  1. BaseObservable是實現了Observable的類, 幫我們實現了監聽器的線程安全問題.
  2. BaseObservable使用了PropertyChangeRegistry來執行OnPropertyChangedCallback
  3. 所以我不推薦你直接實現Observable.

ObservableField

繼承於 Observable 類相對來說限制有點高,且也需要進行 notify 操作,因此為了簡單起見可以選擇使用 ObservableField。 ObservableField 可以理解為官方對BaseObservable 中字段的註解和刷新等操作的封裝,官方原生提供了對基本數據類型的封裝,例如ObservableBoolean、ObservableByte、ObservableChar、ObservableShort、ObservableInt、ObservableLong、ObservableFloat、ObservableDouble 以及ObservableParcelable ,也可通過ObservableField 泛型來申明其他類型
public class ObservableGoods {

    private ObservableField<string> name;

    private ObservableFloat price;

    private ObservableField<string> details;

    public ObservableGoods(String name, float price, String details) {
        this.name = new ObservableField<>(name);
        this.price = new ObservableFloat(price);
        this.details = new ObservableField<>(details);
    }

    ```
}
對 ObservableGoods 屬性值的改變都會立即觸發 UI 刷新,概念上與 Observable 區別不大,具體效果可看下面提供的源代碼,這裡不再贅述

ObservableCollection

dataBinding 也提供了包裝類用於替代原生的 List Map ,分別是 ObservableList 和   ObservableMap ,當其包含的數據發生變化時,綁定的視圖也會隨之進行刷新
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="android.databinding.ObservableList"/>
        <import type="android.databinding.ObservableMap"/>
        <variable
            name="list"
            type="ObservableList&lt;String&gt;"/>
        <variable
            name="map"
            type="ObservableMap&lt;String,String&gt;"/>
        <variable
            name="index"
            type="int"/>
        <variable
            name="key"
            type="String"/>
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.leavesc.databinding_demo.Main12Activity">

        <TextView
            ···
            android:padding="20dp"
            android:text="@{list[index],default=xx}"/>

        <TextView
            ···
            android:layout_marginTop="20dp"
            android:padding="20dp"
            android:text="@{map[key],default=yy}"/>

        <Button
            ···
            android:onClick="onClick"
            android:text="改變數據"/>

    </LinearLayout>
</layout>

三・雙向數據綁定

雙向綁定的意思即為當數據改變時同時使視圖刷新,而視圖改變時也可以同時改變數據

看以下例子,當 EditText 的輸入內容改變時,會同時同步到變量 goods,綁定變量的方式比單向綁定多了一個等號:android:text="@={goods.name}"
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="com.leavesc.databinding_demo.model.ObservableGoods"/>
        <variable
            name="goods"
            type="ObservableGoods" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".Main10Activity">

        <TextView
            ···
            android:text="@{goods.name}" />

        <EditText
            ···
            android:text="@={goods.name}" />

    </LinearLayout>
</layout>

四・事件绑定

嚴格意義上來說,事件綁定也是一種變量綁定,只不過設置的變量是回調接口而已 事件綁定可用於以下多種回調事件
  • android:onClick
  • android:onLongClick
  • android:afterTextChanged
  • android:onTextChanged
  • ...
在 Activity 內部新建一個 UserPresenter 類來聲明 onClick() 和 afterTextChanged() 事件相應的回調方法
public class UserPresenter {

        public void onUserNameClick(User user) {
            Toast.makeText(Main5Activity.this, "用户名:" + user.getName(), Toast.LENGTH_SHORT).show();
        }

        public void afterTextChanged(Editable s) {
            user.setName(s.toString());
            activityMain5Binding.setUserInfo(user);
        }

        public void afterUserPasswordChanged(Editable s) {
            user.setPassword(s.toString());
            activityMain5Binding.setUserInfo(user);
        }

}
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="com.leavesc.databinding_demo.model.User" />
        <import type="com.leavesc.databinding_demo.MainActivity.UserPresenter" />
        <variable
            name="userInfo"
            type="User" />
        <variable
            name="userPresenter"
            type="UserPresenter" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:orientation="vertical"
        tools:context="com.leavesc.databinding_demo.MainActivity">

        <TextView
            ···
            android:onClick="@{()->userPresenter.onUserNameClick(userInfo)}"
            android:text="@{userInfo.name}" />

        <TextView
            ···
            android:text="@{userInfo.password}" />

        <EditText
            ···
            android:afterTextChanged="@{userPresenter.afterTextChanged}"
            android:hint="名稱" />

        <EditText
            ···
            android:afterTextChanged="@{userPresenter.afterUserPasswordChanged}"
            android:hint="密碼" />

    </LinearLayout>

</layout>
方法引用的方式與調用函數的方式類似,既可以選擇保持事件回調方法的簽名一致:@{userPresenter.afterTextChanged},此時方法名可以不一樣,但方法參數和返回值必須和原始的回調函數保持一致。也可以引用不遵循默認簽名的函數:@{()->userPresenter.onUserNameClick(userInfo)},這裡用到了Lambda 表達式,這樣就可以不遵循默認的方法簽名,將userInfo對象直接傳回點擊方法中。此外,也可以使用方法引用 :: 的形式來進行事件綁定

五・使用類方法

首先定義一個靜態方法
public class StringUtils {

    public static String toUpperCase(String str) {
        return str.toUpperCase();
    }

}
在 data 標籤中導入該工具類
<import type="com.leavesc.databinding_demo.StringUtils" />
然後就可以像對待一般的函數一樣來調用了
  <TextView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:onClick="@{()->userPresenter.onUserNameClick(userInfo)}"
     android:text="@{StringUtils.toUpperCase(userInfo.name)}" />

六・運算符

基礎運算符

DataBinding 支持在佈局文件中使用以下運算符、表達式和關鍵字
  • 算术 + - / * % 
  • 字符串合并 + 
  • 逻辑 && || 
  • 二元 & | ^ 
  • 一元 + - ! ~ 
  • 移位 >> >>> << 
  • 比较 == > < >= <= 
  • Instanceof 
  • Grouping () 
  • character, String, numeric, null 
  • Cast 
  • 方法调用 
  • Field 访问 
  • Array 访问 [] 
  • 三元 ?:
目前不支持以下操作

  • this
  • super
  • new
  • 顯示泛型調用

此外,DataBinding 還支持以下幾種形式的調用

Null Coalescing

空合併運算符 ?? 會取第一個不為 null 的值作為返回值
<TextView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:text="@{user.name ?? user.password}" />
等同於
 android:text="@{user.name != null ? user.name : user.password}"

屬性控制

可以通過變量值來控制 View 的屬性
<TextView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:text="是否顯示"
     android:visibility="@{user.male  ? View.VISIBLE : View.GONE}" />

避免空指針異常

DataBinding 也會自動幫助我們避免空指針異常 例如,如果 "@{userInfo.password}" 中 userInfonull 的話,userInfo.password 會被賦值為默認值 null,而不會拋出空指針異常

七・include 和 viewStub

include

對於 include 的佈局文件,一樣是支持通過 dataBinding 來進行數據綁定,此時一樣需要在待 include 的佈局中依然使用 layout 標籤,聲明需要使用到的變量

view_include.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>
        <import type="com.leavesc.databinding_demo.model.User" />
        <variable
            name="userInfo"
            type="User" />
    </data>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#acc">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="20dp"
            android:text="@{userInfo.name}" />

    </android.support.constraint.ConstraintLayout>
</layout>
在主佈局文件中將相應的變量傳遞給 include 佈局,從而使兩個佈局文件之間共享同一個變量
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:bind="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="com.leavesc.databinding_demo.model.User" />
        <variable
            name="userInfo"
            type="User" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".Main6Activity">
        
        <include
            layout="@layout/view_include"
            bind:userInfo="@{userInfo}" />
        
    </LinearLayout>
</layout>

viewStub

dataBinding 一樣支持 ViewStub 佈局

在佈局文件中引用 viewStub 佈局
   <ViewStub
        android:id="@+id/view_stub"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout="@layout/view_stub"/>
獲取到 ViewStub 對象,由此就可以來控制 ViewStub 的可見性
 ActivityMain6Binding activityMain6Binding = DataBindingUtil.setContentView(this, R.layout.activity_main6);
 View view = activityMain6Binding.viewStub.getViewStub().inflate();
如果需要為 ViewStub 綁定變量值,則 ViewStub 文件一樣要使用 layout 標籤進行佈局,主佈局文件使用自定義的 bind 命名空間將變量傳遞給 ViewStub
    <ViewStub
        android:id="@+id/view_stub"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout="@layout/view_stub"
        bind:userInfo="@{userInfo}" />
如果在xml 中沒有使用bind:userInfo="@{userInf}"對ViewStub 進行數據綁定,則可以等到當ViewStub Inflate 時再綁定變量,此時需要為ViewStub 設置setOnInflateListener回調函數,在回調函數中進行數據綁定
        activityMain6Binding.viewStub.setOnInflateListener(new ViewStub.OnInflateListener() {
            @Override
            public void onInflate(ViewStub stub, View inflated) {
                //如果在 xml 中没有使用 bind:userInfo="@{userInf}" 对 viewStub 进行数据绑定
                //那么可以在此处进行手动绑定
                ViewStubBinding viewStubBinding = DataBindingUtil.bind(inflated);
                viewStubBinding.setUserInfo(user);
                Log.e(TAG, "onInflate");
            }
        });

八・BindingAdapter

dataBinding 提供了 BindingAdapter 這個註解用於支持自定義屬性,或者是修改原有屬性。註解值可以是已有的 xml 屬性,例如 android:srcandroid:text等,也可以自定義屬性然後在 xml 中使用

例如,對於一個 ImageView ,我們希望在某個變量值發生變化時,可以動態改變顯示的圖片,此時就可以通過 BindingAdapter 來實現

需要先定義一個靜態方法,為之添加BindingAdapter 註解,註解值是為ImageView 控件自定義的屬性名,而該靜態方法的兩個參數可以這樣來理解:當ImageView 控件的url 屬性值發生變化時,dataBinding就會將ImageView 實例以及新的url 值傳遞給loadImage() 方法,從而可以在此動態改變ImageView 的相關屬性
    @BindingAdapter({"url"})
    public static void loadImage(ImageView view, String url) {
        Log.e(TAG, "loadImage url : " + url);
    }
在 xml 文件中關聯變量值,當中,bind 這個名稱可以自定義
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:bind="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="com.leavesc.databinding_demo.model.Image" />
        <variable
            name="image"
            type="Image" />
    </data>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Main8Activity">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher_background"
            bind:url="@{image.url}" />
        
    </android.support.constraint.ConstraintLayout>
</layout>
BindingAdapter 更為強大的一點是可以覆蓋 Android 原先的控件屬性。例如,可以設定每一個 Button 的文本都要加上後綴:“-Button”
    @BindingAdapter("android:text")
    public static void setText(Button view, String text) {
        view.setText(text + "-Button");
    }
    <Button
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:onClick="@{()->handler.onClick(image)}"
       android:text='@{"改变图片Url"}'/>
這樣,整個工程中使用到了 "android:text" 這個屬性的控件,其顯示的文本就會多出一個後綴


此為筆記用途^^

留言

這個網誌中的熱門文章

Android - 使用 adb 安装apk

Android ContentProvider 實現多個應用程式共享資料

Android TextView autosizing 自動調整大小