[Android] 实现带日期分组的相册展示（ RecyclerView 多布局实现 )

[ Android ] 实现带日期分组的相册展示（ RecyclerView 多布局实现 )

• 工作上遇到有这样一个需求，要求列表展示图片的样式由普通的 ListView 的展示方式改成带日期分组的展示方式，类似于大部分手机自带的相册展示效果。下图是 demo 的效果图。

• 说明实现方法之前，有必要了解一下 RecyclerView 的基本用法。
• 这篇博客内容主要是实现展示效果，关于如何获取图片数据、如何获取图片时间等其他方面需要自行解决。

一、实现方法

1. 先写一个普通的 RecyclerView

• 如果没接触过的话可以参考我的另一篇文章ListView 和 RecyclerView 的简单使用

2. 存放数据

• 根据咱们平时写 RecyclerView 的经验，一般需要向 Adapter 传入一个需要展示的数据的 List ，这个List 的泛型则根据业务需求（展示的图片需要附带的信息）来决定。
• 这里为了尽量减少其他因素的干扰，所以我这里并不打算将图片和相关信息封装成一个 bean ，而是直接将图片放在项目文件夹中，只传入图片 id 即可。

   //这里的泛型使用Object是为了同时存放日期和图片
   List<Object> list = new ArrayList<>();
   //先存放一个日期
   list.add("2020-03-14");
   //然后存在几张图片
   for(int i = 0;i < 5;i++) {
      list.add(R.drawable.pic);
   }
   //重复以上流程多次，模拟多个日期多张图片的效果
   ...

3. 复写 getItemViewType 方法

• getItemViewType() 方法在平常 RecyclerView 的使用中好像很少用到，但是在实现这种多布局的场景下是必须要用到的，并且也是最重要的一环。

• 由于我们刚才存放数据的时候存放了两种不同的数据，一种是 String 类型的日期，另一种是 int 型的图片 id ，所以我们在 getItemViewType() 方法就可以以这两种数据类型来区分需要返回哪一种类型，后续会根据这里返回的类型去决定显示哪一种 View （在这里就是决定显示日期还是显示图片 ）。

   @Override
    public int getItemViewType(int position) {
        //return 的是一个标识，由自己定义一个不重复的数字即可
        if (mList.get(position) instanceof String) {
            return DATE;
        } else {
            return PHOTO;
        }
    }

4. 编写需要用到的 ViewHolder

• 因为咱们既要显示日期，又要显示图片，显然一个布局是不够用了。所以需要两个不同的 item 的布局，自然也需要两个不同的 ViewHolder。

    class DateHolder extends RecyclerView.ViewHolder{
        TextView textView;
        public DateHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.date);
        }
    }

    class PhotoHolder extends RecyclerView.ViewHolder{
        ImageView imageView;
        public PhotoHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.image);
        }
    }

• 下面是日期的 item 布局和图片的 item 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

5. 对 onCreatViewHolder 方法和 onBindViewHolder 方法进行改动

• 首先改动 onCreatViewHolder 方法，根据方法传入的 viewType ，来判断当前项应该返回哪一个布局。

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;
        if (viewType == DATE) {
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.date_item,parent,false);
            return new DateHolder(view);
        } else {
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.photo_item,parent,false);
            return new PhotoHolder(view);
        }
    }

• 接下来改写 onBindViewHolder 方法，也是根据传入的 viewHolder 类型不同进行不同的处理。

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof DateHolder) {
            ((DateHolder) holder).textView.setText((String)mList.get(position));
        } else if (holder instanceof PhotoHolder) {
            ((PhotoHolder) holder).imageView.setImageResource((int)mList.get(position));
        }
    }

6. 对 RecyclerView 布局设置

• 由于要实现是效果是类似与手机相册的布局，所以 RecyclerView 选择使用 GridLayoutManager 布局。

    GridLayoutManager gridLayoutManager = new GridLayoutManager(this,5);
    mRecyclerView.setLayoutManager(gridLayoutManager);

• 写到这里我们先来看看效果

• 这个日期怎么和图片鬼混在一起了，我们需要解决一下它。在 Adapter 中复写 onAttachedToRecyclerView 方法，当遇到日期项时，让它独占一整行即可。

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);
        RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
        if(manager instanceof GridLayoutManager) {
            final GridLayoutManager gridManager = ((GridLayoutManager) manager);
            gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
                @Override
                public int getSpanSize(int position) {
                    return getItemViewType(position) == DATE
                            ? gridManager.getSpanCount() : 1;
                }
            });
        }
    }

二、 最终效果

三、 总结

• demo 的 GitHub 地址：https://github.com/iizhengzh/MyAdapter

• 关于 RecyclerView 的了解比较少，平时都是用最基本的功能，没有对它有更深的了解。经过这一次的使用也算多了一点点认识。今后有时间还要多去学习这些优秀的控件的使用和原理。