MVVM模式--DataBinding的使用

葉少磐發表於2019-04-17

MVVM模式

介紹

首先上一張MVVM的架構圖

View層即是圖中綠色的Activity/Fragment，它的主要職責是負責UI中的繪製以及與使用者互動，由ViewModel驅動，同時也監聽UI事件及其生命週期，驅動ViewModel。
ViewModel層即是圖中藍色的ViewModel，它建立關聯，將model和view進行繫結，它只做業務邏輯的操作，不持有任何控制元件的引用。當model更改後，通過ViewModel傳遞給View來進行更新。
Model層即是圖中的橘色Repository幷包括其下都是。Model層就是資料層，它的資料來源包括本地資料、快取資料以及網路資料。

本文將以谷歌推出的MVVM框架DataBinding作為示例。

基本使用

啟用DataBingding

在模組的build.gradle中新增以下程式碼。

    dataBinding {
        enabled = true
    }
複製程式碼

建立一個Bean類，這個bean類充當的就是Model。

public class StudentBean extends BaseObservable{

    private String name;
    private int age;

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

    @Bindable
    public String getName() {
        return name;
    }

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

    @Bindable
    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
        notifyPropertyChanged(BR.age);
    }
}
複製程式碼

修改Activity的xml佈局檔案,View層

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

    <data>

        <variable
            name="student"
            type="cn.panf.mvvm_new.bean.StudentBean" />
    </data>

    <LinearLayout xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="cn.panf.mvvm_new.MvvmActivity">

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

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

    </LinearLayout>
</layout>
複製程式碼

修改Activity類，ViewModel層

public class MvvmActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_mvvm);
        ActivityMvvmBinding activityMvvmBinding =
                DataBindingUtil.setContentView(this, R.layout.activity_mvvm);
        StudentBean xiaoMing = new StudentBean("xiaoMing", 12);
        activityMvvmBinding.setStudent(xiaoMing);
    }
}
複製程式碼

這樣一個最簡單的databinding就完成了，那麼只要我們隨意修改StudentBean中的任一物件，UI介面就會重新整理。下面新增一個button按鈕測試一下。

首先新建一個處理點選事件的類：

public interface HandleClick {
    void buttonClick(View view);
}
複製程式碼

在佈局檔案中新增：

<variable
            name="clickhHandler"
            type="cn.panf.mvvm_new.HandleClick" />

<Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="@{clickhHandler::buttonClick}" />
複製程式碼

最後在Activity中：

//處理點選事件
        activityMvvmBinding.setClickhHandler(new HandleClick() {
            @Override
            public void buttonClick(View view) {
                xiaoMing.setAge(13);
            }
        });
複製程式碼

這樣你只要點選按鈕，那麼textView的資料就會自動重新整理而不需要任何手動賦值，這就是所謂的資料驅動。

進階使用

下面我們將databinding在RecyclerView中來進行使用。

首先修改佈局檔案

<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="cn.panf.mvvm_new.MvvmActivity">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>
</layout>
複製程式碼

為RecyclerView的item新建一個佈局layout_item_student.xml

<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

        <variable
            name="student"
            type="cn.panf.mvvm_new.bean.StudentBean" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@{student.name}" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@{String.valueOf(student.age)}" />

    </LinearLayout>
</layout>
複製程式碼

新建Adapter類：

public class StudentAdapter extends RecyclerView.Adapter<StudentAdapter.StudentViewHolder> {

    private List<StudentBean> mList;
    private Context context;

    public StudentAdapter(Context context, List<StudentBean> mList) {
        this.mList = mList;
        this.context = context;
    }

    @Override
    public StudentViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        LayoutItemStudentBinding layoutItemStudentBinding = DataBindingUtil
                .inflate(inflater, R.layout.layout_item_student, parent, false);
        return new StudentViewHolder(layoutItemStudentBinding);
    }

    @Override
    public void onBindViewHolder(StudentViewHolder holder, int position) {
        StudentBean studentBean = mList.get(position);
        holder.getLayoutItemStudentBinding().setStudent(studentBean);
    }

    @Override
    public int getItemCount() {
        return mList == null ? 0 : mList.size();
    }

    class StudentViewHolder extends RecyclerView.ViewHolder {

        private LayoutItemStudentBinding layoutItemStudentBinding;

        LayoutItemStudentBinding getLayoutItemStudentBinding() {
            return layoutItemStudentBinding;
        }

        StudentViewHolder(LayoutItemStudentBinding layoutItemStudentBinding) {
            super(layoutItemStudentBinding.getRoot());
            this.layoutItemStudentBinding = layoutItemStudentBinding;
        }
        
    }

}
複製程式碼

注意，在上文的StudentViewHolder的建構函式中，我把item對應的佈局的View物件改成了item對應佈局的ViewDataBinding物件，然後提供一個get方法來給外部呼叫，這樣做的好處是你不需要再去操作view去對資料進行修改，而是隻需要把你獲取到的資料直接傳給Bean即可，因為你在item佈局檔案裡已經把資料和View進行繫結了。

最後再來修改一下Activity：

public class MvvmActivity extends AppCompatActivity {

    private List<StudentBean> mList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_mvvm);
        ActivityMvvmBinding activityMvvmBinding =
                DataBindingUtil.setContentView(this, R.layout.activity_mvvm);
//        final StudentBean xiaoMing = new StudentBean("xiaoMing", 12);
        addData();

        StudentAdapter adapter = new StudentAdapter(this, mList);
        LinearLayoutManager manager = new LinearLayoutManager(this, OrientationHelper.VERTICAL, false);
        activityMvvmBinding.rv.setLayoutManager(manager);
        activityMvvmBinding.rv.setAdapter(adapter);

    }

    private void addData() {
        for (int i = 0; i < 15; i++) {
            int age = new Random().nextInt(20);
            StudentBean studentBean = new StudentBean("student" + i, age);
            mList.add(studentBean);
        }
    }
}
複製程式碼

OK, it works!

總結

通過介紹了MVVM的相關定義以及提供了兩個例項來幫助理解，相信理解了本文的兩個例子，必然會理解MVVM這種資料驅動的魅力所在,所有程式碼沒有一處對控制元件進行賦值即可讓資料進行自動重新整理。但是，沒有最好，只有最合適。目前在android中最廣泛使用的還是MVP，而且在2017年穀歌推出了新的MVVM框架LiveData。

note: 目的在於以DataBinding來介紹MVVM，對DataBinding的更多用法並未詳細介紹，有興趣的可以去查閱更多相關資料。

更新

宮影讓我看看能不能把databinding針對recyclerView在多佈局上應用，我進行了嘗試發現確實可行。

首先是要對不同的viewType進行區分，在上面我們已經將對於資料完全和Bean進行繫結了，所以最好在繫結資料時在Bean中進行區分。那麼可以定義一個介面，使所有的Bean來實現它。

public interface IBaseItem {
    int getItemViewType();
}
複製程式碼

修改StudentBean類，並新增TeacherBean類。

//只放一張圖片，僅為了做區分
public class TeacherBean extends BaseObservable implements IBaseItem {

    private int resId;

    public TeacherBean(int resId) {
        this.resId = resId;
    }

    @Bindable
    public int getResId() {
        return resId;
    }

    public void setResId(int resId) {
        this.resId = resId;
        notifyPropertyChanged(BR.resId);
    }

    @Override
    public int getItemViewType() {
        return R.layout.layout_item_teacher;
    }
}

public class StudentBean extends BaseObservable implements IBaseItem{

    ......

    @Override
    public int getItemViewType() {
        return R.layout.layout_item_student;
    }
}

複製程式碼

layout_item_teacher.xml

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

        <variable
            name="teacher"
            type="cn.panf.mvvm_new.bean.TeacherBean" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="center"
            app:imgUrl="@{teacher.resId}"/>

    </LinearLayout>
</layout>
複製程式碼

顯示圖片時由於dataBinding不支援直接寫int型別，這裡需要額外提供顯示image的方法。可以新建一個類頁可以直接寫在Adapter裡面，看喜好。

public class ImgUtil {

    @BindingAdapter("imgUrl")
    public static void showImgByUrl(ImageView iv, int resId) {
        iv.setImageResource(resId);
    }
}
複製程式碼

修改原本的StudentAdapter類，因為新增了Teacher，這裡修改名稱為SchoolAdapter。

package cn.panf.mvvm_new;

import android.content.Context;
import android.databinding.DataBindingUtil;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

import cn.panf.androidknowledge.R;
import cn.panf.androidknowledge.databinding.LayoutItemStudentBinding;
import cn.panf.androidknowledge.databinding.LayoutItemTeacherBinding;
import cn.panf.mvvm_new.bean.IBaseItem;
import cn.panf.mvvm_new.bean.StudentBean;
import cn.panf.mvvm_new.bean.TeacherBean;

/**
 * author: aaron.pf
 * date: 2019/4/17 19:49.
 * desc:
 */

public class SchoolAdapter extends RecyclerView.Adapter {

    private List<IBaseItem> mList;
    private LayoutInflater inflater;

    public SchoolAdapter(Context context, List<IBaseItem> mList) {
        this.mList = mList;
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        switch (viewType) {
            case R.layout.layout_item_student:
                LayoutItemStudentBinding layoutItemStudentBinding = DataBindingUtil
                        .inflate(inflater, R.layout.layout_item_student, parent, false);
                return new StudentViewHolder(layoutItemStudentBinding);
            case R.layout.layout_item_teacher:
                LayoutItemTeacherBinding layoutItemTeacherBinding = DataBindingUtil
                        .inflate(inflater, R.layout.layout_item_teacher, parent, false);
                return new TeacherViewHolder(layoutItemTeacherBinding);
            default:
                LayoutItemTeacherBinding layoutItemTeacherBinding1 = DataBindingUtil
                        .inflate(inflater, R.layout.layout_item_teacher, parent, false);
                return new TeacherViewHolder(layoutItemTeacherBinding1);
        }

    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof StudentViewHolder) {
            StudentBean studentBean = (StudentBean) mList.get(position);
            ((StudentViewHolder) holder).getLayoutItemStudentBinding().setStudent(studentBean);
            //防止資料重新整理閃爍
            ((StudentViewHolder) holder).getLayoutItemStudentBinding().executePendingBindings();
        } else if (holder instanceof TeacherViewHolder) {
            TeacherBean teacherBean = (TeacherBean) mList.get(position);
            ((TeacherViewHolder) holder).getLayoutItemTeacherBinding().setTeacher(teacherBean);
            ((TeacherViewHolder) holder).getLayoutItemTeacherBinding().executePendingBindings();
        }
    }

    @Override
    public int getItemViewType(int position) {
        return mList.get(position).getItemViewType();
    }

    @Override
    public int getItemCount() {
        return mList == null ? 0 : mList.size();
    }

    class StudentViewHolder extends RecyclerView.ViewHolder {

        private LayoutItemStudentBinding layoutItemStudentBinding;

        LayoutItemStudentBinding getLayoutItemStudentBinding() {
            return layoutItemStudentBinding;
        }

        StudentViewHolder(LayoutItemStudentBinding layoutItemStudentBinding) {
            super(layoutItemStudentBinding.getRoot());
            this.layoutItemStudentBinding = layoutItemStudentBinding;
        }
    }

    class TeacherViewHolder extends RecyclerView.ViewHolder {

        private LayoutItemTeacherBinding layoutItemTeacherBinding;

        public LayoutItemTeacherBinding getLayoutItemTeacherBinding() {
            return layoutItemTeacherBinding;
        }

        public TeacherViewHolder(LayoutItemTeacherBinding layoutItemTeacherBinding) {
            super(layoutItemTeacherBinding.getRoot());
            this.layoutItemTeacherBinding = layoutItemTeacherBinding;
        }
    }

}

複製程式碼

最後在Activity中來測試一下

public class MvvmActivity extends AppCompatActivity {

    private List<IBaseItem> mList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_mvvm);
        ActivityMvvmBinding activityMvvmBinding =
                DataBindingUtil.setContentView(this, R.layout.activity_mvvm);
//        final StudentBean xiaoMing = new StudentBean("xiaoMing", 12);

        addData();

        SchoolAdapter adapter = new SchoolAdapter(this, mList);
        LinearLayoutManager manager = new LinearLayoutManager(this, OrientationHelper.VERTICAL, false);
        activityMvvmBinding.rv.setLayoutManager(manager);
        activityMvvmBinding.rv.setAdapter(adapter);

    }

    private void addData() {
        for (int i = 0; i < 10; i++) {
            mList.add(new StudentBean("stu1", 12));
            mList.add(new StudentBean("stu2", 15));
            mList.add(new TeacherBean(R.mipmap.ic_launcher));
            mList.add(new StudentBean("stu3", 16));
            mList.add(new TeacherBean(R.mipmap.ic_launcher));
            mList.add(new StudentBean("stu4", 18));
            mList.add(new TeacherBean(R.mipmap.ic_launcher));
        }

    }
}
複製程式碼

OK, it works again!

思考

這裡雖然實現了功能，但是能否更進一步將Adapter抽取成通用的呢？能否將ViewHolder抽取一下呢？畢竟這兩個ViewHolder重複的程式碼略多呀。

MVVM 中的Databinding
2019-04-28
MVVM
MVVM架構篇之DataBinding(-)
2018-11-17
MVVM架構
使用AndroidX + ViewModel + LiveData + DataBinding等元件搭建的MVVM快速開發框架
2019-04-03
AndroidViewLiveData元件MVVM框架
Flutter使用MVVM設計模式的示例
2019-04-18
FlutterMVVM設計模式
Android MVVM探索(三) - ViewModel，DataBinding，LiveData混合三打
2018-10-29
AndroidMVVMViewLiveData
Android架構元件-DataBinding的使用
2018-07-06
Android架構元件
Android Jetpack（2）：DataBinding的基本使用
2020-11-13
AndroidJetpack
DataBinding基礎使用一
2018-08-09
DataBinding基礎使用二
2018-08-10
DataBinding基礎使用三
2018-08-10
MVVM與MVC模式的比較
2018-09-03
MVVMMVC模式
淺探VUE的MVVM模式實現
2018-11-16
VueMVVM模式
Android開發教程-使用DataBinding（六）RecyclerViewAdapter中的使用
2018-09-10
AndroidViewAPT
Android Studio: Kotlin使用DataBinding異常
2018-07-24
AndroidKotlin
ArkUI與MVVM模式的詩和遠方
2024-12-04
UIMVVM模式
DataBinding系列（四）：DataBinding進階之路
2021-09-09
淺談MVC/MVP/MVVM模式（概述）
2019-02-28
MVCMVPMVVM模式
mvvm模式事件觸發器[wpf]
2024-03-18
MVVM模式事件觸發器
使用DDD澄清MVVM
2018-11-29
MVVM
MVVM中ICommand的具體使用
2024-03-22
MVVM
databinding的點選事件
2018-12-15
事件
Android：DataBinding的一二事
2018-07-02
Android
MVC，MVP 和 MVVM 模式如何選擇？
2019-01-19
MVCMVPMVVM模式
MahApps.Metro的MVVM模式解析（二）主題功能
2024-05-27
APPMVVM模式
Python後端日常操作之在Django中「強行」使用MVVM設計模式
2020-07-25
Python後端DjangoMVVM設計模式
WPF 基礎MvvM繫結的使用
2024-04-17
MVVM
Android Jetpack - DataBinding
2020-10-21
AndroidJetpack
從零實現MVVM模式的Web前端框架的雛形
2021-10-20
MVVM模式Web前端框架
前端MVVM模式及其在Vue和React中的體現
2018-10-29
前端MVVM模式VueReact
MVVM的資料持久化（二）——ROOM的使用
2018-11-07
MVVM持久化OOM
使用 Proxy 實現簡單的 MVVM 模型
2019-02-16
MVVM模型
檢視與邏輯分離之道序篇-使用MVVM模式管理狀態（GetState）
2020-06-22
MVVM模式
iOS MVC、MVVM、MVP架構模式淺淺析
2019-03-17
iOSMVCMVVMMVP架構模式
Android開發教程-使用DataBinding（五）資料繫結
2018-09-10
Android
Android JetPack~ DataBinding(資料繫結)(一) 整合與使用
2023-02-15
AndroidJetpack
WPF使用MVVM（二）-命令繫結
2022-01-17
MVVM
WPF使用MVVM（三）-事件轉命令
2022-03-03
MVVM事件
Android官方架構元件DataBinding雙向繫結篇: 觀察者模式的殊途同歸
2019-01-15
Android架構元件模式

MVVM模式--DataBinding的使用

MVVM模式

介紹

基本使用

進階使用

總結

更新

思考

相關文章