Android MVVM实战Demo完全解析

最新推荐文章于 2024-04-26 12:14:49 发布

陪你唠嗑

最新推荐文章于 2024-04-26 12:14:49 发布

阅读量4w

点赞数 19

分类专栏： Android 文章标签： android mvvm 框架结构

本文链接：https://blog.csdn.net/zhouxu88/article/details/78284198

版权

Android 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

DataBinding系列（一）：DataBinding初认识
 Android MVVM模式的理解

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

效果图

项目结构.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的布局很简单，就是一个列表

<?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"
    xmlns:tools="http://schemas.android.com/tools">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.jcodecraeer.xrecyclerview.XRecyclerView
            android:id="@+id/news_rv"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />


    </LinearLayout>
</layout>

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<SimpleNewsBean> loadListener) {
        HttpUtils.getNewsData()
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new DisposableObserver<NewsBean>() {
                    @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<SimpleNewsBean> {
    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<SimpleNewsBean> 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<SimpleNewsBean, BaseViewHolder> {

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

<?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="com.zx.mvvmdemo.R" />

        <variable
            name="simpleNewsBean"
            type="com.zx.mvvmdemo.bean.SimpleNewsBean" />

        <variable
            name="adapter"
            type="com.zx.mvvmdemo.adapter.NewsAdapter" />

        <variable
            name="position"
            type="int" />
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp">

        <ImageView
            android:id="@+id/header_iv"
            android:layout_width="120dp"
            android:layout_height="60dp"
            app:imageUrl="@{simpleNewsBean.thumbnail}" />

        <!--标题-->
        <TextView
            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" />

        <!--描述-->
        <TextView
            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" />

        <!--点赞或者取消点赞,onClick()用的lambda表达式-->
        <ImageView
            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 }" />

    </RelativeLayout>
</layout>

注意：

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

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

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

 <ImageView
            android:id="@+id/header_iv"
            android:layout_width="120dp"
            android:layout_height="60dp"
            app:imageUrl="@{simpleNewsBean.thumbnail}" />

 <!--点赞或者取消点赞,onClick()用的lambda表达式-->
        <ImageView
            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 }" />

public class ImageHelper {
    /**
     * mv_vm xml 传入url 加载图片
     * imageUrl 为xml中 的命名
     *
     * @param iv   imageView
     * @param url 图片路径
     */
    @BindingAdapter({"imageUrl"})
    public static void loadImage(ImageView iv, String url) {
        Glide.with(iv.getContext()).load(url).into(iv);
    }

    /**
     * mv_vm xml 设置 mipmap Resource
     *
     * @param iv    imageView
     * @param resId resource id
     */
    @BindingAdapter({"resId"})
    public static void loadMipmapResource(ImageView iv, int resId) {
        iv.setImageResource(resId);
    }
}

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

扫描下面二维码或者公众号搜索Android老鸟开发经验谈，即可关注【公众号】，持续推出优秀文章

个人公众号

陪你唠嗑

关注

19
点赞
踩
106

收藏

觉得还不错? 一键收藏
14
评论
Android MVVM实战Demo完全解析

在之前的文章中介绍了部分DataBinding框架的使用以及mvvm模式的理论，那今天就通过一个Demo来讲解一下mvvm在实战中的结构是怎么样的，以及它的具体使用，下面一起来看，关于DataBinding和mvvm，还是先贴一下学习地址。DataBinding系列（一）：DataBinding初认识 Android MVVM模式的理解在之前DataBinding的学习中，当然也包括网上大部分关于
复制链接

扫一扫