---
# System prepended metadata

title: Data Binding
tags: [data binding, Android, kotlin]

---

# Data Binding

1. ### Enable data binding
    #### in build gradle(app) 
    ```kotlin=
        android {

        //部分省略

        // Enable data binding here.
            buildFeatures{
                //noinspection DataBindingWithoutKapt
                dataBinding true
            }
        }
    ```
    
2. ### 修改layout ,activity_main.xml
    #### 使用\<layout>標籤將原本的LinearLayout包覆, 並且把下面這兩行從LinearLayout移到 \<layout>內部
    ```kotlin=
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
    ```
    
    #### 最終呈現樣子如下
    ```kotlin=
    <layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <LinearLayout
             //省略

        </LinearLayout>

    </layout>
    ```
3. ### 在MainActivity.kt 
    #### 修改完畢之後 就可以透過binding.doneButton 取代 findViewById\<Button>(R.id.done_button)
    ```kotlin=
        class MainActivity : AppCompatActivity() {
            //宣告變數繼承
            private lateinit var binding: ActivityMainBinding

            override fun onCreate(savedInstanceState: Bundle?) {
                super.onCreate(savedInstanceState)
                binding = DataBindingUtil.setContentView(this,R.layout.activity_main) //取代setContentView(R.layout.activity_main)
        //        setContentView(R.layout.activity_main)
                binding.doneButton.setOnClickListener {
                    addNickname(it)
                }
            }
        }
    ```

4. ### 使用data binding 顯示資料
    #### 在activity_main.xml 介於 \<layout> 與\<LinearLayout>中間,新增Tag \<data>
    #### 並在\<data>內新增\<variable>標籤,於標籤內填入name[自行命名] & type[指定專案路徑檔案],在這個例子是指定到MyName.kt  
    
    ##### ***MyName.kt***
```kotlin=
data class MyName(var name: String = "", var nickname: String = "")
```
```kotlin=
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="myName"
            type="com.example.android.aboutme.MyName" />
    </data>
    
    <LinearLayout
         //省略

    </LinearLayout>

</layout>
    
    
```

5. ### 修改想要顯示的text view 屬性
    #### android:text="@string/name" 修改為 android:text=@{myName.name}
    #### @{myName} ->這是activity_main.xml \<variable>裡面的name變數的值
    #### @{myName.***name***}的name是\<variable>裡面的type的那個資料類別的name變數
```kotlin=
<TextView
            android:id="@+id/name_text"
            style="@style/NameStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{myName.name}"
            android:textAlignment="center" />
```

6. ### MainActivity.kt 
    #### 於onCreate之上宣告變數
    
```kotlin=0
private val myName: MyName = MyName("Aleks Haecky")

```
#### 在onCreate內使用binding.myName 賦予宣告的變數
    
```kotlin=0
override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this,R.layout.activity_main) //取代setContentView(R.layout.activity_main)
//        setContentView(R.layout.activity_main)
        binding.myName = myName
        binding.doneButton.setOnClickListener {
            addNickname(it)
        }

    }
```
# 完成了~~~~
#### 補充說明
   * 當UI資料有變更時,需要呼叫下面這個涵式清除所有Binding,並重新要求rebinding ,進而更新UI資料
    
```kotlin=
    invalidateAll()
```
    

##### 參考資料
[Google code lab](https://developer.android.com/codelabs/kotlin-android-training-data-binding-basics/index.html#3)

###### tags: `kotlin` `Android` `data binding`