简单教你写MVVM模式

目前比较流行的还是mvp，跟mvvm，今天我们讲mvvm模式，

想开mvp的去看我的上一篇文章了解即可 https://blog.csdn.net/taoyuxin1314/article/details/105815090

mvvm可以说是mvp的升级版，抛弃了presenter做桥梁，而是使用了DataBinding框架，它可以实现M层（数据）跟V层（UI）之间的双向绑定，稍微解释一下mvvm中第一个m指Model层，第一个v指View层，后面vm代表ViewModel。

同样的我们先来一个普通的mvc模式例子，然后转换成mvvm模式，对比一下就很清楚。

需求：点击页面上的botton，两个TextView分别显示name跟sex。

MVC模式

public class MainActivity extends AppCompatActivity {
    private TextView mTvName, mTvSex;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mTvName = findViewById(R.id.tv_mane);
        mTvSex = findViewById(R.id.tv_sex);
    }

    public void click(View v) {
        UserInfo userInfo = new UserInfo("小明","男");
        mTvName.setText(userInfo.getName());
        mTvSex.setText(userInfo.getSex());
    }
}

很简单的一个例子，大家都会，我们直接看mvvm代码。

MVVM模式

mvvm主要在V层布局上的编写，但第一步要先引入DataBinding框架，在bulid.gradle中添加，如下图：

这样就可以使用DataBinding框架了

接下来写一个实体类，model层就是实体类

public class UserInfo {
    private String name;
    private String sex;

    public UserInfo(String name, String sex) {
        this.name = name;
        this.sex = sex;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }
}

接着是布局的编写

<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

        <variable
            name="user"
            type="com.example.testproject.mvvm.model.UserInfo" />
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv_mane"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.name}" />

        <TextView
            android:id="@+id/tv_sex"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_mane"
            android:text="@{user.sex}" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_sex"
            android:onClick="click"
            android:text="Click" />
    </RelativeLayout>
</layout>

这里注意最外层用的<layout>标签，然后下面是一个<data>，<data>标签里面对应model层中的实体类，这里跟实体类取了个别名为user。然后下面就是普通的布局，注意一点是的两个TextView的text属性，使用了“@{user.sex}”跟“@{user.name}”，这样就实现了数据与UI层的绑定，当UserInfo实体类中的数据变化时，两个TextView的内容也会自动更新变化。

最后看activity里面的代码

public class MainActivity extends AppCompatActivity {
    private ActivityMainMvvmBinding mBinding;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mBinding = DataBindingUtil.setContentView(this,R.layout.activity_main_mvvm);
    }

    public void click(View v){
        mBinding.setUser(new UserInfo("小明","男"));
    }
}

因为是个activity，布局名字是activity_main_mvvm，所以使用DataBindingUtil创建一个ActivityMainMvvmBinding对象，在调用set方法就可以设置数据了。

好了，一个简单的mvvm模式就写好了，可以看到，使用mvvm模式，布局显得简单，少去了很多id属性的配置，activity或是fragment也很简单，没有了findViewById的操作等。这一般都是要在大项目中才能体现出来它的优点。

最最最主要的是，当页面数据变化是，model实体类中的数据会更新，但去更新实体类中的数据时，UI页面也会随着更新，这就是数据的双向绑定的效果，是DataBinding框架的功劳，使用起来也很方便，这也会是mvvm能成功目前主流模式的原因。