MVVM与DataBinding实现数据双向绑定

MVVM

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

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

创建实例代码步骤

MVVM与DataBinding实现数据双向绑定_第2张图片

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实现数据双向绑定_第3张图片

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

你可能感兴趣的:(MVVM与DataBinding实现数据双向绑定)