提到Android的架構(gòu)覆享，大家肯定會(huì)想到MVC、MVP营袜、MVVM撒顿；今天我們就來一起學(xué)習(xí)下基于DataBinding的MVVM。在這里你也許會(huì)問荚板，DataBinding和MVVM之間有什么關(guān)系嗎凤壁？首先你需要明確下DataBinding是做什么的吩屹，DataBinding是實(shí)現(xiàn)數(shù)據(jù)和UI雙向綁定的框架。其實(shí)兩者的關(guān)系很簡(jiǎn)單拧抖，MVVM是一種設(shè)計(jì)思想煤搜，而DataBinding只是實(shí)現(xiàn)MVVM模式的一種方式而已，除此之外唧席，實(shí)現(xiàn)MVVM還有另一種方式擦盾，那就是ViewModel+LiveData+Repository；在看本小節(jié)之前淌哟，希望您對(duì)DataBinding的基礎(chǔ)知識(shí)有所了解迹卢。我們先來看下實(shí)例Demo最后實(shí)現(xiàn)的效果：
截圖
很簡(jiǎn)單，界面主要分為上下兩部分徒仓，上部分為FrameLayout腐碱，下部分為一個(gè)RecyclerView。話不多說蓬衡，直接上代碼：
首先是我們的數(shù)據(jù)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<HallItem> 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喻杈，對(duì)應(yīng)的ViewModel為 HallListViewModel，我們先來看下HallListActivity的布局文件：
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<import type="android.view.View"/>
<variable
name="hallListViewModel"
type="com.example.databindingtest.viewmodel.HallListViewModel"/>
</data>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="180dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:imageUrl="@{hallListViewModel.packageData.background}"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="85dp"
android:orientation="horizontal">
<TextView
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" />
<TextView
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" />
</LinearLayout>
<TextView
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" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/bg_hall_top"/>
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
app:items="@{hallListViewModel.listItems}"/>
</LinearLayout>
<ProgressBar
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}" />
</FrameLayout>
</layout>
接著看下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<HallListBean.HallItem> listItems = new ObservableArrayList<>();
public ObservableField<HallListBean.PackageInfo> 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);
//模擬網(wǎng)絡(luò)拉取數(shù)據(jù)
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();
}
}
為了簡(jiǎn)單起見狰晚，筆者沒有進(jìn)行網(wǎng)絡(luò)請(qǐng)求筒饰，而是直接把Json數(shù)據(jù)寫入到ResponseResult.response，開啟一個(gè)線程來模擬網(wǎng)絡(luò)請(qǐng)求操作壁晒。接著我們看下HallListActivity中的代碼瓷们，HallListActivity(xml)作為MVVM中的View，肯定只做和UI操作相關(guān)的事情啦：
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對(duì)應(yīng)的adapter為HallListAdapter谬晕，我們還是先來看下 item_hall的布局文件：
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="itemHall"
type="com.example.databindingtest.model.HallListBean.HallItem"/>
</data>
<LinearLayout
android:id="@+id/ll_hall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="20dp">
<ImageView
android:layout_width="110dp"
android:layout_height="83dp"
android:scaleType="centerCrop"
app:imageUrl="@{itemHall.cover}"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="@+id/card_left"
android:orientation="vertical">
<TextView
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" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="2dp">
<TextView
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" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{itemHall.price}"
android:textColor="#FF1D41"
android:textSize="16dp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="元全包/桌"
android:textColor="#FF1D41"
android:textSize="11dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="@{itemHall.cate_name}"
android:textColor="#95949D"
android:textSize="11sp" />
<View
android:layout_width="1dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:background="#DFDFDF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="@{itemHall.table_num}"
android:textColor="#95949D"
android:textSize="11sp" />
<View
android:layout_width="1dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:background="#DFDFDF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="@{itemHall.pillar_name}"
android:textColor="#95949D"
android:textSize="11sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</layout>
接著看下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<BindingViewHolder>{
private Context context;
private final LayoutInflater mLayoutInflater;
private ArrayList<HallListBean.HallItem> 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<HallListBean.HallItem> datas){
hallList.clear();
hallList.addAll(datas);
notifyDataSetChanged();
}
}
對(duì)應(yīng)的ViewHolder為：
package com.example.databindingtest.utils;
import android.databinding.ViewDataBinding;
import android.support.v7.widget.RecyclerView;
public class BindingViewHolder<T extends ViewDataBinding> 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<HallListBean.HallItem> items) {
HallListAdapter adapter = (HallListAdapter) recyclerView.getAdapter();
if (adapter != null)
{
adapter.replaceData(items);
}
}
}
上述就是示例Demo的所有代碼，如果大家有不同的觀點(diǎn)携取，歡迎一起交流啊攒钳。
