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.
