前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >kotlin构建MVVM应用之双向数据绑定

kotlin构建MVVM应用之双向数据绑定

作者头像
大话swift
发布2020-04-15 17:10:09
1.5K0
发布2020-04-15 17:10:09
举报
文章被收录于专栏:大话swift

我们在构建MVVM应用的时候数据时双向流动的,比如:用户输入了数据,那么我们的model层的数据也要自动跟着更新或者我们校验了数据,是图层也要给用户反馈;网络请求完成,我们的视图层的数据也要跟着更新。

定义model层

代码语言:javascript
复制
package com.xiangshike.live.model
 
 
import androidx.databinding.ObservableField
 
 
data class UserModel(
 
    val username: ObservableField<String> = ObservableField(""),
 
    val password: ObservableField<String> = ObservableField("")
 
) {
 
 override fun toString(): String {
 
        return "UserModel(username=
 }
 
}

ObservableField表示这是一个可以被观察的String类型数据,我们在用户的model层定义了两个可以被观察的变量,我们可以和视图进行双向绑定

Activity

代码语言:javascript
复制
package com.xiangshike.live
 


 
import android.util.Log
 
import com.xiangshike.live.base.BaseActivity
 
import com.xiangshike.live.databinding.ActivityMainBinding
 
import com.xiangshike.live.model.UserModel
 
import kotlinx.android.synthetic.main.activity_main.*
 


 
class MainActivity : BaseActivity<ActivityMainBinding>() {
 
 private val mUserModel: UserModel by lazy { UserModel() }
 
 override fun getLayoutId(): Int = R.layout.activity_main
 
 override fun initData() {
 
        mDataBind.userModel = mUserModel
 
 }
 


 
 override fun initView() {
 
        loginBtn.setOnClickListener {
 
            login()
 
 }
 
 }
 


 
 private fun login() {
 
        val username = mUserModel.username.get().toString()
 
        val password: String = mUserModel.password.get().toString()
 
        username.isEmpty().let {
 
 when (it) {
 
 true -> usernameLayout.error = "用户名不可以为空"
 
 false -> usernameLayout.isErrorEnabled = false
 
 }
 
 }
 
        password.isEmpty().also {
 
 when (it) {
 
 true -> passwordLayout.error = "密码不可以为空"
 
 false -> passwordLayout.isErrorEnabled = false
 
 }
 
 }
 


 
        Log.d("mUserModel", "username:
 }
 
}
 
首先,我们给登录按钮增加点击事件

代码语言:javascript
复制
override fun initView() {
 
        loginBtn.setOnClickListener {
 
            login()
 
 }
 
 }
 
其次,我们定义了login的方法,在这里我们实现了视图和model的双向绑定

代码语言:javascript
复制
 private fun login() {
 
        val username = mUserModel.username.get().toString()
 
        val password: String = mUserModel.password.get().toString()
 
        username.isEmpty().let {
 
 when (it) {
 
 true -> usernameLayout.error = "用户名不可以为空"
 
 false -> usernameLayout.isErrorEnabled = false
 
 }
 
 }
 
        password.isEmpty().also {
 
 when (it) {
 
 true -> passwordLayout.error = "密码不可以为空"
 
 false -> passwordLayout.isErrorEnabled = false
 
 }
 
 }
 


 
        Log.d("mUserModel", "username:
 }
 

view层

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?>
 
<layout xmlns:android="http://schemas.android.com/apk/res/android"
 
 xmlns:app="http://schemas.android.com/apk/res-auto">
 


 
 <data>
 


 
 <variable
 
 name="userModel"
 
 type="com.xiangshike.live.model.UserModel" />
 
 </data>
 


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


 
 <com.google.android.material.textfield.TextInputLayout
 
 android:id="@+id/usernameLayout"
 
 android:layout_width="match_parent"
 
 android:layout_height="wrap_content"
 
 android:layout_marginTop="66dp">
 


 
 <com.google.android.material.textfield.TextInputEditText
 
 android:id="@+id/username"
 
 android:layout_width="match_parent"
 
 android:layout_height="wrap_content"
 
 android:hint="@string/username"
 
 android:singleLine="true"
 
 android:text="@={userModel.username}" />
 
 </com.google.android.material.textfield.TextInputLayout>
 


 
 <com.google.android.material.textfield.TextInputLayout
 
 android:id="@+id/passwordLayout"
 
 android:layout_width="match_parent"
 
 android:layout_height="wrap_content"
 
 android:layout_marginTop="66dp"
 
 app:passwordToggleEnabled="true">
 


 
 <com.google.android.material.textfield.TextInputEditText
 
 android:id="@+id/password"
 
 android:layout_width="match_parent"
 
 android:layout_height="wrap_content"
 
 android:hint="@string/password"
 
 android:inputType="textPassword"
 
 android:text="@={userModel.password}" />
 
 </com.google.android.material.textfield.TextInputLayout>
 


 
 <Button
 
 android:id="@+id/loginBtn"
 
 android:layout_width="match_parent"
 
 android:layout_height="wrap_content"
 
 android:text="@string/login" />
 
 </LinearLayout>
 


 


 
</layout>
 

我们的密码框和model双向绑定

@={userModel.username} 实现的双向绑定,model<=>view的双向数据流通

代码语言:javascript
复制
 <com.google.android.material.textfield.TextInputEditText
 
 android:id="@+id/username"
 
 android:layout_width="match_parent"
 
 android:layout_height="wrap_content"
 
 android:hint="@string/username"
 
 android:singleLine="true"
 
 android:text="@={userModel.username}" />
 

我们输入内容,点击登录,查看控制台输出

代码语言:javascript
复制
2020-04-14 11:28:00.886 10583-10583/? D/mUserModel: username:1111  password:11111
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 大话swift 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 定义model层
  • Activity
    • 首先,我们给登录按钮增加点击事件
      • 其次,我们定义了login的方法,在这里我们实现了视图和model的双向绑定
        • view层
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档