Android架構組件JetPack之DataBinding玩轉MVVM開發實戰（四）

本文轉載自查看原文 2019-12-27 20:42 317 ，Android開發

阿里P7移動互聯網架構師進階視頻（每日更新中）免費學習請點擊：https://space.bilibili.com/474380680

前言：

2015年谷歌I/O大會上介紹了一個數據綁定框架DataBinding。2016年，2017年毫無意外成了項目實戰中主流框架。使用它我們可以輕松實現MVVM（模型-視圖-視圖模型）模式，來實現應用之間數據與視圖的分離、視圖與業務邏輯的分離、數據與業務邏輯的分離，從而達到低耦合、可重用性、易測試性等好處。而使用DataBinding不僅減少了findViewById的出現頻率，而且還大大提高解析XML的速度。

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>

注意 :
※ 切記，在<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支持與不支持的表達式，語法。如下
支持的表達式：
1.Mathematical + - / * %
2.String concatenation +
3.Logical && ||
4.Binary & | ^
5.Unary + - ! ~
6.Shift >> >>> <<
7.Comparison == > < >= <=
8.instanceof
9.Grouping ()
10.Literals - character, String, numeric, null
11.Cast
12.Method calls
13.Field access
14.Array access []
15.Ternary operator ?:

不支持的表達式：
1.this
2.super
3.new
4.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。這里不做介紹。

Demo_CSDN 下載地址 : http://download.csdn.net/detail/donkor_/9740166
原文鏈接：https://blog.csdn.net/donkor_/article/details/54598215
阿里P7移動互聯網架構師進階視頻（每日更新中）免費學習請點擊：https://space.bilibili.com/474380680

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android官方架構組件ViewModel+LiveData+DataBinding架構屬於自己的MVVM Android Jetpack -- DataBinding篇 Android Jetpack基本架構之ViewModel+LiveData+DataBinding入門 Android架構組件JetPack之Room（三） Android Jetpack——DataBinding:從排斥到真香 Android架構組件JetPack之LiveData的工作原理（一） Android Sunflower 帶您玩轉 Jetpack android Jetpack DataBinding - 注解篇（BindingAdapter） android Jetpack DataBinding - 接入綁定篇 Android Jetpack架構之Lifecycle