From 1a956023493504fe98826b89db2a757f1ba1bbe6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20Mart=C3=ADn?= Date: Mon, 18 Sep 2023 13:01:36 +0200 Subject: [PATCH] ANDROID-11784 Fix Carousel component legacy implementation (#301) --- .../ui/classic/components/CarouselFragment.kt | 59 +++++++++---------- .../res/drawable-v24/ic_mistica_logo_text.xml | 59 +++++++++++++++++++ .../res/drawable/ic_mistica_logo_text.xml | 11 ---- .../res/layout/carousel_fragment_catalog.xml | 35 ++++++----- .../com/telefonica/mistica/card/CardView.kt | 4 +- .../mistica/card/mediacard/MediaCardView.kt | 9 ++- .../mistica/carousel/CarouselView.kt | 37 +++++++++++- .../com/telefonica/mistica/carousel/README.md | 7 ++- 8 files changed, 155 insertions(+), 66 deletions(-) create mode 100644 catalog/src/main/res/drawable-v24/ic_mistica_logo_text.xml diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CarouselFragment.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CarouselFragment.kt index 31261f01d..db1697d9e 100644 --- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CarouselFragment.kt +++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CarouselFragment.kt @@ -4,22 +4,13 @@ import android.os.Bundle import android.view.LayoutInflater import android.view.View import android.view.ViewGroup -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.dp +import android.widget.Toast import androidx.fragment.app.Fragment -import com.google.accompanist.pager.ExperimentalPagerApi import com.google.accompanist.pager.PagerState +import com.telefonica.mistica.card.mediacard.MediaCardView import com.telefonica.mistica.catalog.R.drawable.card_image_sample import com.telefonica.mistica.catalog.databinding.CarouselFragmentCatalogBinding -import com.telefonica.mistica.compose.card.Action -import com.telefonica.mistica.compose.card.mediacard.MediaCard -import com.telefonica.mistica.compose.card.mediacard.MediaCardImage import com.telefonica.mistica.compose.carousel.CarouselState -import com.telefonica.mistica.compose.tag.Tag -import com.telefonica.mistica.tag.TagView.Companion.TYPE_PROMO class CarouselFragment : Fragment() { @@ -35,35 +26,41 @@ class CarouselFragment : Fragment() { return binding.root } - @OptIn(ExperimentalPagerApi::class) override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) val carouselState = CarouselState(PagerState(0)) - val pages = 6 binding.carouselView - .setContent { page -> CarouselItem(page) } + .setContent(getMediaCardsForCarousel()) .setState(carouselState) - .setItemCount(pages) + .setItemCount(MEDIA_CARDS_CAROUSEL_SIZE) binding.carouselPageIndicatorView .setState(carouselState) - .setPageCount(pages) + .setPageCount(MEDIA_CARDS_CAROUSEL_SIZE) + } + + private fun getMediaCardsForCarousel(): List { + val mediaCards = mutableListOf() + for (i in 1..MEDIA_CARDS_CAROUSEL_SIZE) { + mediaCards.add(MediaCardView(requireContext()).apply { + setTag("HEADLINE") + setCardImage(card_image_sample) + setTitle("Page$i") + setSubtitleText("(position ${i - 1})") + setDescription("Description") + setPrimaryButtonText("Primary") + setLinkButtonText("Link") + setPrimaryButtonOnClick { Toast.makeText(requireContext(), "primaryButton$i", Toast.LENGTH_SHORT).show() } + setLinkButtonOnClick { Toast.makeText(requireContext(), "linkButton$i", Toast.LENGTH_SHORT).show() } + setCardAdditionalContent(null) + }) + } + return mediaCards + } + + private companion object { + const val MEDIA_CARDS_CAROUSEL_SIZE = 6 } -} -@Composable -private fun CarouselItem(page: Int) { - MediaCard( - modifier = Modifier - .height(500.dp) - .fillMaxWidth(), - image = MediaCardImage.MediaCardImageResource(card_image_sample), - tag = Tag("HEADLINE").withStyle(TYPE_PROMO), - title = "Page ${page + 1} ", - subtitle = "(position ${page})", - description = "Description", - primaryButton = Action("Primary") {}, - linkButton = Action("Link") {} - ) } diff --git a/catalog/src/main/res/drawable-v24/ic_mistica_logo_text.xml b/catalog/src/main/res/drawable-v24/ic_mistica_logo_text.xml new file mode 100644 index 000000000..793053fd7 --- /dev/null +++ b/catalog/src/main/res/drawable-v24/ic_mistica_logo_text.xml @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/catalog/src/main/res/drawable/ic_mistica_logo_text.xml b/catalog/src/main/res/drawable/ic_mistica_logo_text.xml index 1562a6d1f..740e96cf3 100644 --- a/catalog/src/main/res/drawable/ic_mistica_logo_text.xml +++ b/catalog/src/main/res/drawable/ic_mistica_logo_text.xml @@ -19,17 +19,6 @@ - - - - - - - - - - + android:paddingBottom="40dp" + > + + + + - \ No newline at end of file + + \ No newline at end of file diff --git a/library/src/main/java/com/telefonica/mistica/card/CardView.kt b/library/src/main/java/com/telefonica/mistica/card/CardView.kt index 4a363a38a..9739c2b85 100644 --- a/library/src/main/java/com/telefonica/mistica/card/CardView.kt +++ b/library/src/main/java/com/telefonica/mistica/card/CardView.kt @@ -73,7 +73,7 @@ import com.telefonica.mistica.util.getDimension abstract class CardView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, - defStyleAttr: Int = 0 + defStyleAttr: Int = 0, ) : CardView(context, attrs, defStyleAttr) { private val cardContentView: CardContentView @@ -121,7 +121,7 @@ abstract class CardView @JvmOverloads constructor( protected abstract fun handleAttrsAndInflateLayout( attrs: AttributeSet? = null, defStyleAttr: Int = 0, - defStyleRes: Int = 0 + defStyleRes: Int = 0, ): View fun setTag(text: CharSequence?) { diff --git a/library/src/main/java/com/telefonica/mistica/card/mediacard/MediaCardView.kt b/library/src/main/java/com/telefonica/mistica/card/mediacard/MediaCardView.kt index 6bcedefba..a84b06b3d 100644 --- a/library/src/main/java/com/telefonica/mistica/card/mediacard/MediaCardView.kt +++ b/library/src/main/java/com/telefonica/mistica/card/mediacard/MediaCardView.kt @@ -18,7 +18,6 @@ import com.telefonica.mistica.card.CardView import com.telefonica.mistica.util.hide import com.telefonica.mistica.util.show - @BindingMethods( BindingMethod( type = MediaCardView::class, @@ -39,7 +38,7 @@ import com.telefonica.mistica.util.show class MediaCardView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, - defStyleAttr: Int = 0 + defStyleAttr: Int = 0, ) : CardView(context, attrs, defStyleAttr) { private lateinit var cardImageView: ImageView @@ -48,7 +47,7 @@ class MediaCardView @JvmOverloads constructor( override fun handleAttrsAndInflateLayout( attrs: AttributeSet?, defStyleAttr: Int, - defStyleRes: Int + defStyleRes: Int, ): View { val rootView = LayoutInflater.from(context).inflate(R.layout.media_card_view, this, true) @@ -74,6 +73,10 @@ class MediaCardView @JvmOverloads constructor( return rootView } + fun setSubtitleText(subtitle: String) { + setSubtitle(subtitle) + } + fun getCardImageView(): ImageView = cardImageView fun setCardImage(@DrawableRes imageRes: Int) { diff --git a/library/src/main/java/com/telefonica/mistica/carousel/CarouselView.kt b/library/src/main/java/com/telefonica/mistica/carousel/CarouselView.kt index 5f9d7077b..9154295bf 100644 --- a/library/src/main/java/com/telefonica/mistica/carousel/CarouselView.kt +++ b/library/src/main/java/com/telefonica/mistica/carousel/CarouselView.kt @@ -2,7 +2,11 @@ package com.telefonica.mistica.carousel import android.content.Context import android.util.AttributeSet +import android.view.View +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.viewinterop.AndroidView import com.telefonica.mistica.compose.carousel.Carousel import com.telefonica.mistica.compose.carousel.CarouselState import com.telefonica.mistica.compose.composeview.AbstractMisticaComposeView @@ -18,8 +22,14 @@ class CarouselView @JvmOverloads constructor( ) { private lateinit var carouselState: CarouselState + private var itemCount: Int = 0 - private lateinit var body: @Composable (Int) -> Unit + + /**If composable is set it will render it by default*/ + private var body: (@Composable (Int) -> Unit)? = null + + /**If the default body composable body is null a list of View elements will be rendered*/ + private var data: List? = null fun setState(carouselState: CarouselState): CarouselView = this.apply { this.carouselState = carouselState @@ -29,6 +39,17 @@ class CarouselView @JvmOverloads constructor( this.itemCount = itemCount } + /**A list of views to be rendered in each page of the carousel. + * If a composable has been set it will render it by default + * @param pages: List of views to be rendered in each page of the carousel + */ + fun setContent(pages: List): CarouselView = this.apply { + data = pages + } + + /**If a composable is set it will render it by default + * @param body: Composable that will be rendered in the carousel + */ fun setContent(body: @Composable (Int) -> Unit): CarouselView = this.apply { this.body = body } @@ -39,10 +60,20 @@ class CarouselView @JvmOverloads constructor( Carousel( itemCount = itemCount, carouselState = carouselState, - ) { - body(it) + ) { position -> + body?.let { it(position) } ?: data?.get(position)?.let { CarouselItem(it) } } } } +} + +@Composable +private fun CarouselItem(view: View) { + AndroidView( + modifier = Modifier.fillMaxSize(), + factory = { context -> + view + } + ) } \ No newline at end of file diff --git a/library/src/main/java/com/telefonica/mistica/carousel/README.md b/library/src/main/java/com/telefonica/mistica/carousel/README.md index c19195d3a..f638bf43b 100644 --- a/library/src/main/java/com/telefonica/mistica/carousel/README.md +++ b/library/src/main/java/com/telefonica/mistica/carousel/README.md @@ -24,10 +24,11 @@ There are two views to create a carousel, the carousel itself and the page indic And they can be configured in the code: ```kotlin -val carouselState = CarouselState(PagerState(0)) val pages = 6 binding.carouselView - .setContent { page -> CarouselItem(page) } + .setContent(getMediaCardsForCarousel()) + //Alternatively, you can pass a composable function to create the content + //.setContent { page -> CarouselItem(page) } .setState(carouselState) .setItemCount(pages) @@ -35,6 +36,8 @@ binding.carouselPageIndicatorView .setState(carouselState) .setPageCount(pages) +private fun getMediaCardsForCarousel(): List { ... } + @Composable private fun CarouselItem(page: Int) { ... } ``` \ No newline at end of file