Sections and Views

Sections work best when combined with the rendering optimizations that Litho Components offer. However, the API also provides support for rendering with Views instead of Components. This makes the transition to Sections easier and you can still take advantage of the performance benefits regardless of your product's UI using traditional Views, Litho Components or a mix of the two.

View support is only offered by DataDiffSection at the moment. Let's have another look at the DataDiffSection example to recap how you declare what the framework should render for a certain item.

@GroupSectionSpec
class MyGroupSectionSpec {

  @OnCreateChildren
  static Children onCreateChildren(
      SectionContext c,
      @Prop ImmutableList<MyModel> dataModel) {
      return Children.create()
          .child(DataDiffSection.create(c)
              .data(dataModel)
              .renderEventHandler(MyGroupSection.onRenderEvent(c)))
          .build();
  }

  @OnEvent(RenderEvent.class)
  static RenderInfo onRenderEvent(
      SectionContext c,
      @FromEvent MyModel model) {
      return ComponentRenderInfo.create()
          .component(MyModelItemComponent.create(c).item(model).build())
          .build();
  }
}

When an item needs to be rendered on screen, the framework dispatches a RenderEvent and it calls the event handler passed as prop to the DataDiffSection to create a RenderInfo for that item. RenderInfo holds information that allows the framework to understand how a certain item should be rendered.

RenderInfo has two implementations: ComponentRenderInfo and ViewRenderInfo.

We've seen in the previous example how to use ComponentRenderInfo to declare how an item should be rendered using Litho Components. If you want to render items with Views instead, all you have to do is return a ViewRenderInfo instance from the RenderEvent handler.

@GroupSectionSpec
class MyGroupSectionSpec {

  private static ViewCreator VIEW_CREATOR =  
      new ViewCreator<MyView>() {
          @Override
          public MyView createView(Context c, ViewGroup parent) {
              // this call is equivalent to onCreateViewHolder()
              return new MyView(c);
          }
      };

  @OnCreateChildren
  static Children onCreateChildren(
      SectionContext c,
      @Prop ImmutableList<MyModel> dataModel) {
      return Children.create()
          .child(DataDiffSection.create(c)
              .data(dataModel)
              .renderEventHandler(MyGroupSection.onRenderEvent(c)))
          .build();
  }

  @OnEvent(RenderEvent.class)
  static RenderInfo onRenderEvent(
      SectionContext c,
      @FromEvent MyModel model,
      @FromEvent int index) {
      return ViewRenderInfo.create(c)
          .viewCreator(VIEW_CREATOR)
          .viewBinder(
              new SimpleViewBinder<MyView>() {
                  @Override
                  public void bind(MyView view) {
                    // this call is equivalent to onBindViewHolder()
                  }
              })
          .build();
  }
}

ViewRenderInfo has two mandatory props that need to be passed to it: a ViewCreator and a ViewBinder.

ViewCreator and ViewBinder are the logical equivalent of onCreateViewHolder and onBindViewHolder methods of the RecyclerView.Adapter.

Views created by the same ViewCreator instance will be recycled in the same pool in RecyclerView. You can create a static instance of ViewCreator for different view types which you will use in the sections and pass static instance to .viewCreator method to ensure efficient recycling. You can use the model or the index to decide amongst multiple view types and return the appropriate ViewCreator instance.

The framework provides a no-op implementation of ViewBinder, called SimpleViewBinder, that you can use if only need to implement one of the ViewBinder methods, typically bind(View).

Mixing Components and Views

If your Section needs to render items partly with Litho Components, partly with Views, you can do that by returning the appropriate RenderInfo implementation from the RenderEvent handler. Here's how you could do that:

@GroupSectionSpec
class MyGroupSectionSpec {

  private static ViewCreator VIEW_CREATOR =  
      new ViewCreator<MyView>() {
          @Override
          public MyView createView(Context c, ViewGroup parent) {
              // this call is equivalent to onCreateViewHolder()
              return new MyView(c);
          }
      };

  @OnCreateChildren
  static Children onCreateChildren(
      SectionContext c,
      @Prop ImmutableList<MyModel> dataModel) {
      return Children.create()
          .child(DataDiffSection.create(c)
              .data(dataModel)
              .renderEventHandler(MyGroupSection.onRenderEvent(c)))
          .build();
  }

  @OnEvent(RenderEvent.class)
  static RenderInfo onRenderEvent(
      SectionContext c,
      @FromEvent MyModel model) {
      if (model.canRenderWithComponent()) {
        return ComponentRenderInfo.create()
            .component(MyModelItemComponent.create(c).item(model).build())
            .build();
      }

      return ViewRenderInfo.create(c)
               .viewCreator(VIEW_CREATOR)
               .viewBinder(
                   new SimpleViewBinder<MyView>() {
                       @Override
                       public void bind(MyView view) {
                         // this call is equivalent to onBindViewHolder()
                       }
                   })
               .build();
  }
}

Mixing Components and Views#

Mixing Components and Views