Android MVVM框架搭建（四）RecyclerVIew + ViewPager2 + BaseQuickAdapter

然后进入到MainViewModel中，在里面增加如下代码：

public LiveData wallPaper;

public void getWallPaper() { wallPaper = new MainRepository().getWallPaper(); }

现在访问接口数据这一块就搞定了，下面就是显示出来就可以了。

四、RecyclerView显示数据

---

因为返回的数据比较多，因此通过RecyclerView来进行显示，作为壁纸显示可以通过更改布局管理器，把列表变成纵向两列的形式去显示，首先我们先修改activity_main.xml的布局代码，如下图所示

这里我去掉了页面的居中布局，然后增加了一个RecyclerView，添加了一个id，同事改了一下CustomImageView的scaleType=“fitXY”，这样可以让我们的壁纸完整呈现出来。

这里我需要修改一下CustomImageView类的代码：

其实就是改它所继承的父类，为什么要这么改呢？现在就来说明一下。下面我们写一个列表适配器的item布局，在layout下新建一个item_wall_paper.xml文件，里面的代码我们先不写，先去写一个样式，在themes.xml文件中（老版本的AS中是styles.xml），增加如下样式代码：

这里是设置一个圆角图片的样式代码，那么怎么去使用它呢，下面我们修改一下item_wall_paper.xml，代码如下：

<?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”>

<variable

name=“wallPaper”

type=“com.llw.mvvm.model.WallPaperResponse.ResBean.VerticalBean” />

<LinearLayout

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:orientation=“vertical”>

<com.llw.mvvm.view.CustomImageView

networkUrl=“@{wallPaper.img}”

android:layout_width=“match_parent”

android:layout_height=“300dp”

android:layout_margin=“5dp”

android:scaleType=“centerCrop”

app:shapeAppearanceOverlay=“@style/roundedImageStyle” />

这里依然是使用DataBinding，因为我们数据是要显示在列表上的，因此直接绑定item就可以了，然后这里我用的是networkUrl的属性，因为你如果使用了biyingUrl会添加一个前缀，而这个API不需要前缀，同时我把刚才写的样式设置了进来，这里就解释了为什么要更改继承的父类，因为之前的那个父类没有这个属性值，这个属性值可以让你的Image图片做很多的形状上的变化，相当Nice! 这样就不用再去导入其他的依赖库或者使用自定义View了，这得力于Material，关于ShapeableImageView更多的介绍可以看一下这一篇文章：Android Material UI控件之ShapeableImageView，如果你感兴趣的话。

好了回到正题，那就是我们现在布局都已经写好了，下面写一个适配器，在com.llw.mvvm包下新建一个adapter包，adapter包下新建一个WallPaperAdapter类，里面的代码如下：

public class WallPaperAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

/**

• 传递过来的数据

*/

private final List<WallPaperResponse.ResBean.VerticalBean> verticalBeans;

public WallPaperAdapter(List<WallPaperResponse.ResBean.VerticalBean> verticalBeans) {

this.verticalBeans = verticalBeans;

}

@NonNull

@NotNull

@Override

public RecyclerView.ViewHolder onCreateViewHolder(@NonNull @NotNull ViewGroup parent, int viewType) {

ItemWallPaperBinding binding = DataBindingUtil.inflate(LayoutInflater.from(parent.getContext()), R.layout.item_wall_paper, parent, false);

return new ViewHolderWallPaper(binding);

}

@Override

public void onBindViewHolder(@NonNull @NotNull RecyclerView.ViewHolder holder, int position) {

ItemWallPaperBinding binding = ((ViewHolderWallPaper) holder).getBinding();

binding.setWallPaper(verticalBeans.get(position));

binding.executePendingBindings();

}

@Override

public int getItemCount() {

return verticalBeans.size();

}

private static class ViewHolderWallPaper extends RecyclerView.ViewHolder {

private ItemWallPaperBinding binding;

public ItemWallPaperBinding getBinding() {

return binding;

}

public void setBinding(ItemWallPaperBinding binding) {

this.binding = binding;

}

public ViewHolderWallPaper(ItemWallPaperBinding inflate) {

super(inflate.getRoot());

this.binding = inflate;

}

}

}

这就是RecyclerView.Adapter的常规使用而已，很简单，其中要注意的就是DataBinding的使用，这个很关键了，它决定了你的数据与xml绑定。下面我们回到MainActivity中，首先增加一个initView()方法，里面的代码如下：

/**

• 初始化

*/

private void initView() {

GridLayoutManager manager = new GridLayoutManager(this, 2);

dataBinding.rv.setLayoutManager(manager);

}

然后在onCreate方法中调用它并且实现数据更新的回调监听。

initView();

//热门壁纸 网络请求

mainViewModel.getWallPaper();

mainViewModel.wallPaper.observe(this, wallPaperResponse -> dataBinding.rv.setAdapter(new WallPaperAdapter(wallPaperResponse.getRes().getVertical())));

下面我们可以开始运行了，效果图如下：

由于这个平台的限制，所以这个动图是标清，建议读者可以直接安装APK去体验，这样会更舒服一些。这个图片展示的效果就很不错，现在我们已经掌握了怎么在MVVM中使用RecyclerView。

五、绑定点击事件

---

当我们需要点击查看图片的时候，就需要先绑定点击事件，然后查看图片，在适配器WallPaperAdapter中增加一个ClickBinding内部类，里面的代码如下：

public static class ClickBinding {

public void itemClick(WallPaperResponse.ResBean.VerticalBean verticalBean, View view) {

Intent intent = new Intent(view.getContext(), PictureViewActivity.class);

intent.putExtra(“img”, verticalB