How to assign grid span in airbnb Epoxy?

Question

I've been starting learning how to use Epoxy in my project. I'm learning this library by running sample project. Everything was fine until I dig into the grid span settings. I found myself confused about its grid system.

As you can see in sample app the ViewHolders can be divided in 3 parts. Those parts can be represented particularly in models, such as HeaderViewModel_, ButtonBindingModel_ and CarouselModelGroup.

And the code of init RecyclerView is the following:

EpoxyRecyclerView recyclerView = (EpoxyRecyclerView) findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(new GridLayoutManager(this, 2));

According to offical doc:

If a GridLayoutManager is used this will automatically sync the span count with the EpoxyController.

I found HeaderViewModel_ and CarouselModelGroup is correctly sync the span, but ButtonBindingModel_ is not. I've been searching the word "span" or "grid" over the sample codes, I just couldn't figure out why ButtonBindingModel_ could have its span to be set as 1.

If I change the span setting of RecyclerView from 2 to 3:

EpoxyRecyclerView recyclerView = (EpoxyRecyclerView) findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(new GridLayoutManager(this, 3));

HeaderViewModel_ and CarouselModelGroup still remained to sync the full span, but the span of ButtonBindingModel_ is still 1.

I would like to know if there is an approach to make the span of ButtonBindingModel_ to full span, and method to set HeaderViewModel_ and CarouselModelGroup to specific span no matter by code (programmatically) or by layout. Please help me to figure out this problem, I appreciate it.

score 7 · Accepted Answer · edited Jan 04 '21 at 16:05

One thing we used was setting the span on a model basis using spanSizeOverride. We've got a few different models that we want at 2 vs 1 for the span so we set that override on them.

gridLayoutManager.spanSizeLookup = ourController.spanSizeLookup
...

collectionDescription {
  id(DESCRIPTION_ID)
  description(data.description ?: "")
  spanSizeOverride { _, _, _ -> 2 }
}
data.productTemplates?.forEachIndexed { index, product ->
  collectionProduct {
    id("$PRODUCT_ID ${product.slug} $index")
    product(product)
    listener(listener)
  }
}

How to assign grid span in airbnb Epoxy?

1 Answers1