airbnb / epoxy

Epoxy is an Android library for building complex screens in a RecyclerView
https://goo.gl/eIK82p
Apache License 2.0
8.51k stars 728 forks source link

EpoxyModel has another Epoxy Recyclerview #1276

Open shahzadafridi opened 2 years ago

shahzadafridi commented 2 years ago

My requirements:

As you can see:

  1. Title
  2. Tabs
  3. Program Item (Image, Tags, Content Sections)

Below Layout is sperate layout which Tags and Content Section

Issue: Tags is scrollable and working when It's a single epoxy model not a carousel It's not working and scrollable when It's a carousel e-g

I am not sure what is missing..


//This is calling in epoxy controller.
private fun addCarouselProgramItemCardListToScreen(cellData: ProgramItemCardControl.CarouselCardList) {
        if (cellData.isNotEmptyList) {
            val items: MutableList<EpoxyModel<*>> = arrayListOf()
            cellData.list.forEach { data ->
                when (data) {
                    is ProgramItemCardControl.ProgramItem -> {
                        items.add(
                            ControlProgramItemEpoxyModel(data)
                                .id(data.id)
                        )
                    }
                }

            }
            CarouselModel_()
                .id("carousel_image_content_card_list")
                .models(items)
                .numViewsToShowOnScreen(1.5f)
                .addTo(this)
        }
    }
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card_program_item_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingHorizontal="16dp"
    android:paddingVertical="12dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/card_program_item_content_image">

    <com.ithra.revamp.ui.component.HorizontalCarousel
        android:id="@+id/control_program_item_content_tags_rv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/card_program_item_content_fav"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/card_program_item_content_fav"
        android:layout_width="34dp"
        android:layout_height="34dp"
        android:background="@drawable/circle_stroke"
        android:padding="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/icon_unfavorite" />

    <TextView
        android:id="@+id/control_program_item_content_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="9dp"
        android:text="The New Exploration Of The Red Sea"
        android:textAlignment="viewStart"
        android:textAppearance="@style/IthraNormal"
        android:textColor="@color/black"
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/control_program_item_content_tags_rv" />

    <TextView
        android:id="@+id/card_program_item_content_show_full"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_8"
        android:drawableStart="@drawable/ic_dropdown"
        android:drawablePadding="@dimen/dp_8"
        android:text="Show Full Coverage"
        android:textAppearance="@style/IthraNormal"
        android:textColor="@color/revamp_text_titles"
        android:textSize="@dimen/textSize12"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/card_program_item_content_more_info_rv" />

    <TextView
        android:id="@+id/control_program_item_content_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Details"
        android:textAlignment="viewStart"
        android:textAppearance="@style/IthraNormal"
        android:textColor="@color/black"
        android:textSize="12dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/card_program_item_content_show_full" />

    <RatingBar
        android:id="@+id/control_program_item_content_ratingbar"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:theme="@style/RatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="3"
        app:layout_constraintBottom_toBottomOf="@+id/control_program_item_content_detail"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/control_program_item_content_detail" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/rating_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:constraint_referenced_ids="control_program_item_content_detail, control_program_item_content_ratingbar" />

</androidx.constraintlayout.widget.ConstraintLayout>

ControlProgramItemEpoxyModel

data class ControlProgramItemEpoxyModel(
    val data: ProgramItemCardControl.ProgramItem
): ViewBindingKotlinModel<ControlProgramItemBinding>(R.layout.control_program_item) {

    override fun ControlProgramItemBinding.bind() {
        cardItemProgram.cardProgramItemContent.show()
        cardItemProgramExpanded.cardProgramItemContent.hide()
        cardProgramItemContentImage.load(data.image)
        cardItemProgram.controlProgramItemContentTitle.setTextVisible(data.title)
        cardItemProgram.controlProgramItemContentTagsRv.apply { onLoadTags(data.tags) }
        cardProgramItemItem.setMargin(right = 16.dp)
        cardItemProgram.controlProgramItemContentRatingbar.hide()
    }
}

ControlProgramItemTagEpoxyModel

data class ControlProgramItemTagEpoxyModel(
    val data: Tag,
    val onItemClicked: (Tag) -> Unit
): ViewBindingKotlinModel<ItemProgramTagBinding>(R.layout.item_program_tag) {

    override fun ItemProgramTagBinding.bind() {
        tag.text = data.title
    }
}

HorizontalCarousel.onLoadTags

private fun HorizontalCarousel.onLoadTags(tags: List<Tag>){
    val models = tags.mapIndexed { index, tag ->
        ControlProgramItemTagEpoxyModel(tag){

        }.id("program_item_tag_$index")
    }
    setModels(models)
}
image

Issue is with tags in below picture which is not scrollable as It's carousel inside carousel

image