How to implement part of sections with LinearLayoutManager and part with GridLayoutManager?

Question

I have many different types of views in recycler spec.

@LayoutSpec
object AdPageSpec {
    @OnCreateLayout
    fun onCreateLayout(c: ComponentContext, @Prop model: List<AdPageItem>): ComponentLayout {
        return RecyclerCollectionComponent.create(c)
                .disablePTR(true)
                .section(
                        DataDiffSection.create<AdPageItem>(SectionContext(c))
                                .data(model)
                                .renderEventHandler(AdPage.onRender(c))
                                .build()
                )
                .buildWithLayout()
    }

    @OnEvent(RenderEvent::class)
    fun onRender(c: ComponentContext, @FromEvent model: AdPageItem): RenderInfo {
        when (model) {
            is TopDetailsItem -> ...
            is DescrItem -> ...
            is ParamItem -> ...
            is GridItem -> ...
        }

Everything works fine but at some point I need items to be laid in GridLayoutManager fashion.

Does anybody knows how to achieve this with litho?

score 0 · Accepted Answer · answered Feb 13 '18 at 09:38

The current 0.11.1-SNAPSHOT version of litho supports StaggeredGridRecyclerConfiguration which allows building such UI. Basically, we need to instantiate RecyclerCollectionComponent

RecyclerCollectionComponent.create(c)
                .recyclerConfiguration(
                        StaggeredGridRecyclerConfiguration<SectionBinderTarget>(3)
                )
                .section(...)
                .build()

And if we want an item to occupy full span we need to set isFullSpan when creating render info:

 @OnEvent(RenderEvent::class)
    fun onRender(c: SectionContext,
    ): RenderInfo {
        return when (model) {
            is ImagesItem -> ComponentRenderInfo.create()
                        .isFullSpan(true)
                        .component(...)
                        .build()
    }

Note that ViewRenderInfo is not supported yet, therefore you have to create your own MountSpecs for each custom view. But you can vote for this issue here

How to implement part of sections with LinearLayoutManager and part with GridLayoutManager?

1 Answers1