android mvvm双向绑定,Android MVVM实战Demo完全解析

原标题：Android MVVM实战Demo完全解析

前言

在之前的文章中介绍了部分mvvm模式的理论，那今天就通过一个Demo来讲解一下mvvm在实战中的结构是怎么样的，以及它的具体使用，下面一起来看，关于mvvm，还是先贴一下学习地址。

Android 对比MVC、MVP来聊聊MVVM模式的理解

在之前DataBinding的学习中，当然也包括网上大部分关于mvvm和databinding的教程中，都是在xml中引入很多变量，然后把这些变量的数据和控件绑定在一起，这样xml的可读性非常差。实际上正确的做法，是只需要把ViewModel变量引入即可。而且很多也没有讲解如何使用ViewModel。

效果图

目录结构

整体架构MVVM，网络请求用的是retrofit2+rxjava2,图片加载用的Glide，列表用的xRecyclerView库

在这里我假设读者已经掌握了DataBinding的用法，还不会的赶紧点击上面的链接学起来，DataBinding是实现mvvm的一种工具，在mvvm项目中的重要性不言而喻，这里我还是再次说明一下各层的作用

1.View层就是展示数据的，以及接收到用户的操作传递给viewModel层，通过dataBinding实现数据与view的单向绑定或双向绑定

2.Model层最重要的作用就是获取数据了，当然不止于此，model层将结果通过接口的形式传递给viewModel层

3.ViewModel 层通过调用model层获取数据，以及业务逻辑的处理。

4.mvvm中 viewModel 和MVP中的presenter 的作用类似 ，只不过是通过 databinding 将数据与ui进行了绑定。

代码

1.MainActivity的布局

2.MainActivity

publicclassMainActivityextendsAppCompatActivityimplementsXRecyclerView.LoadingListener{

privateActivityMainBinding binding;

privateNewsAdapter newsAdapter; //新闻列表的适配器privateNewsVM newsVM; @OverrideprotectedvoidonCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState); binding = DataBindingUtil.setContentView(this, R.layout.activity_main); initRecyclerView(); newsVM = newNewsVM(this, binding, newsAdapter); }

/** * 初始化RecyclerView */privatevoidinitRecyclerView(){ binding.newsRv.setRefreshProgressStyle(ProgressStyle.BallClipRotate); //设置下拉刷新的样式binding.newsRv.setLoadingMoreProgressStyle(ProgressStyle.BallClipRotate); //设置上拉加载更多的样式binding.newsRv.setArrowImageView(R.mipmap.pull_down_arrow); binding.newsRv.setLoadingListener(this); LinearLayoutManager layoutManager = newLinearLayoutManager(this); binding.newsRv.setLayoutManager(layoutManager); newsAdapter = newNewsAdapter(this); binding.newsRv.setAdapter(newsAdapter); } @OverridepublicvoidonRefresh(){

//下拉刷新newsVM.loadRefreshData(); } @OverridepublicvoidMore(){

//上拉加载更多newsVM.loadMoreData(); }}

这里也就是做了RecyclerView的初始化，以及设置XRecyclerView的刷新和加载的样式以及回调，还有就是创建了对应的ViewModel对象，可以通过这个对象来完成一些操作。这里的Activity基本上可以称之为比较纯粹的View了，因为确实只做了和UI相关的工作。

3.Model层去获取解析网络数据，并通过接口回调给ViewModel

publicclassNewsModelImplimplementsINewsModel{

privatestaticfinalString TAG = "NewsModelImpl";

@OverridepublicvoidloadNewsData(finalintpage, finalBaseLoadListener loadListener){ HttpUtils.getNewsData() .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribe(newDisposableObserver() {

@OverridepublicvoidonNext(@NonNull NewsBean newsBean){ Log.i(TAG, "onNext: "); loadListener.loadSuccess(simpleNewsBeanList); } } }

@Overridepublicvoid(@NonNull Throwable throwable){ Log.i(TAG, ": "+ throwable.getMessage()); loadListener.loadFailure(throwable.getMessage()); }

@OverridepublicvoidonComplete(){ Log.i(TAG, "onComplete: "); loadListener.loadComplete(); }}

4.ViewModel

publicclassNewsVMimplementsBaseLoadListener{

privatestaticfinalString TAG = "NewsVM";

privateINewsModel mNewsModel;

privateINewsView mNewsView;

privateNewsAdapter mAdapter;

privateintcurrPage = 1; //当前页数privateintloadType; //加载数据的类型publicNewsVM(INewsView mNewsView, NewsAdapter mAdapter){

this.mNewsView = mNewsView;

this.mAdapter = mAdapter; mNewsModel = newNewsModelImpl(); getNewsData(); } /** * 第一次获取新闻数据 */privatevoidgetNewsData(){ loadType = MainConstant.LoadData.FIRST_LOAD; mNewsModel.loadNewsData(currPage, this); } /** * 获取下拉刷新的数据 */publicvoidloadRefreshData(){ loadType = MainConstant.LoadData.REFRESH; currPage = 1; mNewsModel.loadNewsData(currPage, this); } /** * 获取上拉加载更多的数据 */publicvoidloadMoreData(){ loadType = MainConstant.LoadData.LOAD_MORE; currPage++; mNewsModel.loadNewsData(currPage, this); } @OverridepublicvoidloadSuccess(List list){

if(currPage > 1) {

//上拉加载的数据mAdapter.loadMoreData(list); } else{

//第一次加载或者下拉刷新的数据mAdapter.refreshData(list); } } @OverridepublicvoidloadFailure(String message){

// 加载失败后的提示if(currPage > 1) {

//加载失败需要回到加载之前的页数currPage--; } mNewsView.loadFailure(message); } @OverridepublicvoidloadStart(){ mNewsView.loadStart(loadType); } @OverridepublicvoidloadComplete(){ mNewsView.loadComplete(); }}

这里，大家应该看到了我只是做了数据和业务逻辑的处理，并没有任何更新UI的操作，也没有通过binding对象去操作UI，所有的UI都是通过view接口回调到activity去处理。再次强调一下ViewModel中持有的对象是view和mode这两个接口，处理的是业务逻辑，而不应该是databing对象，对ui的具体操作还是应该放在view层。

5.Adapter

publicclassNewsAdapterextendsBaseAdapter{

publicNewsAdapter(Context context){

super(context); }

@OverridepublicBaseViewHolder onCreateVH(ViewGroup parent, intviewType){ ViewDataBinding dataBinding = DataBindingUtil.inflate(inflater, R.layout.item_news, parent, false);

returnnewBaseViewHolder(dataBinding); }

@OverridepublicvoidonBindVH(BaseViewHolder baseViewHolder, intposition){ ViewDataBinding binding = baseViewHolder.getBinding(); binding.setVariable(BR.simpleNewsBean, mList.get(position)); binding.setVariable(BR.position,position); binding.setVariable(BR.adapter,this); binding.executePendingBindings(); //防止闪烁}

/** * 点赞 * * @paramsimpleNewsBean * @paramposition */publicvoidclickDianZan(SimpleNewsBean simpleNewsBean, intposition){

if(simpleNewsBean.isGood.get()) { simpleNewsBean.isGood.set(false); ToastUtils.show(mContext, "取消点赞 position="+ position); } else{ simpleNewsBean.isGood.set(true); ToastUtils.show(mContext, "点赞成功 position="+ position); } }}

看到这里应该比较惊讶吧，我们的onBindViewHolder()里面没有任何的更新UI的操作，没有一对的setXX()，只是设置了几个变量，以及一个点击方法而已。

6.item_news,列表的item的布局

adapter.clickDianZan(simpleNewsBean,position)}"app:resId="@{simpleNewsBean.isGood ? R.mipmap.dianzan_press : R.mipmap.dianzan_normal }"/>

注意：

1.这个ImageView的onclick方法是通过lambda表达式来实现的，它的点击事件事件就是adapter的clickDianZan()方法来完成的，里面引入的几个变量都是在adapter中设置的。

2.因为我们没有 获取具体的binding类型，所以我们通过调用setVariable(a,b)来设置。 a代表：通过BR类来查找xml中variable标签中属性name定义的名字 ，b代表：事件或数据。当然，你也可以根据item布局对应的具体的Binding来实现，比如这里就是ItemNewsBinding

3.自定义属性通过BindingAdapter来实现

adapter.clickDianZan(simpleNewsBean,position)}"app:resId="@{simpleNewsBean.isGood ? R.mipmap.dianzan_press : R.mipmap.dianzan_normal }"/>publicclassImageHelper{

/** * mv_vm xml 传入url 加载图片 * imageUrl 为xml中 的命名 * * @paramiv imageView * @paramurl 图片路径 */@BindingAdapter({"imageUrl"})

publicstaticvoidloadImage(ImageView iv, String url){ Glide.with(iv.getContext()).load(url).into(iv); }

/** * mv_vm xml 设置 mipmap Resource * * @paramiv imageView * @paramresId resource id */@BindingAdapter({"resId"})

publicstaticvoidloadMipmapResource(ImageView iv, intresId){ iv.setImageResource(resId); }}

大家可以下载源码查看，有什么问题可以给我留言。

Demo地址：https://github.com/zhouxu88/MVVMDemo

责任编辑：