MVVM架构设计1

在《JectPack组件开发2-----MVVM架构核心（DataBinding + ViewModel）》中，简单地介绍了DataBinding + ViewModel的基本用法，从这部分开始引出MVVM架构的设计。

1、MVVM架构

在之前已经介绍过了，MVVM架构分为3部分：Model层主要负责数据获取，View层还是Activity和layout布局，Activity主要负责初始化的部分，layout也可以实现部分逻辑功能。ViewModel主要是JavaBean类，通过DataBinding和View层进行双向绑定。

2、ViewModel层

Model层的作用就不必多说了，跟MVP架构中的Model层职能相同，现在需要做ViewModel层的第一版设计。

public class ViewModel  extends BaseObservable {
    private final ActivityMainBinding binding;
    private final Application application;
    //获取的数据
    private String city1;
    private String temperature;
    private String humidity;
    //edittext输入
    private String cityInput;
    //Model层
    private ModelImpl model;
    //构造方法
    public ViewModel(ActivityMainBinding binding,Application application){
        model = new ModelImpl();
        this.application = application;
        this.binding = binding;
    }

    //从网络层获取数据
    public void getData(View view){
        if(model != null){
            model.getWeatherByCity(cityInput, "7b153f32bcfb18ff064c519e5e7a6b35", new IModel.WeatherCallback() {
                @Override
                public void complete(WeatherBean.ResultBean result) {
                   city1 =  result.getCity();
                   setCity1(city1);
                    WeatherBean.ResultBean.RealtimeBean realtime = result.getRealtime();
                    temperature = realtime.getTemperature();
                    setTemperature(temperature);
                    humidity = realtime.getHumidity();
                    setHumidity(humidity);
                }
            });
        }
    }

    @Bindable
    public String getCity1() {
        return city1;
    }

    public void setCity1(String city1) {
        this.city1 = city1;
        notifyPropertyChanged(BR.city1);
    }
    @Bindable
    public String getTemperature() {
        return temperature;
    }

    public void setTemperature(String temperature) {
        this.temperature = temperature;
        notifyPropertyChanged(BR.temperature);
    }
    @Bindable
    public String getHumidity() {
        return humidity;
    }

    public void setHumidity(String humidity) {
        this.humidity = humidity;
        notifyPropertyChanged(BR.humidity);
    }

    @Bindable
    public String getCityInput() {
        return cityInput;
    }

    public void setCityInput(String cityInput) {
        this.cityInput = cityInput;
        notifyPropertyChanged(BR.cityInput);
    }
}

在ViewModel层，需要提供该页面需要的数据，在Demo中本页面显示的数据是该地区的温度和湿度，所以需要网络请求获取这些数据，然后将这些数据通过get和set方法供视图层显示数据。

3、View层

在View层，主要是在XML布局文件中，做逻辑处理和数据显示。先是在variable中加入支持的Bean类，就是ViewModel，来提供数据源。

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="viewModel"
            type="com.example.weather.viewModel.ViewModel" />
    </data>
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".view.activity.MainActivity">
    <EditText
        android:id="@+id/et_city"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="输入查询的城市"
        android:text="@={viewModel.cityInput}"
        android:textSize="20dp"
        ></EditText>
    <Button
        android:id="@+id/btn_search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="查询"
        android:textSize="20dp"
        android:onClick="@{viewModel.getData}"
        android:layout_below="@id/et_city"></Button>
    <TextView
        android:id="@+id/tv_city"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="@{viewModel.city1}"
        android:textSize="20dp"
        android:layout_below="@id/btn_search"
        android:layout_marginTop="20dp"
        ></TextView>
    <LinearLayout
    android:id="@+id/ll_temp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_below="@id/tv_city">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="温度："
        android:textSize="20dp"
        ></TextView>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{viewModel.temperature}"
        android:textSize="20dp"
        ></TextView>
</LinearLayout>
    <LinearLayout
        android:id="@+id/ll_huminty"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@id/ll_temp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="湿度："
            android:textSize="20dp"
            ></TextView>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.humidity}"
            android:textSize="20dp"
            ></TextView>
    </LinearLayout>
</RelativeLayout>
</layout>

在Activity中，只需要通过DataBinding将ViewModel和View层连接起来即可，只有很简短的一段代码。

 binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
 ViewModel viewModel = new ViewModel(binding,getApplication());
 binding.setViewModel(viewModel);

经过测试后，可以正常运行：

再加一个RecyclerView显示未来的天气变化趋势。

<androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/ll_huminty"
        app:list="@{viewModel.futureBeanList}"></androidx.recyclerview.widget.RecyclerView>

@Bindable
    public List<WeatherBean.ResultBean.FutureBean> getFutureBeanList() {
        return futureBeanList;
    }

    public void setFutureBeanList(List<WeatherBean.ResultBean.FutureBean> futureBeanList) {
        this.futureBeanList = futureBeanList;
        notifyPropertyChanged(BR.futureBeanList);
    }

    @BindingAdapter("app:list")
    public static void setFuture(RecyclerView view, List<WeatherBean.ResultBean.FutureBean> futureBeanList){
        view.setAdapter(new FutureAdapter(view.getContext(),futureBeanList));
        view.setLayoutManager(new LinearLayoutManager(view.getContext()));
    }

适配器代码，非常简洁

public class FutureAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private final Context context;
    private final List<WeatherBean.ResultBean.FutureBean> futureBeanList;

    public FutureAdapter(Context context, List<WeatherBean.ResultBean.FutureBean> futureBeanList){
        this.context = context;
        this.futureBeanList = futureBeanList;
    }
    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        ItemFutureBinding binding = DataBindingUtil.inflate(LayoutInflater.from(context), R.layout.item_future, parent, false);
        return new FutureViewHolder(binding.getRoot());
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        if(holder instanceof FutureViewHolder){
            ((FutureViewHolder) holder).bind.setFuture(futureBeanList.get(position));
        }
    }

    @Override
    public int getItemCount() {
        return futureBeanList.size();
    }

    public class FutureViewHolder extends RecyclerView.ViewHolder{
        private ItemFutureBinding bind;
        public FutureViewHolder(@NonNull View itemView) {
            super(itemView);
            bind = DataBindingUtil.bind(itemView);
        }
    }
}

查看一下效果：