Data Binding 是一個由 Google 推出的 support library，顧名思義，Data Binding 就是將 Data 和 UI 元件綁定在一起，不需要再手動把數據設定給 UI 元件，能夠省去大部分的 UI 相關代碼（比如 findViewById、 setOnClickListener、setText 等）

例如，像是我們一般在給 UI 設定屬性時會用下面的代碼調用 findViewById() 來查找 TextView 元件並將其綁定到 viewModel 變量 的 userName 屬性：

val textView = findViewById<TextView>(R.id.sample_text)
    textView.text = viewModel.userName

來看看 Data Binding 是如何實現上面這段 code 的呢

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

這是一段在 xml 檔的 code，只要一行就可以實現，連 id 都可以不用設定，而且，只要 viewmodel的 userName 一改變，這個 TextView 的 text 也會跟著"自動"改變，大幅減少了寫在 Activity 的程式碼。

實作起來非常簡單

配置

build.gradle 添加

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

Xml 調整

將整個 xml 檔用一個 layout 包起來

原本的 xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
.
.
.
</LinearLayout>

改成

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    .
    .
    .
    </LinearLayout>
</layout>

加入 viewModel

因為要和 data 綁定 所以要在這邊定義 data 來源

class MainViewModel : ViewModel() {
    var userName: String = ""
}

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

    <data>
        <variable
            name="viewModel"
            type="com.guanhong.mvvmpractice.viewmodel.MainViewModel" />
    </data>

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

在 layout 底下新增一個 data 標籤，這個標籤表示你的數據來源，這個標籤至少要有兩個屬性，

name : 這個數據在這個 xml 的命名
type : 這個數據的所在位置，填上 class 完整的 package name，就能夠在這裡使用這個 class 的 public 變數

接著就能夠在 UI 元件裡使用這個 data

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

跟一般的賦值很像，只是這裡要用 @{} 把數據包起來

把 View 和 ViewModel 綁定在一起

在 xml 加入 data 之後一定要 Make Project，這時候 Data Binding 就會自動生成一個 ViewDataBinding 類別 提供給我們的 View 去做綁定

修改原本的 Activity
原本

class MainActivity : AppCompatActivity() {

    lateinit var viewModel: MainViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)
        
        viewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
        findViewById<TextView>(R.id.usertName).text = viewModel.usertName
    }

修改後

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding
    lateinit var viewModel: MainViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        viewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
        binding.viewModel = viewModel
    }

這個 ActivityMainBinding 類別就是 DataBinding 自動生成給我們用的類別，命名方式也是從 xml 的命名演化過來的，很容易分辨。綁定完之後就會把 TextView 的屬性 和 viewModel 綁定在一起，不需要再手動賦值給 TextView，非常方便。

到這邊完成完成了最基礎的 Data Binding 的使用，似乎蠻簡單的嘛(?

有任何問題或講得不清楚的地方歡迎留言和我討論。

更歡迎留言糾正我任何說錯的地方！

俗話說好的開始是成功的一半。

下一篇：Data Binding (二) 點擊事件