Skip to content

Quick start with Composite Items

Vitaly Vivchar edited this page Jan 27, 2018 · 17 revisions

Step 1: Create the child_item_layout.xml:

<LinearLayout ... >
    <TextView android:id = "@+id/title" ... />
    <ImageView android:id = "@+id/image" ... />
    <Button android:id = "@+id/button" ... />
    <CustomView android:id = "@+id/custom" ... />
</LinearLayout>

Step 2: Add the ViewModel interface to your ChildItem

public class ChildItem implements ViewModel {
    String getTitile() { ... }
    int getTitleColor() { ... }
    Bitmap getImage() { ... }
}

Step 3: Create a ChildItemViewBinder:

private ViewRenderer getChildItemViewBinder() {
    return new ViewBinder<>(
        R.layout.child_item_layout,
        ChildItem.class,
        (model, finder, payloads) -> finder
                .setText(R.id.title, model.getTitle())
                .setTextColor(R.id.text, model.getTitleColor())
                .setImageBitmap(R.id.image, model.getImageBitmap())
                .setOnClickListener(R.id.button, new OnClickListener() {...})
                .find(R.id.custom, new ViewProvider<CustomView>() {...})
        );
}

Step 4: Create the parent_item_layout.xml:

<LinearLayout ... >
    <RecyclerView android:id = "@+id/recycler_view" ... />
</LinearLayout>

Step 5: Create the CompositeViewBinder:

private ViewRenderer getParentItemViewBinder() {
    return new CompositeViewBinder<>(
            R.layout.parent_item_layout,
            R.id.recycler_view,
            DefaultCompositeViewModel.class //imported from library
            //new ViewBinder.Binder(){...} //if you need bind something else
    );
}

NOTE: If you need Custom LayoutManager then you should extend CompositeViewBinder and override createLayoutManager method.

Step 6: Generate your items:

private List<DefaultCompositeViewModel> getParentItems() {
    ArrayList<DefaultCompositeViewModel> parents = new ArrayList();
    for (...) {
        ArrayList<ChildItem> children = new ArrayList();
        for () {
            children.add(new ChildItem(...));
        }
        parents.add(new DefaultCompositeViewModel(children));
    }
    return parents;
}

Step 7: Initialize RendererRecyclerViewAdapter and register renderer:

RendererRecyclerViewAdapter adapter = new RendererRecyclerViewAdapter(getContext());
adapter.registerRenderer(getParentItemViewBinder().registerRenderer(getChildItemViewBinder));
adapter.setItems(getParentItems());

The Old way using CompositeViewRenderer:

Step 1: Use the DefaultCompositeModel or the CompositeItemModel

public class RecyclerViewModel extends DefaultCompositeItemModel {

    public RecyclerViewModel(List<ItemModel> items) {
        super(items);
    }
}

Step 2: Extend the CompositeViewHolder class

public class RecyclerViewHolder extends CompositeViewHolder {

    public RecyclerViewHolder(View view) {
        super(view);
        recyclerView = (RecyclerView) view.findViewById(R.id.recycler_view);
}
}

Step 3: Implement the CompositeViewRenderer class

public class RecyclerViewRenderer extends CompositeViewRenderer<RecyclerViewModel, RecyclerViewHolder> {

    public RecyclerViewRenderer(Context context) {
        super(RecyclerViewModel.class, context);
    }

    @Override
    public RecyclerViewHolder createCompositeViewHolder(ViewGroup parent) {
        return new RecyclerViewHolder(inflate(R.layout.item_recycler_view, parent));
    }
}

Step 4: Create an instance of your RecyclerViewRenderer

CompositeViewRenderer compositeRenderer = new RecyclerViewRenderer(this);

Step 5: Determine which cells it will support

compositeRenderer.registerRenderer(simpleRenderer);
compositeRenderer.registerRenderer(simpleRenderer2);

Step 6: Register your CompositeViewRenderer in main adapter

mRecyclerViewAdapter = new RendererRecyclerViewAdapter();
mRecyclerViewAdapter.registerRenderer(compositeRenderer);