Android DataBinding 结合 ViewModel的利用

Android DataBinding 结合 ViewModel的利用

一、build.gradle引入对应的依赖

在build.gradle（app模块）里引入依赖，然后Sync Now一下：

1.  android {
2.  ​
3.      viewBinding {
4.          enabled = true
5.      }
6.      dataBinding {
7.          enabled = true
8.      }
9.  }

复制代码

完整的build.gradle代码如下所示：

1.  

复制代码

1. plugins {
2.      id 'com.android.application'
3.      id 'org.jetbrains.kotlin.android'
4.  }
5.  apply plugin: 'kotlin-kapt'
6.  ​
7.  android {
8.      compileSdk 33
9.  ​
10.      defaultConfig {
11.          applicationId "com.check.databindingproject"
12.          minSdk 23
13.          targetSdk 33
14.          versionCode 1
15.          versionName "1.0"
16.  ​
17.          testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
18.      }
19.  ​
20.      viewBinding {
21.          enabled = true
22.      }
23.      dataBinding {
24.          enabled = true
25.      }
26.  ​
27.  ​
28.  ​
29.      buildTypes {
30.          release {
31.              minifyEnabled false
32.              proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
33.          }
34.      }
35.      compileOptions {
36.          sourceCompatibility JavaVersion.VERSION_1_8
37.          targetCompatibility JavaVersion.VERSION_1_8
38.      }
39.      kotlinOptions {
40.          jvmTarget = '1.8'
41.      }
42.  }
43.  ​
44.  dependencies {
45.  ​
46.      implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.6.1" // ViewModel 和 LiveData
47.      implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.6.1"  // LiveData
48.      implementation "androidx.activity:activity-ktx:1.7.0"  // 添加 ViewModel KTX 扩展
49.      implementation 'androidx.appcompat:appcompat:1.3.0'
50.      implementation 'com.google.android.material:material:1.4.0'
51.      implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
52.      testImplementation 'junit:junit:4.13.2'
53.      androidTestImplementation 'androidx.test.ext:junit:1.1.3'
54.      androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
55.  }
56.  configurations.all {
57.      resolutionStrategy {
58.          force "org.jetbrains.kotlin:kotlin-stdlib:1.8.10"
59.          force "org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.8.10"
60.      }
61.  }

复制代码

二、转换视图成data binding layout

2、找到想要改为dataBinding视图的页面, Mac体系的按Option Enter （Windows体系的按Alt + Enter）弹出如下：
比如选中的是activity_main.xml视图文件，那么

1.  

复制代码

1. <?xml version="1.0" encoding="utf-8"?>
2.  <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.      xmlns:app="http://schemas.android.com/apk/res-auto"
4.      xmlns:tools="http://schemas.android.com/tools"
5.      android:layout_width="match_parent"
6.      android:layout_height="match_parent"
7.      tools:context=".MainActivity">
8.  ​
9.      <TextView
10.          android:layout_width="wrap_content"
11.          android:layout_height="wrap_content"
12.          android:text="Hello World!"
13.          app:layout_constraintBottom_toBottomOf="parent"
14.          app:layout_constraintEnd_toEndOf="parent"
15.          app:layout_constraintStart_toStartOf="parent"
16.          app:layout_constraintTop_toTopOf="parent" />
17.  ​
18.  </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

选择这个功能之后，就可以将当前xml文件转换成

1.  <?xml version="1.0" encoding="utf-8"?>
2.  <layout xmlns:android="http://schemas.android.com/apk/res/android"
3.      xmlns:app="http://schemas.android.com/apk/res-auto"
4.      xmlns:tools="http://schemas.android.com/tools">
5.  ​
6.      <data>
7.  ​
8.      </data>
9.  ​
10.      <androidx.constraintlayout.widget.ConstraintLayout
11.          android:layout_width="match_parent"
12.          android:layout_height="match_parent"
13.          tools:context=".MainActivity">
14.  ​
15.          <TextView
16.              android:layout_width="wrap_content"
17.              android:layout_height="wrap_content"
18.              android:text="Hello World!"
19.              app:layout_constraintBottom_toBottomOf="parent"
20.              app:layout_constraintEnd_toEndOf="parent"
21.              app:layout_constraintStart_toStartOf="parent"
22.              app:layout_constraintTop_toTopOf="parent" />
23.  ​
24.      </androidx.constraintlayout.widget.ConstraintLayout>
25.  </layout>

复制代码

整体变成了下面这种结构方式

1.  <layout xmlns:android="http://schemas.android.com/apk/res/android"
2.      xmlns:app="http://schemas.android.com/apk/res-auto"
3.      xmlns:tools="http://schemas.android.com/tools">
4.      
5.      <data>
6.      
7.      </data>
8.      
9.      <!--  布局文件之前的样式  -->
10.      ...
11.      
12.  </layout>    

复制代码

可以看到页面出现了新的Layout和data的空标签。（data 就是用来存放数据的）

改造之后的完整的代码如下所示：

1.  

复制代码

1. <?xml version="1.0" encoding="utf-8"?>
2.  <layout xmlns:android="http://schemas.android.com/apk/res/android"
3.      xmlns:tools="http://schemas.android.com/tools"
4.      xmlns:app="http://schemas.android.com/apk/res-auto">
5.  ​
6.      <data>
7.          <variable
8.              name="user"
9.              type="com.check.databindingproject.UserModel" />
10.      </data>
11.  ​
12.      <androidx.constraintlayout.widget.ConstraintLayout
13.          android:layout_width="match_parent"
14.          android:layout_height="match_parent"
15.          tools:context=".MainActivity">
16.  ​
17.          <TextView
18.              android:id="@+id/name_text"
19.              android:layout_width="wrap_content"
20.              android:layout_height="wrap_content"
21.              app:layout_constraintTop_toTopOf="parent"
22.              app:layout_constraintLeft_toLeftOf="parent"
23.              app:layout_constraintBottom_toBottomOf="parent"
24.              app:layout_constraintRight_toRightOf="parent"
25.              tools:text="姓名"
26.              android:text="@{`Name is ` + user.name}"  />
27.  ​
28.          <TextView
29.              android:layout_width="wrap_content"
30.              android:layout_height="wrap_content"
31.              app:layout_constraintTop_toBottomOf="@id/name_text"
32.              app:layout_constraintLeft_toLeftOf="parent"
33.              app:layout_constraintRight_toRightOf="parent"
34.              tools:text="年龄"
35.              android:text="@{`Age is ` + user.age}" />
36.      </androidx.constraintlayout.widget.ConstraintLayout>
37.  </layout>

复制代码

此中正常绑定某个变量的值到控件的某个元素上，可以用@{user.age}，括号内里用变量替代。然后如果想在内里加上一些常量值，那么就用模板@{`Age is` + user.age}

三、创建ViewModel和Binding对象

3、创建ViewModel类
UserModel.kt

1.  

复制代码

1. package com.check.databindingproject
2.  ​
3.  import androidx.databinding.BaseObservable
4.  import androidx.databinding.Bindable
5.  ​
6.  class UserModel(user_name: String, user_age: Int) : BaseObservable() {
7.  ​
8.      @get:Bindable
9.      var name: String = user_name
10.          set(value) {
11.              field = value
12.              notifyPropertyChanged(BR.name) // 触发绑定更新
13.          }
14.  ​
15.      @get:Bindable
16.      var age: String = user_age.toString()
17.          set(value) {
18.              field = value
19.              notifyPropertyChanged(BR.age) // 触发绑定更新
20.          }
21.  }

复制代码

MainViewModel.kt

1.  

复制代码

1. package com.check.databindingproject
2.  ​
3.  import androidx.lifecycle.ViewModel
4.  ​
5.  class MainViewModel : ViewModel() {
6.      val user = UserModel("Alice", 300)
7.  }

复制代码

接下来到对应的Activity里，声明全局变量为视图去掉下划线改大写+binding, 比如视图为activity_main.xml，则对应声明的databinding类型变量就是ActivityMainBinding类型，如下：
MainActivity.kt

1.  package com.check.databindingproject
2.  ​
3.  import android.os.Bundle
4.  import androidx.appcompat.app.AppCompatActivity
5.  import androidx.databinding.DataBindingUtil
6.  import androidx.lifecycle.ViewModelProvider
7.  import com.check.databindingproject.databinding.ActivityMainBinding
8.  ​
9.  class MainActivity : AppCompatActivity() {
10.  ​
11.      private lateinit var binding: ActivityMainBinding
12.      private lateinit var viewModel: MainViewModel
13.  ​
14.      override fun onCreate(savedInstanceState: Bundle?) {
15.          super.onCreate(savedInstanceState)
16.  ​
17.          // 获取 ViewModel
18.          viewModel = ViewModelProvider(this)[MainViewModel::class.java]
19.  ​
20.          // 使用 DataBinding
21.          binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
22.          // 将 ViewModel 的 user 绑定到布局
23.          binding.user = viewModel.user
24.  ​
25.          // 如果你需要动态更改数据，可以直接修改 UserModel 的属性
26.          viewModel.user.name = "Bob"
27.          viewModel.user.age = "1300"
28.      }
29.  }

复制代码

末了表现出来的效果就是

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。