使用LiveData和DataBinding進行雙向綁定

使用LiveData和DataBinding進行雙向綁定

1 引入依賴包

dependencies {
    // ...
    implementation "androidx.fragment:fragment:1.0.0"
    implementation "androidx.lifecycle:lifecycle-viewmodel:2.0.0"
    implementation "androidx.lifecycle:lifecycle-extensions:2.0.0"
}

2 開啓數據綁定

android {
    dataBinding {
        enabled = true
    }
}

3 創建模型

class AuthenticationInformation(val username: String = "", val encryptedPassword: String = "")

4 創建視圖模型

class AuthenticationViewModel() : ViewModel() {

    var authenticationInformation = MutableLiveData<AuthenticationInformation>()

    var username = "Alan"
    set(value) {
        field = value
        authenticationInformation.postValue(AuthenticationInformation(username, encryptPassword(password)))
    }

    var password = ""
    set(value) {
        field = value
        authenticationInformation.postValue(AuthenticationInformation(username, encryptPassword(password)))
    }

    private fun encryptPassword(originalPassword: String): String {
        // ...
        return "******"
    }
}

5 更新佈局

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <data>
        <variable name="authenticationViewModel" type="com.tq.livedatabinding.AuthenticationViewModel"/>
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".MainActivity">

        <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@={authenticationViewModel.content}"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

6 在Activity中創建綁定關係

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        var binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.authenticationViewModel = ViewModelProviders.of(this).get(AuthenticationViewModel::class.java)
        binding.lifecycleOwner = this
        binding.getAuthenticationViewModel()?.authenticationInformation?.observe(this, object: Observer<AuthenticationInformation>{
            override fun onChanged(authenticationInformation: AuthenticationInformation) {
                Log.d("TEST", authenticationInformation.username)
            }
        })
    }
}

7 在Fragment中創建綁定關係

override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
): View? {
    var binding = ActivityMainBinding.inflate(inflater, container, false)

    binding.authenticationViewModel = ViewModelProviders.of(activity)
            .get(AuthenticationViewModel::class.java)
    binding.lifecycleOwner = activity
    binding.getAuthenticationViewModel()?
            .authenticationInformation?
            .observe(this, object: Observer<AuthenticationInformation> {
                override fun onChanged(authenticationInformation: AuthenticationInformation) {
                    Log.d("TEST", authenticationInformation.username)
                }
            })

    return binding.root
}