在 RecyclerView 中按组划分元素

Question

我需要在具有标题的组中划分 RecyclerView 中的元素（如下图的收件箱应用程序中），因此请帮助我找出哪种方法更适合我的情况： 1）我可以使用异构布局，但在组中插入新元素不太方便（因为我需要检查是否已经添加了同一组的元素或者我需要添加新的分隔符）。所以在这种情况下，我会将所有具有这种数据结构的操作包装到一个单独的类中。

2) 理论上我可以用标签将每个组包装在自己的 RecyclerView 中，这是个好主意吗？

Answer 1

例如，您可以：

1. 使用TreeMap<Date,List<Event>> 按日期拆分元素。这将是一个用于保存您的业务对象的集合。当然，如果您已经有类似的结构，您可以保留它。有一些东西可以轻松构建项目列表以使用正确的元素顺序填充 UI，这一点很重要。

2. 为List 项目（例如ListItem）定义一个专用抽象类型来包装您的业务对象。它的实现可能是这样的：

   public abstract class ListItem {
   
       public static final int TYPE_HEADER = 0;
       public static final int TYPE_EVENT = 1;
   
       abstract public int getType();
   } 
   

3. 为您的每个 List 元素类型定义一个类（这里我只添加了两种类型，但您可以根据需要使用多种类型）：

   public class HeaderItem extends ListItem {
   
       private Date date;
   
       // here getters and setters 
       // for title and so on, built
       // using date
   
       @Override
       public int getType() {
           return TYPE_HEADER;
       }
   
   }
   
   public class EventItem extends ListItem {
   
       private Event event;
   
       // here getters and setters 
       // for title and so on, built 
       // using event
   
       @Override
       public int getType() {
           return TYPE_EVENT;
       }
   
   }
   

4. 如下创建一个列表（其中 mEventsMap 是在第 1 点构建的地图）：

   List<ListItem> mItems;
   // ...
   mItems = new ArrayList<>();
   for (Date date : mEventsMap.keySet()) {
       HeaderItem header = new HeaderItem();
       header.setDate(date); 
       mItems.add(header);
       for (Event event : mEventsMap.get(date)) {
           EventItem item = new EventItem();
           item.setEvent(event);
           mItems.add(item);
       }
   }
   

5. 为您的RecyclerView 定义一个适配器，处理在第 4 点定义的List。这里重要的是重写getItemViewType 方法，如下所示：

   @Override
   public int getItemViewType(int position) {
       return mItems.get(position).getType();
   }
   

   然后你需要有两个布局和 ViewHolder 用于标题和事件项。适配器方法应该相应地处理这个问题：

   @Override
   public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
       if (viewType == ListItem.TYPE_HEADER) {
           View itemView = mLayoutInflater.inflate(R.layout.view_list_item_header, parent, false);
           return new HeaderViewHolder(itemView);
       } else {
           View itemView = mLayoutInflater.inflate(R.layout.view_list_item_event, parent, false);
           return new EventViewHolder(itemView);
       }
   }
   
   
   @Override
   public void onBindViewHolder(final RecyclerView.ViewHolder viewHolder, final int position) {
       int type = getItemViewType(position);
       if (type == ListItem.TYPE_HEADER) {
           HeaderItem header = (HeaderItem) mItems.get(position);
           HeaderViewHolder holder = (HeaderViewHolder) viewHolder;
           // your logic here
       } else {            
           EventItem event = (EventItem) mItems.get(position);
           EventViewHolder holder = (EventViewHolder) viewHolder;
           // your logic here
       }
   }
   

Here 它是 GitHub 上的存储库，提供上述方法的实现。

Answer 2

您可以尝试使用我编写的库来解决我的项目中的这个问题。 Gradle 依赖（需要包含 jcenter 存储库）：

dependencies {
    //your other dependencies
    compile 'su.j2e:rv-joiner:1.0.3'//latest version by now
}

那么，在你的情况下，你可以这样做：

//init your RecyclerView as usual
RecyclerView rv = (RecyclerView) findViewById(R.id.rv);
rv.setLayoutManager(new LinearLayoutManager(this));

//construct a joiner
RvJoiner rvJoiner = new RvJoiner();
rvJoiner.add(new JoinableLayout(R.layout.today));
YourAdapter todayAdapter = new YourAdapter();
rvJoiner.add(new JoinableAdapter(todayAdapter));
rvJoiner.add(new JoinableLayout(R.layout.yesterday));
YourAdapter yesterdayAdapter = new YourAdapter();
rvJoiner.add(new JoinableAdapter(yesterdayAdapter));

//set join adapter to your RecyclerView
rv.setAdapter(rvJoiner.getAdapter());

当您需要添加项目时，将其添加到适当的适配器，例如：

if (timeIsToday) {
    todayAdapter.addItem(item);//or other func you've written
} else if (timeIsYesterday) {
    yesterdayAdapter.addItem(item);
}

如果需要动态添加新组到recycler view，可以使用以下方法：

rvJoiner.add(new JoinableLayout(R.layout.tomorrow));
YourAdapter tomorrowAdapter = new YourAdapter();
rvJoiner.add(new JoinableAdapter(tomorrowAdapter));

您可以查看this link 了解更多库描述。我不能说这肯定是实现目标的最佳方式，但它有时对我有帮助。

UPD：

我找到了不使用外部库的方法。使用RecyclerView.ItemDecoration 类。例如，要按组中的 3 个项目对项目进行分组，您可以这样做：

recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {

        private int textSize = 50;
        private int groupSpacing = 100;
        private int itemsInGroup = 3;

        private Paint paint = new Paint();
        {
            paint.setTextSize(textSize);
        }

        @Override
        public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
            for (int i = 0; i < parent.getChildCount(); i++) {
                View view = parent.getChildAt(i);
                int position = parent.getChildAdapterPosition(view);
                if (position % itemsInGroup == 0) {
                    c.drawText("Group " + (position / itemsInGroup + 1), view.getLeft(),
                            view.getTop() - groupSpacing / 2 + textSize / 3, paint);
                }
            }
        }

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            if (parent.getChildAdapterPosition(view) % itemsInGroup == 0) {
                outRect.set(0, groupSpacing, 0, 0);
            }
        }
    });

希望对你有帮助。

Answer 3

这个问题来自 2016 年，与此同时（2020 年）有不同的库可用于对回收站视图进行分组。最受欢迎的：

• Groupie
• Epoxy (airbnb)