一个简单的mvvm架构例子

1.MVVM通过双向绑定的机制，实现数据和UI内容，只要想改其中一方，另一方都能够及时更新的一种设计理念，这样只需要改变数据就行。
先看下MVVM设计图：

一个简单的mvvm架构例子

一般情况下就这两种情况，这看起来跟MVP好像没啥差别，其实区别还是挺大的，在MVP中View和presenter要相互持有，方便调用对方，而在MVP中 View和ViewModel通过Binding进行关联，他们之前的关联处理通过DataBinding完成。

2.先看一下项目的结构

一个简单的mvvm架构例子

m层就是简单的一个JavaBean；v层是activity以及xml布局文件；vm层来处理逻辑；

还是贴一下代码：

m层：

public interface Callback<T> {
    void onCallBack(T t);
}


//JavaBean
public class UserInfo extends BaseObservable {
    private int age;
    private String name;

    public UserInfo() {
    }

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

    @Bindable//注解用于关联布局文件的相关控件
    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    @Bindable//注解用于关联布局文件的相关控件
    public String getName() {
        return name;
    }

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

    @Override
    public String toString() {
        return "UserInfo{" +
                "age=" + age +
                ", name='" + name + '\'' +
                '}';
    }
}

v层：

public class MVVMActivity extends AppCompatActivity{
    Button button;
    EditText editText;
    TextView tvAge,tvName;
    private SampleViewModel mSampleViewModel;
    private InputMethodManager imm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivitySampleMvvmBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_sample_mvvm);//这是引入DataBinding后自动生成的类
        mSampleViewModel = new SampleViewModel(binding);
        mSampleViewModel.mViewDataBinding.setMvvmActivity(this);//需要与xml文件做绑定

        button = findViewById(R.id.btn);
        editText = findViewById(R.id.edt);
        tvName = findViewById(R.id.tv_name);
        tvAge = findViewById(R.id.tv_age);
        imm = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
    }

    private void setDataToView(String input) {
        mSampleViewModel.getUserInfo(input, new Callback<UserInfo>() {
            @Override
            public void onCallBack(UserInfo userInfo) {
                mSampleViewModel.mViewDataBinding.setUserInfo(userInfo);
            }
        });
    }

    public void set(String input){
        System.out.println("点击设置"+input);
        imm.hideSoftInputFromWindow(getWindow().peekDecorView().getWindowToken(),0);
        setDataToView(input);
    }

}

xml文件：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data >
        <import type="android.view.View"/><!--导入包，下面可以使用包中的变量或方法-->

        <variable
            name="userInfo"//为引入的类从新起一个变量名，方便下面使用
            type="com.ysl.mvvm.model.UserInfo">
        </variable>
        <variable
            name="mvvmActivity"
            type="com.ysl.mvvm.view.MVVMActivity">
        </variable>
        <variable
            name="input"//可以引用获取输入框中输入的内容
            type="String" />
    </data>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <EditText
            android:id="@+id/edt"
            android:text="@={input}"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="@{() -> mvvmActivity.set(input)}"
            android:text="设置"/>
        <TextView
            android:id="@+id/tv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@={userInfo.name}"
            android:visibility="@{(userInfo.name != null || userInfo.name.length() == 0) ? View.VISIBLE : View.GONE}"/>
        <TextView
            android:id="@+id/tv_age"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@={userInfo.age+``}" />

    </LinearLayout>
</layout>

vm层：

public interface BaseViewModel {
    void onDestroy();
}


public abstract class AbstractViewModel<T extends ViewDataBinding> implements BaseViewModel {
    public T mViewDataBinding;
    public AbstractViewModel(T viewDataBinding) {
        this.mViewDataBinding = viewDataBinding;
    }

    @Override
    public void onDestroy() {
        mViewDataBinding.unbind();
    }
}


public class SampleViewModel extends AbstractViewModel<ActivitySampleMvvmBinding> {

    public SampleViewModel(ActivitySampleMvvmBinding viewDataBinding) {
        super(viewDataBinding);
    }

    public  void getUserInfo(String uid, Callback<UserInfo> callback) {
        //从网络或缓存获取信息，这里模拟生成一个对象
        int age = (uid == null || uid.length() == 0) ? 100 : uid.length();
        UserInfo userInfo = new UserInfo(age, uid);
        callback.onCallBack(userInfo);
    }
}

3.可以看到mvvm架构增加了xml文件中的功能；它可以引用类，并且使用里面的变量或方法；而且控件自身也可以和bean中的某个字段进行关联（包括单向关联或双向关联），这样做的好处是，当任何一方发生变化时，另一方会自定更新自己的值。我们在v层的activity中，代码将会更加的简洁；而且view也不会直接持有model层的任何对象了，真正实现了view和model的完全分离。

参考：https://blog.****.net/singwhatiwanna/article/details/80904132

一个简单的mvvm架构例子

相关推荐