DataBinding玩轉MVVM開發實戰

阿新 • • 發佈：2019-02-20

前言：
2015年穀歌I/O大會上介紹了一個數據繫結框架DataBinding。2016年，2017年毫無意外成了專案實戰中主流框架。使用它我們可以輕鬆實現MVVM（模型-檢視-檢視模型）模式，來實現應用之間資料與檢視的分離、檢視與業務邏輯的分離、資料與業務邏輯的分離，從而達到低耦合、可重用性、易測試性等好處。而使用DataBinding不僅減少了findViewById的出現頻率，而且還大大提高解析XML的速度。
通過學習本文，學會如何在專案中使用DataBinding。本文包含以下要點：

基本用法
顯示照片
更多用法
- 簡單的字元拼接
- 三目運算
- 根據資料判斷，顯示資料
- 修改樣式
點選事件
- 單擊事件
- 長按事件
繫結ListView
兩種資料更新方式
- 讓實體類繼承自BaseObservable
- 使用DataBinding提供的ObservableFields來建立實體類

▲1 . 基本使用
新建一個專案，在app的build檔案加上：

    android {
    ...
    dataBinding{
        enabled =true;
    }
    ...
}

構建環境特別簡單，接下來直接開始使用資料繫結
首先，新建一個User.java實體類：

public class User {
    public String name;
    public 
 String myBlog;
    public int age;

    public User(String name,int age,String myBlog){
        this.name=name;
        this.age=age;
        this.myBlog=myBlog;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public 
 String getMyBlog() {
        return myBlog;
    }

    public void setMyBlog(String myBlog) {
        this.myBlog = myBlog;
    }
}

之後看下佈局(activity_basic.xml)，跟傳統的佈局不一樣，這裡需要使用<layout></layout>作為根節點，在<layout>節點中我們可以通過<data>節點來引入我們要使用的資料來源

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

    <data>

        <variable
            name="user"
            type="com.donkor.demo.databinding.bean.User" />

    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{String.valueOf(user.age)}" />

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

    </LinearLayout>

</layout>

▲Attention :
※ 切記，在<layout>節點下是沒有“layout_width”和“layout_height”的

※ type中宣告的就是我們的使用者實體類User，連同包名一定要寫全！！！我們給其命名（name）為“user”,然後在TextView中的@{user.name}就是把這個user中的名字展示出來，之後的“age””myBlog”同理

※ age年齡在實體類User中我們定義的是整數型別，所以在佈局中需要使用String.valueOf(user.age)轉換為字串

一個Binding類會基於layout檔案的名稱而產生，並且新增“Binding”字尾。上述的layout檔案是main_basic.xml，因此生成的類名是ActivityBasicBinding。通過DataBindingUtil.setContentView獲取bing例項，進行資料繫結

public class BasicActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityBasicBinding bing= DataBindingUtil.setContentView(this, R.layout.activity_basic);
        User user=new User("donkor",10,"http://blog.csdn.net/donkor_");
        bing.setUser(user);
    }
}

執行之後看下效果圖

▲2 . 顯示照騙（片）
這波，很？？？

一言不合就上圖。咳咳咳，看完圖之後，我們看下如何實現。
我們選擇用glide載入一張網路圖片。glide怎麼在studio中使用，這裡就不再討論。如何顯示一張網路圖片，需要使用到DataBinding自定義屬性@BindingAdapter。在佈局檔案中使用這個自定義屬性，顯示出我們要展示的佈局。
還是那個實體類User，新增自定義屬性@BindingAdapter({"imageUrl"})

public class User {
    public String imageUrl;

    public User(String imageUrl){
        this.imageUrl=imageUrl;
    }

    /**
     * 使用ImageLoader顯示圖片
     * @param imageView
     * @param url
     */
    @BindingAdapter({"imageUrl"})
    public static void imageLoader(ImageView imageView, String url) {
        Glide.with(imageView.getContext()).load(url).into(imageView);
    }
}

※ 這裡要主要的是，imageLoader方法必須宣告是static，否則會報錯。

新建activity_image.xml，因為使用了自定義屬性，所以在layout節點下要新增xmlns:app="http://schemas.android.com/apk/res-auto"。在ImageView中使用app:imageUrl="@{user.imageUrl}"。完整程式碼如下：

<?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">

    <data>

        <variable
            name="user"
            type="com.donkor.demo.databinding.bean.User" />

    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:imageUrl="@{user.imageUrl}" />

    </LinearLayout>

</layout>

最後執行之後，結果如上圖。我就不再發一遍了，有興趣的朋友再拖回去看一遍，反正下面還有~~

▲3 . 更多用法
■ 簡單的字元拼接

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{`my Name is :`+user.name}" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:autoLink="all"
            android:text="@{`my Blog is :`+user.myBlog}" />

■ 簡單的三目運算
判斷名字是否為空，不為空只顯示user.name，否則顯示donkor11：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text='@{user.name ?? "donkor11"}' />

相當於

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text='@{user.name !=null?user.name: "donkor11"}' />

※ 這裡需要注意的是當{}中使用了雙引號“”，最外層要改成單引號”
■ 根據資料判斷，顯示資料
判斷是否為學生，是則顯示11，反則，顯示00

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@{user.isStudent?String.valueOf(11):String.valueOf(00)}" />

■ 修改樣式
判斷是否為學生，是則修改背景顏色0xFF0000FF，反則，顯示0xFFFF0000

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@{user.isStudent?0xFF0000FF:0xFFFF0000}"
    android:text="donkor" />

※ 寫在之後的話，這裡我們需要知道Databinding支援與不支援的表示式，語法。如下
支援的表示式：

Mathematical + - / * %
String concatenation +
Logical && ||
Binary & | ^
Unary + - ! ~
Shift >> >>> <<
Comparison == > < >= <=
instanceof
Grouping ()
Literals - character, String, numeric, null
Cast
Method calls
Field access
Array access []
Ternary operator ?:

不支援的表示式：

this
super
new
Explicit generic invocation

最後執行之後，看下效果圖。

▲4 . 點選事件
■ 單擊事件
單擊事件在實際開發中，使用頻率有多高這裡就不解釋了。下面我們直接看怎麼用
在data節點下的variable下type引用android.view.View.OnClickListener。

<data>
    <variable
        name="myClick"
        type="android.view.View.OnClickListener" />
</data>

Button按鈕直接引用”myClick”

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="單擊按鈕"
    android:onClick="@{myClick}" />

■ 長按事件
長按事件的button，首先需要分配一個id給Button

<Button
    android:id="@+id/btnLongClick"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="長按按鈕"
    />

在Activity中，使用資料繫結，直接引用按鈕id。完整程式碼如下

public class ClickActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityClickBinding bing=DataBindingUtil.setContentView(this, R.layout.activity_click);

        //事件繫結 -- 單擊
        bing.setMyClick(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(ClickActivity.this,"發生了點選事件",Toast.LENGTH_SHORT).show();
            }
        });

        //事件繫結 -- 長按
        bing.btnLongClick.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                Toast.makeText(ClickActivity.this,"發生了長按事件",Toast.LENGTH_SHORT).show();
                return false;
            }
        });
    }
}

最後執行之後，看下效果圖。

▲5 . 繫結ListView
Listview在實際開發中使用頻率同樣很高，看了上面那麼多栗子（例子）。就知道Databinding繫結ListView一樣簡單。廢話不多說，上文提到的還有一波照騙（片），咱現在就發。

一波未平，一波又起。看完之後，能看出佈局其實就是一張ImageView，底下加一個TextView。（例子）栗子就是很簡單，難的我也不會說。
然後看下如何實現。首先需要新建一個美女的實體類，咱就叫Beauty,beautyNum就是美女底下的TextView文字

public class Beauty {
    public String beautyNum;
    public String imageUrl;

    public Beauty(String beautyNum, String imageUrl) {
        this.beautyNum = beautyNum;
        this.imageUrl = imageUrl;
    }

    @BindingAdapter({"imageUrl"})
    public static void beautyImage(ImageView imageView, String url) {
        Glide.with(imageView.getContext()).load(url).into(imageView);
    }
}

然後看下主佈局activity_listview.xml，在data節點下的variable下type引用android.widget.BaseAdapter。

<?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">

    <data>

        <variable
            name="adapter"
            type="android.widget.BaseAdapter" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:adapter="@{adapter}" />
    </LinearLayout>
</layout>

然後ListView的item佈局item_listview.xml,同樣炒雞簡單，不解釋

<?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">

    <data>
        <variable
            name="beauty"
            type="com.donkor.demo.databinding.bean.Beauty" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:imageUrl="@{beauty.imageUrl}" />

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

    </LinearLayout>

</layout>

有ListView的地方，十有八九就有介面卡。這裡介紹一個終極介面卡的寫法MyBaseAdapter。儘管這裡僅僅是給美女使用的介面卡，但是已經說明了是終極寫法。咱就不叫它美女介面卡了

public class MyBaseAdapter<T> extends BaseAdapter {

    private List<T> list;
    private int layoutId;
    private int variableId;
    private LayoutInflater mInflater;

    public MyBaseAdapter(Context context, List<T> list, int layoutId, int variableId) {
        this.list = list;
        this.layoutId = layoutId;
        this.variableId = variableId;
        this.mInflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return list.size() == 0 ? 0 : list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewDataBinding dataBinding;
        if (convertView == null) {
            dataBinding = DataBindingUtil.inflate(mInflater, layoutId, parent, false);
        } else {
            dataBinding = DataBindingUtil.getBinding(convertView);
        }
        dataBinding.setVariable(variableId, list.get(position));

        return dataBinding.getRoot();
    }
}

然後解釋下其中幾個變數

Context context：上下文，不比多說
List list：傳進來的資料集合，不解釋
int layoutId： item佈局的資源id
int variableId：系統自動生成的

※ 注意佈局載入方式為DataBindingUtil類中的inflate方法
最後看下ListViewActivity完整程式碼

public class ListViewActivity extends Activity {
    private List<Beauty> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityListviewBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_listview);

        list = new ArrayList<>();
        //載入資料
        initData();

        MyBaseAdapter<Beauty> adapter = new MyBaseAdapter<>(ListViewActivity.this, list, R.layout.item_listview, BR.beauty);
        binding.setAdapter(adapter);
    }

    void initData() {
        Beauty beauty1 = new Beauty("第一個美女", "http://img2.imgtn.bdimg.com/it/u=3988249408,1489015532&fm=21&gp=0.jpg");
        Beauty beauty2 = new Beauty("第二個美女", "http://img4.imgtn.bdimg.com/it/u=2579627311,3580753633&fm=21&gp=0.jpg");
        Beauty beauty3 = new Beauty("第三個美女", "http://img5.imgtn.bdimg.com/it/u=539171541,1245868076&fm=23&gp=0.jpg");
        Beauty beauty4 = new Beauty("第四個美女", "http://img1.imgtn.bdimg.com/it/u=3494499027,4116428522&fm=23&gp=0.jpg");
        Beauty beauty5 = new Beauty("第五個美女", "http://img4.imgtn.bdimg.com/it/u=645329305,336210525&fm=23&gp=0.jpg");
        list.add(beauty1);
        list.add(beauty2);
        list.add(beauty3);
        list.add(beauty4);
        list.add(beauty5);
    }
}

最後執行之後，結果如上圖。有興趣的朋友再拖回去看一遍，反正下面沒有美女了~~
▲6 . 資料更新
Databinding的資料更新同樣惹人喜歡。最主要的是程式碼簡潔明瞭，UI還同步更新。
首先看下效果圖

資料更新可以使用如下兩種方式，分別對學生文字和老師文字進行修改
■ 讓實體類(Student)繼承自BaseObservable
給需要改變的欄位的get方法新增上@Bindable註解，然後給需要改變的欄位(例如name)的set方法加上notifyPropertyChanged(BR.name);欄位number同理，在set方法內加上notifyPropertyChanged(BR.number);

public class Student extends BaseObservable {
    @Bindable
    public String name;
    @Bindable
    public String number;

    public Student() {
    }

    public Student(String name, String number) {
        this.name = name;
        this.number = number;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
        notifyPropertyChanged(BR.name);
    }

    public String getNumber() {
        return number;
    }

    public void setNumber(String number) {
        this.number = number;
        notifyPropertyChanged(BR.number);
    }
}

■ 使用DataBinding提供的ObservableFields來建立實體類
Teacher實體類,這個更加簡單，幾行程式碼搞定

public class Teacher extends BaseObservable {
    public ObservableField<String> name = new ObservableField<>();
    public ObservableField<String> number = new ObservableField<>();

    public Teacher() {
    }

    public Teacher(String name, String number) {
        this.name.set(name);
        this.number.set(number);
    }
}

然後看下佈局檔案activity_data_notify程式碼,跟上文描述的基本類似，這裡不再過多贅述。

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

    <data>

        <variable
            name="student"
            type="com.donkor.demo.databinding.bean.Student" />
        <variable
            name="teacher"
            type="com.donkor.demo.databinding.bean.Teacher" />

    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

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


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


        <Button
            android:id="@+id/btnStudent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginTop="10dp"
            android:text="點選按鈕修改學生文字"
            />

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


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

        <Button
            android:id="@+id/btnTeacher"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginTop="10dp"
            android:text="點選按鈕修改老師文字"
            />
    </LinearLayout>

</layout>

最後看下DataNotifyActivity完整程式碼

public class DataNotifyActivity extends Activity {

    private Student student;
    private Teacher teacher;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityDataNotifyBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_data_notify);
        student = new Student("studen_donkor", "number_aa");
        binding.setStudent(student);
        teacher = new Teacher("teacher_donkor", "number_bb");
        binding.setTeacher(teacher);

        //點選按鈕，更新資料,同時更新UI
        binding.btnStudent.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                student.setName("donkor is not student");
                student.setNumber("number_00000");
            }
        });

        binding.btnTeacher.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                teacher.name.set("donkor is not teacher");
                teacher.number.set("number_11111");
            }
        });
    }
}

▲7 . 資料集合
DataBinding中給我們提供了一些現成的集合ObservableArrayList，ObservableArrayMap。寫到這裡的時候已經是凌晨了。- -使用的人群貌似不過，反正我也沒用過。有需要的可以留言。之後咱再來補充

About me
Email ：[email protected]
Android開發交流QQ群 : 537891203

DataBinding玩轉MVVM開發實戰

DataBinding玩轉MVVM開發實戰

玩轉iOS開發 - Runloop 具體解釋

玩轉iOS開發：《使用系統自帶的UIActivityViewController和UIActivity進行內容分享》

玩轉iOS開發：《iOS設計模式 — 代理模式》

玩轉Eclipse開發工具(一)

11位大咖帶你玩轉WebRTC開發（內附PPT資料下載）

支撐微博億級社交平臺，小白也能玩轉Redis叢集(實戰篇)

玩轉Android之MVVM開發模式實戰，炫酷的DataBinding！

玩轉Android Camera開發(二):使用TextureView和SurfaceTexture預覽Camera 基礎拍照demo

實戰系列之 Node.js 玩轉 Java

玩轉HTML5+跨平臺開發[6] H5多媒體標簽

玩轉HTML5+跨平臺開發[7] HTML meta標簽的其它類型

玩轉Android monkey之monkey小實戰

開發自己的 chart - 每天5分鐘玩轉 Docker 容器技術（167）

玩轉小程序雲開發

深度實戰玩轉演算法

玩轉Android Camera開發四預覽介面四周暗中間亮，只拍攝矩形區域圖片附完整原始碼

領英LinkedIn開發客戶 — 外貿人玩轉領英LinkedIn的幾個關鍵點總結

玩轉小程式雲開發

JAVA.J2EE.Extjs.Hibernate.Servlet開發實戰免費教程合輯（轉）

DataBinding玩轉MVVM開發實戰

相關推薦