欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

MVVM与DataBinding实现数据双向绑定

程序员文章站 2022-07-02 20:50:14
...

MVVM

MVVM与DataBinding实现数据双向绑定
1.降低耦合:一个ViewModel层可以绑定不同的View层,当Model变化时View可以不变。
2.可重用性: 可以把一些视图逻辑放在ViewModel层中,让很多的View重用这些视图逻辑。

这里主要通过一个简单的例子来实现mvvm和databinding的实现,关于理论这里就不详细讲解,可自行百度。

创建实例代码步骤

MVVM与DataBinding实现数据双向绑定

1.在项目(app)的build.gradle中添加 dataBinding{enabled= true }

    //添加dataBinding依赖
    dataBinding{
        enabled=true
  
    }
  1. 创建一个java bean,这里时一个简单的UserInfo
public class UserInfo {

    //被观察的属性  必须是public修饰符 DataBinding的规范

    public ObservableField<String> name=new ObservableField<>();

    public ObservableField<String> psw =new ObservableField<>();
}

  1. 首先需要在布局的最外层套用 … , 然后 配置data ->variable信息,用data ->variable的name属性标识成员属性,格式为: @{标识.成员属性}
<?xml version="1.0" encoding="utf-8"?>
<layout>
    <data>

        <variable
            name="loginViewModel"
            type="com.example.mvvmdatabing.vm.LoginViewModel"/>
    </data>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

   <EditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_margin="25dp"
       android:addTextChangedListener="@{loginViewModel.nameInput}"
       android:hint="请输入账号"
       android:text="@{loginViewModel.userInfo.name}"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="25dp"
        android:addTextChangedListener="@{loginViewModel.pswInput}"
        android:hint="请输入密码"
        android:text="@{loginViewModel.userInfo.psw}"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="@{loginViewModel.loginClickListener}"
        android:text="登录"
        />


</LinearLayout>
</layout>

4.创建 LoginViewModel 对应xml布局的 type=“com.example.mvvmdatabing.vm.LoginViewModel”

public class LoginViewModel {
    public UserInfo userInfo;
    public LoginViewModel(ActivityMainBinding binding) {

        userInfo=new UserInfo();
        //将ViewModel和View进行绑定,通过DataBinding工具
        binding.setLoginViewModel(this);
    }


    //对应布局的监听   android:addTextChangedListener="@{loginViewModel.nameInput}"
    public TextWatcher nameInput =new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
          //view层接收到用户的输入,改变Model层的javabean属性
            userInfo.name.set(String.valueOf(s));

        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    } ;

    //对应布局的监听   android:addTextChangedListener="@{loginViewModel.pswInput}"
    public TextWatcher pswInput=new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
         //view层接收到用户的输入,改变Model层的javabean属性
            userInfo.psw.set(String.valueOf(s));
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    };

    //对应布局的监听  android:onClick="@{loginViewModel.loginClickListener}"
    public View.OnClickListener loginClickListener =new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //模仿网络请求
           new Thread(new Runnable() {
               @Override
               public void run() {
                 //Model层的属性改变,通知view层刷新显示
                  // userInfo.name.set("测试Model改变View");
                   SystemClock.sleep(1500);

                   if("testmvvm".equals(userInfo.name.get())&&"123".equals(userInfo.psw.get())){
                       Log.e("testmvvm>>>>","登录成功");
                   }else {
                       Log.e("testmvvm>>>>","登录失败");

                   }
               }
           }).start();
        }
    };
}

5.在Activity中进行绑定

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       //1.必须先ReBuilder 2.代码绑定
        ActivityMainBinding binding = DataBindingUtil.setContentView(this,R.layout.activity_main);
        new LoginViewModel(binding);
    }
}

这一步的时候必须先ReBuilder项目 DataBinding会自动生成绑定代码(apt技术)
MVVM与DataBinding实现数据双向绑定

代码就这些 希望对于要学习mvvm和databinding入门同学们有一定的帮助

相关标签: android mvvm