簡單教你寫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能成功目前主流模式的原因。