How to handle space between items of a RecyclerCollectionComponent

Question

I have a RecyclerCollectionComponent where I am providing data using DataDiffSection. Now I want to have some margin (say x dp) for the first and last item and some margin among items (say y dp).

My onRender Looks like this:

@OnEvent(RenderEvent::class)
    fun onRender(
            c: ComponentContext,
            @FromEvent model: SomeObject): RenderInfo {

        return ComponentRenderInfo.create()
                .component(MyAwesomeCoomponent
                        .create(c)
                        .someParam(param)
                        .build())
                .build()
    }

This just creates a list of items placed side by side. If I include margin in this Component, it will give the same margin to all items, whereas I want (x dp) margins for the first and last item, and (y dp) margin among intermediate items.

Is there some way, I could get position of item in onRender event handler?

score 1 · Answer 1 · answered Apr 27 '18 at 10:59

You can wrap your DataDiffSection with a customized GroupSection that separates the header and footer components?

@GroupSectionSpec
public class YourGroupSectionSpec {
  @OnCreateChildren
  static Children onCreateChildren(SectionContext c) {
    return Children.create()
        .child(SingleComponentSection.create(c).component(header)...)
        .child(DataDiffSection.create(c)...)
        .child(SingleComponentSection.create(c).component(footer)...)
        .build();
  }
}

Now you can configure different margins to header / footer / body components.

How to handle space between items of a RecyclerCollectionComponent

1 Answers1