android mvvm 工具,Android MVVM实战Demo完全解析

最新推荐文章于 2024-08-17 14:57:13 发布

涂诗语

最新推荐文章于 2024-08-17 14:57:13 发布

阅读量366

点赞数

文章标签： android mvvm 工具

最新

【重大更新说明】

感谢各位读者的阅读，这篇文章由于年代久远，存在一些错误的观点，再次向大家道歉，也做一个技术上的解释说明。

受限于当时的技术水平和网络论调，在那个时代，网上绝大多数人

都认为加了databinding就是mvvm了，实际上不是这样的，MVVM是一种架构模式，而DataBinding是一个实现数据和UI绑定的框架，是构建MVVM模式的一个工具。

mvvm和MVP有一个比较大的区别是：vm和v是单向引用，activity持有vm引用，vm是不持有view的引用的，所以vm的构造方法中不能传入视图相关的对象。但是我当时的案例中传入了view接口和adapter，这是严重错误的，这样做只能说是MVP+DataBinding。这段代码以及本文的错误示范我做保留，算是给大家一个"错误"的典范。正规的mvvm可以参考real_mvvm 包中的代码

相对规范的mvvm应该这样写

1.mvvm和MVP比较大的区别是：vm和v是单向引用，只有activity持有vm引用，vm是不持有view的引用的，所以vm的构造方法中不能传入视图相关的对象。之所以要这样，是为了防止生命周期问题导致的内存泄漏。

2.数据驱动。在常规的开发模式中，数据变化需要更新UI的时候，需要先获取UI控件的引用，然后再更新UI。获取用户的输入和操作也需要通过UI控件的引用。在MVVM中，这些都是通过数据驱动来自动完成的，数据变化后会自动更新UI，UI的改变也能自动反馈到数据层，数据成为主导因素。这样MVVM层在业务逻辑处理中只要关心数据，不需要直接和UI打交道，在业务处理过程中简单方便很多。

3.mvvm解决了mvp中接口繁杂、内存泄漏等疑难杂症。

4 结合jetpack相关组件，mvvm效果会很好。

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

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

效果图

996d76b2317f

demo.gif

996d76b2317f

项目结构.png

整体架构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进行了绑定。

MainActivity的布局很简单，就是一个列表

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

xmlns:tools="http://schemas.android.com/tools">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/news_rv"

android:layout_width="match_parent"

android:layout_height="match_parent" />

2.MainActivity

public class MainActivity extends AppCompatActivity implements XRecyclerView.LoadingListener {

private ActivityMainBinding binding;

private NewsAdapter newsAdapter; //新闻列表的适配器

private NewsVM newsVM;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

initRecyclerView();

newsVM = new NewsVM(this, binding, newsAdapter);

}

/**

* 初始化RecyclerView

private void initRecyclerView() {

binding.newsRv.setRefreshProgressStyle(ProgressStyle.BallClipRotate); //设置下拉刷新的样式

binding.newsRv.setLoadingMoreProgressStyle(ProgressStyle.BallClipRotate); //设置上拉加载更多的样式

binding.newsRv.setArrowImageView(R.mipmap.pull_down_arrow);

binding.newsRv.setLoadingListener(this);

LinearLayoutManager layoutManager = new LinearLayoutManager(this);

binding.newsRv.setLayoutManager(layoutManager);

newsAdapter = new NewsAdapter(this);

binding.newsRv.setAdapter(newsAdapter);

}

@Override

public void onRefresh() {

//下拉刷新

newsVM.loadRefreshData();

}

@Override

public void onLoadMore() {

//上拉加载更多

newsVM.loadMoreData();

}

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

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

public class NewsModelImpl implements INewsModel {

private static final String TAG = "NewsModelImpl";

@Override

public void loadNewsData(final int page, final BaseLoadListener loadListener) {

HttpUtils.getNewsData()

.subscribeOn(Schedulers.io())

.observeOn(AndroidSchedulers.mainThread())

.subscribe(new DisposableObserver() {

@Override

public void onNext(@NonNull NewsBean newsBean) {

Log.i(TAG, "onNext: ");

loadListener.loadSuccess(simpleNewsBeanList);

}

@Override

public void onError(@NonNull Throwable throwable) {

Log.i(TAG, "onError: " + throwable.getMessage());

loadListener.loadFailure(throwable.getMessage());

}

@Override

public void onComplete() {

Log.i(TAG, "onComplete: ");

loadListener.loadComplete();

}

4.ViewModel

public class NewsVM implements BaseLoadListener {

private static final String TAG = "NewsVM";

private INewsModel mNewsModel;

private INewsView mNewsView;

private NewsAdapter mAdapter;

private int currPage = 1; //当前页数

private int loadType; //加载数据的类型

public NewsVM(INewsView mNewsView, NewsAdapter mAdapter) {

this.mNewsView = mNewsView;

this.mAdapter = mAdapter;

mNewsModel = new NewsModelImpl();

getNewsData();

}

/**

* 第一次获取新闻数据

private void getNewsData() {

loadType = MainConstant.LoadData.FIRST_LOAD;

mNewsModel.loadNewsData(currPage, this);

}

/**

* 获取下拉刷新的数据

public void loadRefreshData() {

loadType = MainConstant.LoadData.REFRESH;

currPage = 1;

mNewsModel.loadNewsData(currPage, this);

}

/**

* 获取上拉加载更多的数据

public void loadMoreData() {

loadType = MainConstant.LoadData.LOAD_MORE;

currPage++;

mNewsModel.loadNewsData(currPage, this);

}

@Override

public void loadSuccess(List list) {

if (currPage > 1) {

//上拉加载的数据

mAdapter.loadMoreData(list);

} else {

//第一次加载或者下拉刷新的数据

mAdapter.refreshData(list);

}

@Override

public void loadFailure(String message) {

// 加载失败后的提示

if (currPage > 1) {

//加载失败需要回到加载之前的页数

currPage--;

}

mNewsView.loadFailure(message);

}

@Override

public void loadStart() {

mNewsView.loadStart(loadType);

}

@Override

public void loadComplete() {

mNewsView.loadComplete();

}

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

5.Adapter

public class NewsAdapter extends BaseAdapter {

public NewsAdapter(Context context) {

super(context);

}

@Override

public BaseViewHolder onCreateVH(ViewGroup parent, int viewType) {

ViewDataBinding dataBinding = DataBindingUtil.inflate(inflater, R.layout.item_news, parent, false);

return new BaseViewHolder(dataBinding);

}

@Override

public void onBindVH(BaseViewHolder baseViewHolder, int position) {

ViewDataBinding binding = baseViewHolder.getBinding();

binding.setVariable(BR.simpleNewsBean, mList.get(position));

binding.setVariable(BR.position,position);

binding.setVariable(BR.adapter,this);

binding.executePendingBindings(); //防止闪烁

}

/**

* 点赞

* @param simpleNewsBean

* @param position

public void clickDianZan(SimpleNewsBean simpleNewsBean, int position) {

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的布局

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

name="simpleNewsBean"

type="com.zx.mvvmdemo.bean.SimpleNewsBean" />

name="adapter"

type="com.zx.mvvmdemo.adapter.NewsAdapter" />

name="position"

type="int" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="15dp">

android:id="@+id/header_iv"

android:layout_width="120dp"

android:layout_height="60dp"

app:imageUrl="@{simpleNewsBean.thumbnail}" />

android:id="@+id/title_tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="15dp"

android:layout_toEndOf="@id/header_iv"

android:text="@{simpleNewsBean.name}"

android:textColor="#000"

android:textSize="16sp" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignStart="@id/title_tv"

android:layout_below="@id/title_tv"

android:layout_marginTop="8dp"

android:text="@{simpleNewsBean.description}"

android:textSize="14sp" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentEnd="true"

android:layout_below="@id/header_iv"

android:layout_marginEnd="15dp"

android:layout_marginTop="8dp"

android:onClick="@{()->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来实现

android:id="@+id/header_iv"

android:layout_width="120dp"

android:layout_height="60dp"

app:imageUrl="@{simpleNewsBean.thumbnail}" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentEnd="true"

android:layout_below="@id/header_iv"

android:layout_marginEnd="15dp"

android:layout_marginTop="8dp"

android:onClick="@{()->adapter.clickDianZan(simpleNewsBean,position)}"