2D scrollable list/panning functionality using litho?

Question

I was wondering if we can create a 2D scrollable list using litho? I tried nested RecyclerCollectionComponents but it makes the columns scroll individually, not the panning functionality I want. I also tried GridRecyclerConfiguration but it scrolls vertically only. I also want control over the number of items in each column and the height of each item. Any pointers on how to achieve this would be appreciated.

What I tried:

 final Component component =
                RecyclerCollectionComponent.create(context)
                        .disablePTR(true)
                        .section(ListSection.create(new SectionContext(context)).build())
                        .recyclerConfiguration(new ListRecyclerConfiguration(
                                LinearLayoutManager.HORIZONTAL, false ))
                                .build();

        return LithoView.create(context, component);

RecyclerView component

@LayoutSpec
public class RecyclerViewSpec {

    @OnCreateLayout
    static Component onCreateLayout(
            final ComponentContext c) {
        return RecyclerCollectionComponent.create(c)
                .section(ListSection.create(new SectionContext(c)).build())
                .build();
    }
}

Sections for above RecyclerView which contains nested RecyclerViews

@GroupSectionSpec
public class ListSectionSpec {

    private static List<Integer> generateData(int count) {
        final List<Integer> data = new ArrayList<>(count);
        for (int i = 0; i < count; i++) {
            data.add(i);
        }
        return data;
    }

    @OnEvent(RenderEvent.class)
    static RenderInfo onRender(final SectionContext c, @FromEvent Integer model) {
        return ComponentRenderInfo.create()
                .component(
                        ListItem.create(c)
                                .color(model % 2 == 0 ? Color.WHITE : Color.LTGRAY)
                                .title(model + ". Hello, world!")
                                .subtitle("Litho tutorial")
                                .build())
                .build();
    }

    @OnCreateChildren
    static Children onCreateChildren(final SectionContext c) {
        Children.Builder builder = Children.create();

        for (int i = 0; i < 32; i++) {
            builder.child(
                    SingleComponentSection.create(c)
                            .key(String.valueOf(i))
                            .component(RecyclerCollectionComponent.create(c)
                                    .disablePTR(true)
                                    .section(
                                            DataDiffSection.<Integer>create(c)
                                                    .data(generateData(32))
                                                    .renderEventHandler(ListSection.onRender(c))
                                                    .build())
                                    .canMeasureRecycler(true)));
        }

        return builder.build();
    }
}

Individual list items

@LayoutSpec
public class ListItemSpec {

    @OnCreateLayout
    static Component onCreateLayout(
            ComponentContext c,
            @Prop int color,
            @Prop String title,
            @Prop String subtitle) {

        return Column.create(c)
                .paddingDip(ALL, 16)
                .backgroundColor(color)
                .child(
                        Text.create(c)
                                .text(title)
                                .textSizeSp(40))
                .child(
                        Text.create(c)
                                .text(subtitle)
                                .textSizeSp(20))
                .build();
    }
}

This creates a list which scrolls horizontally, while the individual columns scroll vertically. I want one surface which we can pan in any direction.

Answer 1

If you can figure out how to do this in standard android, then you can use the same principles to make it work in Litho (e.g. use the same LayoutManager you'd use in standard android). AFAIK, this isn't super easy to do in standard android though.