ANDROID-14098 set asset dimensions (#322)

* ANDROID-14098 add TYPE_IMAGE_ROUNDED and configureAsset(dimensions) for traditional views * ANDROID-14098 add ImageAsset to compose ListRowIcon to accept different sizes * ANDROID-14098 add listRowAssetHeight & listRowAssetWidth * ANDROID-14098 add roborazzi tests for the xml layout * ANDROID-14098 add roborazzi tests for ListRowItem (compose) * ANDROID-14098 update the compose readme * ANDROID-14098 update listRowAssetHeight and listRowAssetWidth as dimension * ANDROID-14098 add extra image to the xml test
Telefonica · Dec 19, 2023 · 28222a0 · 28222a0
1 parent 05f5567
commit 28222a0
Show file tree

Hide file tree

Showing 16 changed files with 306 additions and 4 deletions.
diff --git a/...rc/main/java/com/telefonica/mistica/catalog/ui/classic/components/ListsCatalogFragment.kt b/...rc/main/java/com/telefonica/mistica/catalog/ui/classic/components/ListsCatalogFragment.kt
@@ -17,13 +17,16 @@ import com.telefonica.mistica.list.ListRowView.Companion.TYPE_IMAGE
 import com.telefonica.mistica.list.ListRowView.Companion.TYPE_IMAGE_16_9
 import com.telefonica.mistica.list.ListRowView.Companion.TYPE_IMAGE_1_1
 import com.telefonica.mistica.list.ListRowView.Companion.TYPE_IMAGE_7_10
+import com.telefonica.mistica.list.ListRowView.Companion.TYPE_IMAGE_ROUNDED
 import com.telefonica.mistica.list.ListRowView.Companion.TYPE_LARGE_ICON
 import com.telefonica.mistica.list.ListRowView.Companion.TYPE_SMALL_ICON
 import com.telefonica.mistica.list.MisticaRecyclerView
+import com.telefonica.mistica.list.model.ImageDimensions
 import com.telefonica.mistica.tag.TagStyle
 import com.telefonica.mistica.tag.TagView
 import com.telefonica.mistica.tag.TagView.Companion.TYPE_INVERSE
 import com.telefonica.mistica.tag.TagView.Companion.TYPE_PROMO
+import com.telefonica.mistica.util.convertDpToPx
 
 class ListsCatalogFragment : Fragment() {
 
@@ -438,6 +441,17 @@ class ListsCatalogFragment : Fragment() {
                     withInverseBackground = withInverseBackground,
                 )
             },
+            {
+                it.configureView(
+                    withAsset = true,
+                    withAssetType = TYPE_IMAGE_ROUNDED,
+                    withDimensions = ImageDimensions(width = 64, height = 64),
+                    withAction = true,
+                    withSubtitle = true,
+                    withHeadline = true,
+                    withInverseBackground = withInverseBackground,
+                )
+            },
         )
 
         @SuppressLint("SetTextI18n")
@@ -448,6 +462,7 @@ class ListsCatalogFragment : Fragment() {
             withDescriptionMaxLines: Int? = null,
             withAsset: Boolean = false,
             @AssetType withAssetType: Int = TYPE_SMALL_ICON,
+            withDimensions: ImageDimensions? = null,
             withAction: Boolean = false,
             withBadge: Boolean = false,
             withBadgeNumeric: Int = 0,
@@ -487,6 +502,10 @@ class ListsCatalogFragment : Fragment() {
                 }
             )
 
+            withDimensions?.let {
+                setAssetHeight(context.convertDpToPx(withDimensions.height).toFloat())
+                setAssetWidth(context.convertDpToPx(withDimensions.width).toFloat())
+            }
             setAssetType(withAssetType)
             withUrlIcon?.let {
                 setAssetUrl(it, errorDrawable = withErrorIcon)
@@ -522,6 +541,7 @@ class ListsCatalogFragment : Fragment() {
                     TYPE_IMAGE_1_1,
                     TYPE_IMAGE_16_9,
                     TYPE_IMAGE_7_10,
+                    TYPE_IMAGE_ROUNDED,
                     -> R.drawable.highlighted_card_custom_background
 
                     else -> R.drawable.ic_lists

diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Lists.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Lists.kt
@@ -33,6 +33,7 @@ import com.telefonica.mistica.compose.list.ListRowItem
 import com.telefonica.mistica.compose.shape.Chevron
 import com.telefonica.mistica.compose.tag.Tag
 import com.telefonica.mistica.compose.theme.MisticaTheme
+import com.telefonica.mistica.list.model.ImageDimensions
 import com.telefonica.mistica.tag.TagView.Companion.TYPE_PROMO
 
 const val TITLE = "Title"
@@ -276,6 +277,18 @@ fun samples() = listOf(
             painter = painterResource(id = R.drawable.list_row_drawable),
             aspectRatio = ListRowIcon.AspectRatio.RATIO_7_10
         ),
+    ),
+    ListItem(
+        title = TITLE,
+        subtitle = SUBTITLE,
+        description = DESCRIPTION,
+        action = { Switch(checked = true, onCheckedChange = {}) },
+        isBadgeVisible = true,
+        badge = "1",
+        listRowIcon = ListRowIcon.ImageAsset(
+            painter = painterResource(id = R.drawable.list_row_drawable),
+            dimensions = ImageDimensions(width = 64, height = 64),
+        ),
     )
 )
 

diff --git a/library/screenshots/check_ListRowItem_with_32x32_asset.png b/library/screenshots/check_ListRowItem_with_32x32_asset.png
diff --git a/library/screenshots/check_ListRowItem_with_64x64_asset.png b/library/screenshots/check_ListRowItem_with_64x64_asset.png
diff --git a/library/screenshots/check_ListRowView_xml.png b/library/screenshots/check_ListRowView_xml.png
diff --git a/library/src/main/java/com/telefonica/mistica/compose/list/ListRowIcon.kt b/library/src/main/java/com/telefonica/mistica/compose/list/ListRowIcon.kt
@@ -16,9 +16,12 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.telefonica.mistica.R
 import com.telefonica.mistica.compose.shape.Circle
+import com.telefonica.mistica.list.model.ImageDimensions
 
 sealed class ListRowIcon(val contentDescription: String?) {
 
@@ -45,6 +48,13 @@ sealed class ListRowIcon(val contentDescription: String?) {
         private val description: String? = null,
     ) : ListRowIcon(description)
 
+    data class ImageAsset(
+        val painter: Painter? = null,
+        val dimensions: ImageDimensions? = null,
+        val contentScale: ContentScale = ContentScale.Crop,
+        private val description: String? = null,
+    ) : ListRowIcon(description)
+
     enum class AspectRatio(val width: Dp, val height: Dp) {
         RATIO_1_1(80.dp, 80.dp),
         RATIO_7_10(80.dp, 116.dp),
@@ -58,6 +68,7 @@ sealed class ListRowIcon(val contentDescription: String?) {
             is CircleIcon -> DrawCircleIcon()
             is SmallAsset -> DrawSmallAsset()
             is LargeAsset -> DrawLargeAsset()
+            is ImageAsset -> DrawImageAsset()
         }
     }
 
@@ -121,4 +132,19 @@ sealed class ListRowIcon(val contentDescription: String?) {
             )
         }
     }
+
+    @Composable
+    private fun ImageAsset.DrawImageAsset() {
+        painter?.let {
+            Image(
+                painter = painter,
+                contentDescription = contentDescription,
+                modifier = Modifier
+                    .width(dimensions?.width?.dp ?: dimensionResource(id = R.dimen.asset_default_size))
+                    .height(dimensions?.height?.dp ?: dimensionResource(id = R.dimen.asset_default_size))
+                    .clip(RoundedCornerShape(4.dp)),
+                contentScale = contentScale,
+            )
+        }
+    }
 }
diff --git a/library/src/main/java/com/telefonica/mistica/compose/list/README.md b/library/src/main/java/com/telefonica/mistica/compose/list/README.md
@@ -49,6 +49,8 @@ There are 4 types of icons:
 - `SmallAsset`: it's a circle icon, it could be a `Drawable` resource or a external url with a `description` parameter inside.
 - `LargeAsset`: it's a custom image, it could be a `Drawable` resource or a external url with a `description` parameter inside. It's possible to define the
   `aspectRatio` of the image and the `contentScale` type
+- `ImageAsset`: it's a custom image, it could be a `Drawable` resource or a external url with a `description` parameter inside. It's possible to define the
+  `dimensions` which is of type `ImageDimensions`.
 
 ![image](https://user-images.githubusercontent.com/944814/143047368-3494885c-6324-4b4b-bcc0-4177525208bf.png)
 

diff --git a/library/src/main/java/com/telefonica/mistica/list/ListRowView.kt b/library/src/main/java/com/telefonica/mistica/list/ListRowView.kt
@@ -25,6 +25,7 @@ import androidx.databinding.BindingMethods
 import coil.load
 import com.telefonica.mistica.R
 import com.telefonica.mistica.badge.Badge
+import com.telefonica.mistica.list.model.ImageDimensions
 import com.telefonica.mistica.util.convertDpToPx
 import com.telefonica.mistica.util.getThemeColor
 import com.telefonica.mistica.util.setAlpha
@@ -95,6 +96,16 @@ import com.telefonica.mistica.util.setAlpha
         attribute = "listRowActionLayout",
         method = "setActionLayout"
     ),
+    BindingMethod(
+        type = ListRowView::class,
+        attribute = "listRowAssetHeight",
+        method = "setAssetHeight"
+    ),
+    BindingMethod(
+        type = ListRowView::class,
+        attribute = "listRowAssetWidth",
+        method = "setAssetWidth"
+    ),
 )
 class ListRowView @JvmOverloads constructor(
     context: Context,
@@ -109,7 +120,8 @@ class ListRowView @JvmOverloads constructor(
         TYPE_LARGE_ICON,
         TYPE_IMAGE_1_1,
         TYPE_IMAGE_7_10,
-        TYPE_IMAGE_16_9
+        TYPE_IMAGE_16_9,
+        TYPE_IMAGE_ROUNDED,
     )
     annotation class AssetType
 
@@ -143,6 +155,8 @@ class ListRowView @JvmOverloads constructor(
     private var currentHeadlineLayoutRes: Int = HEADLINE_NONE
     private var currentActionLayoutRes: Int = ACTION_NONE
     private var assetType: Int = TYPE_SMALL_ICON
+    private var assetHeight: Float = UNDEFINED
+    private var assetWidth: Float = UNDEFINED
 
     init {
         LayoutInflater.from(context).inflate(R.layout.list_row_item, this, true)
@@ -201,6 +215,18 @@ class ListRowView @JvmOverloads constructor(
                     backgroundTypeDefaultValue
                 )
             )
+            setAssetHeight(
+                styledAttrs.getDimension(
+                    R.styleable.ListRowView_listRowAssetHeight,
+                    UNDEFINED
+                )
+            )
+            setAssetWidth(
+                styledAttrs.getDimension(
+                    R.styleable.ListRowView_listRowAssetWidth,
+                    UNDEFINED
+                )
+            )
             setAssetType(
                 styledAttrs.getInt(
                     R.styleable.ListRowView_listRowAssetType,
@@ -242,7 +268,8 @@ class ListRowView @JvmOverloads constructor(
             TYPE_IMAGE -> assetCircularImageView
             TYPE_IMAGE_1_1,
             TYPE_IMAGE_7_10,
-            TYPE_IMAGE_16_9 -> assetRoundedImageView
+            TYPE_IMAGE_16_9,
+            TYPE_IMAGE_ROUNDED -> assetRoundedImageView
             else -> assetImageView
         }.also { imageView ->
             imageView.load(url) {
@@ -270,6 +297,7 @@ class ListRowView @JvmOverloads constructor(
                 TYPE_IMAGE_1_1,
                 TYPE_IMAGE_7_10,
                 TYPE_IMAGE_16_9,
+                TYPE_IMAGE_ROUNDED
                 -> assetRoundedImageView.setImageDrawable(drawable)
 
                 else -> assetImageView.setImageDrawable(drawable)
@@ -283,15 +311,35 @@ class ListRowView @JvmOverloads constructor(
 
     private fun updateIconVisibility() {
         assetCircularImageView.isVisible = assetType == TYPE_IMAGE
-        assetRoundedImageView.isVisible = assetType == TYPE_IMAGE_1_1 || assetType == TYPE_IMAGE_7_10 || assetType == TYPE_IMAGE_16_9
+        assetRoundedImageView.isVisible = assetType == TYPE_IMAGE_1_1 || assetType == TYPE_IMAGE_7_10
+                || assetType == TYPE_IMAGE_16_9 || assetType == TYPE_IMAGE_ROUNDED
         assetImageView.isVisible = assetType == TYPE_SMALL_ICON || assetType == TYPE_LARGE_ICON
     }
 
-    fun setAssetType(@AssetType type: Int) {
+    fun setAssetType(@AssetType type: Int, dimensions: ImageDimensions? = null) {
         assetType = type
+        dimensions?.let {
+            setAssetHeight(context.convertDpToPx(it.height).toFloat())
+            setAssetWidth(context.convertDpToPx(it.width).toFloat())
+        }
         configureAsset()
     }
 
+    fun setAssetHeight(height: Float) {
+        assetHeight = if (height > 0) {
+            height
+        } else {
+            resources.getDimension(R.dimen.asset_default_size)
+        }
+    }
+
+    fun setAssetWidth(width: Float) {
+        assetWidth = if (width > 0)
+            width
+        else
+            resources.getDimension(R.dimen.asset_default_size)
+    }
+
     private fun configureAsset() {
         when (assetType) {
             TYPE_IMAGE -> {
@@ -311,6 +359,7 @@ class ListRowView @JvmOverloads constructor(
             TYPE_IMAGE_1_1 -> assetRoundedImageView.setSize(80, 80)
             TYPE_IMAGE_7_10 -> assetRoundedImageView.setSize(80, 116)
             TYPE_IMAGE_16_9 -> assetRoundedImageView.setSize(138, 80)
+            TYPE_IMAGE_ROUNDED -> assetRoundedImageView.setSizePx(assetWidth, assetHeight)
         }
         recalculateAssetPosition()
     }
@@ -541,6 +590,14 @@ class ListRowView @JvmOverloads constructor(
         }
     }
 
+    private fun ImageView.setSizePx(pxWidth: Float, pxHeight: Float) {
+        layoutParams.apply {
+            height = pxHeight.toInt()
+            width = pxWidth.toInt()
+            layoutParams = this
+        }
+    }
+
     private fun View.isVisible(): Boolean =
         visibility == View.VISIBLE
 
@@ -555,6 +612,7 @@ class ListRowView @JvmOverloads constructor(
 
     companion object {
         private const val BADGE_GONE = 0
+        private const val UNDEFINED = -1f
         const val ACTION_NONE = -1
         const val HEADLINE_NONE = -1
         const val TYPE_IMAGE = 0
@@ -563,6 +621,7 @@ class ListRowView @JvmOverloads constructor(
         const val TYPE_IMAGE_1_1 = 3
         const val TYPE_IMAGE_7_10 = 4
         const val TYPE_IMAGE_16_9 = 5
+        const val TYPE_IMAGE_ROUNDED = 6
 
         @BindingAdapter(
             value = ["listRowBadgeCount", "listRowBadgeDescription"],

diff --git a/library/src/main/java/com/telefonica/mistica/list/README.md b/library/src/main/java/com/telefonica/mistica/list/README.md
@@ -29,6 +29,13 @@ Implemented as a custom view, `com.telefonica.mistica.ListRowView` can be used i
 		<enum name="image_1_1" value="3" />
 		<enum name="image_7_10" value="4" />
 		<enum name="image_16_9" value="5" />
+		<enum name="image_rounded" value="6" />
+	</attr>
+	<attr name="listRowAssetHeight" format="integer">
+		<enum name="undefined" value="64" />
+	</attr>
+	<attr name="listRowAssetWidth" format="integer">
+		<enum name="undefined" value="64" />
 	</attr>
 	<attr name="listRowBackgroundType" format="enum">
 		<enum name="normal" value="0" />

diff --git a/library/src/main/java/com/telefonica/mistica/list/model/ImageDimensions.kt b/library/src/main/java/com/telefonica/mistica/list/model/ImageDimensions.kt
@@ -0,0 +1,6 @@
+package com.telefonica.mistica.list.model
+
+data class ImageDimensions(
+    val width: Int,
+    val height: Int,
+)
diff --git a/library/src/main/res/values/attrs_components.xml b/library/src/main/res/values/attrs_components.xml
@@ -69,6 +69,13 @@
             <enum name="image_1_1" value="3" />
             <enum name="image_7_10" value="4" />
             <enum name="image_16_9" value="5" />
+            <enum name="image_rounded" value="6" />
+        </attr>
+        <attr name="listRowAssetHeight" format="dimension">
+                <enum name="none" value="-1" />
+        </attr>
+        <attr name="listRowAssetWidth" format="dimension">
+                <enum name="none" value="-1" />
         </attr>
         <!-- {@deprecated This attribute is deprecated. Use <code>listRowBackgroundType</code> instead } -->
         <attr name="listRowIsBoxed" format="boolean" />

diff --git a/library/src/main/res/values/dimens_lists.xml b/library/src/main/res/values/dimens_lists.xml
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <dimen name="generic_divider_height">1dp</dimen>
+    <dimen name="asset_default_size">64dp</dimen>
 </resources>