使用 RecyclerView 跨越多列

Question

So what I am trying to go for is having a staggered layout but the first item in the list needs to span two columns. The first two rows are also a fixed height. I have everything working except the first item spanning two columns.

I am using the RecyclerView.Adapter with the StaggeredGridLayoutManager. Doesn't seem like it is out of the box functionality. I assume I can make a custom layout manager I'm just not sure where to start. I have tried searching but I can't find anything about how to get items to span multiple columns.

The image below is what what I am looking for in the list.

Answer 1

Currently, StaggeredGridLayoutManager only supports views that span all the columns (for a vertically configured layout), and not an arbitrary number of them.

If you still want to span them across all the columns, you should do this in the adapter implementation:

public final void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {

    StaggeredGridLayoutManager.LayoutParams layoutParams = (StaggeredGridLayoutManager.LayoutParams) viewHolder.itemView.getLayoutParams();
    layoutParams.setFullSpan(true);
}

IMHO, StaggeredGridLayoutManager is still under heavy development and Google wants us to use it for feedback :(

Answer 2

What I did to span all columns for a vertically configured layout was create new LayoutParams and set full span to true in the adapter implementation:

@Override
public void onBindViewHolder(final RecyclerView.ViewHolder viewHolder, int position) {

    StaggeredGridLayoutManager.LayoutParams layoutParams = new StaggeredGridLayoutManager.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    layoutParams.setFullSpan(true);
    viewHolder.itemView.setLayoutParams(layoutParams);
}

Answer 3

The solution proposed by ljmelgui works fine but can be mixed with mato answer for a minor optimization by trying to reuse the layoutParams in case they exist:

public final void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {

    StaggeredGridLayoutManager.LayoutParams layoutParams = (StaggeredGridLayoutManager.LayoutParams) viewHolder.itemView.getLayoutParams();
    if ( layoutParams == null ) {
          layoutParams = new StaggeredGridLayoutManager.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    }
    layoutParams.setFullSpan(true);
    viewHolder.itemView.setLayoutParams(layoutParams);
}