Android简单mvvm,Android MVVM实战Demo --- 基于DataBinding

提到Android的架构，大家肯定会想到MVC、MVP、MVVM；今天我们就来一起学习下基于DataBinding的MVVM。在这里你也许会问，DataBinding和MVVM之间有什么关系吗？首先你需要明确下DataBinding是做什么的，DataBinding是实现数据和UI双向绑定的框架。其实两者的关系很简单，MVVM是一种设计思想，而DataBinding只是实现MVVM模式的一种方式而已，除此之外，实现MVVM还有另一种方式，那就是ViewModel+LiveData+Repository；在看本小节之前，希望您对DataBinding的基础知识有所了解。我们先来看下实例Demo最后实现的效果：

截图

很简单，界面主要分为上下两部分，上部分为FrameLayout，下部分为一个RecyclerView。话不多说，直接上代码：

首先是我们的数据Bean类：

public class HallListBean implements Serializable{

public int iRet;

public String info;

public HallListData data;

public static class HallListData implements Serializable{

public int total;

public ArrayList list;

public PackageInfo package_info;

}

public static class HallItem implements Serializable{

public String id;

public String hotel_name;

public String cate_name;

public String hall_name;

public String cover;

public String table_num;

public String price;

public String pillar_name;

public String icon;

}

public static class PackageInfo implements Serializable{

public String id;

public String price;

public String background;

public String color;

public String title;

}

}

我们的主界面为 HallListActivity，对应的ViewModel为 HallListViewModel，我们先来看下HallListActivity的布局文件：

xmlns:app="http://schemas.android.com/apk/res-auto">

name="hallListViewModel"

type="com.example.databindingtest.viewmodel.HallListViewModel"/>

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/white">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="180dp">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="fitXY"

app:imageUrl="@{hallListViewModel.packageData.background}"/>

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="85dp"

android:orientation="horizontal">

android:id="@+id/tv_price"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="20dp"

android:includeFontPadding="false"

android:text="@{hallListViewModel.packageData.price}"

android:textColor="@color/white"

android:textSize="26dp"

android:textStyle="bold" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="1dp"

android:includeFontPadding="false"

android:text="元起全包/桌"

android:textColor="@color/white"

android:textSize="26dp"

android:textStyle="bold" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="20dp"

android:layout_marginTop="5dp"

android:layout_marginBottom="20dp"

android:includeFontPadding="false"

android:text="@{hallListViewModel.packageData.title}"

android:textColor="@color/white"

android:textSize="13dp" />

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:background="@drawable/bg_hall_top"/>

android:id="@+id/recycler_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:overScrollMode="never"

app:items="@{hallListViewModel.listItems}"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="15dp"

android:visibility="@{hallListViewModel.dataLoading ? View.VISIBLE : View.GONE}" />

接着看下HallListViewModel：

package com.example.databindingtest.viewmodel;

import android.content.Context;

import android.databinding.ObservableArrayList;

import android.databinding.ObservableBoolean;

import android.databinding.ObservableField;

import com.example.databindingtest.model.HallListBean;

import com.example.databindingtest.utils.ResponseResult;

import com.google.gson.Gson;

public class HallListViewModel{

private Context mContext;

public ObservableArrayList listItems = new ObservableArrayList<>();

public ObservableField packageData = new ObservableField<>();

public ObservableBoolean dataLoading = new ObservableBoolean(true);

public HallListViewModel(Context context) {

this.mContext = context.getApplicationContext();

}

public void getHallListData(){

new Thread(new Runnable() {

@Override

public void run() {

try {

Thread.sleep(500);

//模拟网络拉取数据

HallListBean testBean = new Gson().fromJson(ResponseResult.response, HallListBean.class);

packageData.set(testBean.data.package_info);

listItems.addAll(testBean.data.list);

dataLoading.set(false);

} catch (InterruptedException e) {

e.printStackTrace();

}

}

}).start();

}

}

为了简单起见，笔者没有进行网络请求，而是直接把Json数据写入到ResponseResult.response，开启一个线程来模拟网络请求操作。接着我们看下HallListActivity中的代码，HallListActivity(xml)作为MVVM中的View，肯定只做和UI操作相关的事情啦：

package com.example.databindingtest;

import android.databinding.DataBindingUtil;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.LinearLayoutManager;

import com.example.databindingtest.utils.DividerItemDecoration;

import com.example.databindingtest.databinding.ActivityHallListBinding;

import com.example.databindingtest.viewmodel.HallListViewModel;

public class HallListActivity extends AppCompatActivity {

private HallListViewModel viewModel;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

ActivityHallListBinding hallListBinding = DataBindingUtil.setContentView(this, R.layout.activity_hall_list);

viewModel = new HallListViewModel(this);

hallListBinding.setVariable(BR.hallListViewModel, viewModel);

hallListBinding.recyclerView.setLayoutManager(new LinearLayoutManager(this));

hallListBinding.recyclerView.addItemDecoration(new DividerItemDecoration(this));

hallListBinding.recyclerView.setAdapter(new HallListAdapter(this));

}

@Override

protected void onResume() {

super.onResume();

viewModel.getHallListData();

}

}

由HallListActivity中的代码可以看到，recyclerview对应的adapter为HallListAdapter，我们还是先来看下 item_hall的布局文件：

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

xmlns:app="http://schemas.android.com/apk/res-auto">

name="itemHall"

type="com.example.databindingtest.model.HallListBean.HallItem"/>

android:id="@+id/ll_hall"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:padding="20dp">

android:layout_width="110dp"

android:layout_height="83dp"

android:scaleType="centerCrop"

app:imageUrl="@{itemHall.cover}"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginLeft="15dp"

android:layout_toRightOf="@+id/card_left"

android:orientation="vertical">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:ellipsize="end"

android:maxLines="1"

android:text="@{itemHall.hotel_name}"

android:textColor="#323038"

android:textSize="14dp" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:layout_marginTop="2dp">

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:ellipsize="end"

android:maxLines="1"

android:text="@{itemHall.hall_name}"

android:textColor="#323038"

android:textSize="15dp"

android:textStyle="bold" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@{itemHall.price}"

android:textColor="#FF1D41"

android:textSize="16dp"

android:textStyle="bold" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="元全包/桌"

android:textColor="#FF1D41"

android:textSize="11dp" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="1dp"

android:gravity="center_vertical"

android:orientation="horizontal">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:maxLines="1"

android:text="@{itemHall.cate_name}"

android:textColor="#95949D"

android:textSize="11sp" />

android:layout_width="1dp"

android:layout_height="10dp"

android:layout_gravity="center_vertical"

android:layout_marginLeft="7dp"

android:layout_marginRight="7dp"

android:background="#DFDFDF" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:maxLines="1"

android:text="@{itemHall.table_num}"

android:textColor="#95949D"

android:textSize="11sp" />

android:layout_width="1dp"

android:layout_height="10dp"

android:layout_gravity="center_vertical"

android:layout_marginLeft="7dp"

android:layout_marginRight="7dp"

android:background="#DFDFDF" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:maxLines="1"

android:text="@{itemHall.pillar_name}"

android:textColor="#95949D"

android:textSize="11sp" />

接着看下HallListAdapter中的代码：

package com.example.databindingtest;

import android.content.Context;

import android.databinding.DataBindingUtil;

import android.support.annotation.NonNull;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.Toast;

import com.example.databindingtest.databinding.ItemHallBinding;

import com.example.databindingtest.model.HallListBean;

import com.example.databindingtest.utils.BindingViewHolder;

import java.util.ArrayList;

public class HallListAdapter extends RecyclerView.Adapter{

private Context context;

private final LayoutInflater mLayoutInflater;

private ArrayList hallList = new ArrayList<>();

public HallListAdapter(Context context) {

this.context = context;

mLayoutInflater = (LayoutInflater)

context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

}

@NonNull

@Override

public BindingViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

ItemHallBinding itemHallBinding = DataBindingUtil.inflate(mLayoutInflater, R.layout.item_hall, parent, false);

return new BindingViewHolder(itemHallBinding);

}

@Override

public void onBindViewHolder(@NonNull BindingViewHolder bindingViewHolder, final int position) {

ItemHallBinding binding = (ItemHallBinding)bindingViewHolder.getBinding();

binding.setVariable(BR.itemHall, hallList.get(position));

binding.executePendingBindings();

binding.llHall.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(context, hallList.get(position).hotel_name, Toast.LENGTH_SHORT).show();

}

});

}

@Override

public int getItemCount() {

return hallList.size();

}

public void replaceData(ArrayList datas){

hallList.clear();

hallList.addAll(datas);

notifyDataSetChanged();

}

}

对应的ViewHolder为：

package com.example.databindingtest.utils;

import android.databinding.ViewDataBinding;

import android.support.v7.widget.RecyclerView;

public class BindingViewHolder extends RecyclerView.ViewHolder{

private T mBinding;

public BindingViewHolder(T mBinding) {

super(mBinding.getRoot());

this.mBinding = mBinding;

}

public T getBinding(){

return mBinding;

}

}

最后附上Demo中使用到的BindingAdapter：

package com.example.databindingtest.utils;

import android.databinding.BindingAdapter;

import android.widget.ImageView;

import com.bumptech.glide.Glide;

public class ImageBinding {

@BindingAdapter({"imageUrl"})

public static void loadImageFromUrl(ImageView view,

String url) {

Glide.with(view.getContext())

.load(url)

.into(view);

}

}

package com.example.databindingtest.utils;

import android.databinding.BindingAdapter;

import android.support.v7.widget.RecyclerView;

import com.example.databindingtest.HallListAdapter;

import com.example.databindingtest.model.HallListBean;

import java.util.ArrayList;

public class RecyclerItemBinding {

@BindingAdapter("app:items")

public static void setItems(RecyclerView recyclerView, ArrayList items) {

HallListAdapter adapter = (HallListAdapter) recyclerView.getAdapter();

if (adapter != null)

{

adapter.replaceData(items);

}

}

}

上述就是示例Demo的所有代码，如果大家有不同的观点，欢迎一起交流啊。