Jetpeck DataBinding實踐——輕松上手DataBinding

一、問題背景

jetpeck+kotlin持續學習中，現在來學習一下databinding，簡單來說，DataBinding是Google提供給我們的資料綁定的支援庫，實作在頁面元件中直接綁定應用程式的資料源，來看看使用這個有何益處。

二、實作方案(基于kotlin語言)

話不多說，直接上代碼

1）項目中引入dataBinding

// 在build.gradle檔案添加
android{
   ...
   dataBinding{
      enabled true
   }
   ...
}
           

2)建立activity和對應的layout布局檔案，布局檔案内容如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".activity.ViewBindingActivity">
    <TextView
        android:id="@+id/txt1"
        android:gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn1"
        android:text="btn1"
        android:textAllCaps="false"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>
           

3）布局檔案格式轉換（普通layout——》databing對應的layout）

光标在布局檔案的根布局-->點選Alt + Enter()-->點選 “Convert to data binding layout”

得到轉換後的layout布局檔案，内容如下：

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

    </data>

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

        <TextView
            android:id="@+id/txt1"
            android:gravity="center_horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btn1"
            android:text="btn1"
            android:textAllCaps="false"
            android:layout_gravity="center_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
</layout>
           

4）建立資料類

class Data {
    var txt = "txt1"
    var btnTxt = "btn"
    var number : Int = 1
}
           

<data>
        <variable
            name="data"
            type="com.baorant.test2.model.Data" />
    </data>
           

<?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>
        <variable
            name="data"
            type="com.baorant.test2.model.Data" />
    </data>

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

        <TextView
            android:id="@+id/txt1"
            android:gravity="center_horizontal"
            android:text="@{data.txt}"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btn1"
            android:text="@{data.btnTxt}"
            android:textAllCaps="false"
            android:layout_gravity="center_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
</layout>
           

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil

class DataBindingActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        setContentView(R.layout.activity_data_binding2)

        val dataBinding = DataBindingUtil.setContentView<ActivityDataBinding2Binding>(this, R.layout.activity_data_binding2)
        var data = Data()
        data.txt = "new txt"
        data.btnTxt = "new btn txt"
        // 1、通過dataBinding中的data對象設定資料
        dataBinding.data = data

        // 2、通過dataBinding直接拿到layout中的元件
        dataBinding.btn1.setOnClickListener {
            dataBinding.txt1.setText("new txt 2")
        }
    }
}