From 8cb9d1356767700dfbb6518868ce49c16a9f1b1b Mon Sep 17 00:00:00 2001 From: davotoula Date: Thu, 11 Sep 2025 21:01:12 +0200 Subject: [PATCH] Use constrained LazyVerticalGrid with calculated height for more than 20 images for performance reasons added vertical spacing for some padding Fixing scrollable gallery issue --- .../amethyst/ui/components/ImageGallery.kt | 186 +++++++++++------- 1 file changed, 112 insertions(+), 74 deletions(-) diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/components/ImageGallery.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/components/ImageGallery.kt index 2f079d4d5..26868953f 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/components/ImageGallery.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/components/ImageGallery.kt @@ -27,11 +27,18 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.lazy.grid.GridCells +import androidx.compose.foundation.lazy.grid.LazyVerticalGrid +import androidx.compose.foundation.lazy.grid.items import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.unit.dp import com.vitorpamplona.amethyst.commons.richtext.MediaUrlImage import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel +import com.vitorpamplona.amethyst.ui.theme.Size10dp import com.vitorpamplona.amethyst.ui.theme.Size5dp import kotlinx.collections.immutable.ImmutableList @@ -62,56 +69,59 @@ fun ImageGallery( modifier: Modifier = Modifier, roundedCorner: Boolean = true, ) { - when { - images.isEmpty() -> { - // No images to display - } - images.size == 1 -> { - // Single image - display full width - GalleryImage( - image = images.first(), - allImages = images, - modifier = modifier.fillMaxWidth(), - roundedCorner = roundedCorner, - contentScale = ContentScale.FillWidth, - accountViewModel = accountViewModel, - ) - } - images.size == 2 -> { - // Two images - side by side in 4:3 ratio - TwoImageGallery( - images = images, - accountViewModel = accountViewModel, - roundedCorner = roundedCorner, - modifier = modifier, - ) - } - images.size == 3 -> { - // Three images - one large, two small - ThreeImageGallery( - images = images, - accountViewModel = accountViewModel, - roundedCorner = roundedCorner, - modifier = modifier, - ) - } - images.size == 4 -> { - // Four images - 2x2 grid - FourImageGallery( - images = images, - accountViewModel = accountViewModel, - roundedCorner = roundedCorner, - modifier = modifier, - ) - } - else -> { - // Many images - use staggered grid with 4:3 ratio - ManyImageGallery( - images = images, - accountViewModel = accountViewModel, - roundedCorner = roundedCorner, - modifier = modifier, - ) + // Add vertical padding around the entire gallery for better text separation + Column(modifier = modifier.padding(vertical = Size10dp)) { + when { + images.isEmpty() -> { + // No images to display + } + images.size == 1 -> { + // Single image - display full width + GalleryImage( + image = images.first(), + allImages = images, + modifier = Modifier.fillMaxWidth(), + roundedCorner = roundedCorner, + contentScale = ContentScale.FillWidth, + accountViewModel = accountViewModel, + ) + } + images.size == 2 -> { + // Two images - side by side in 4:3 ratio + TwoImageGallery( + images = images, + accountViewModel = accountViewModel, + roundedCorner = roundedCorner, + modifier = Modifier, + ) + } + images.size == 3 -> { + // Three images - one large, two small + ThreeImageGallery( + images = images, + accountViewModel = accountViewModel, + roundedCorner = roundedCorner, + modifier = Modifier, + ) + } + images.size == 4 -> { + // Four images - 2x2 grid + FourImageGallery( + images = images, + accountViewModel = accountViewModel, + roundedCorner = roundedCorner, + modifier = Modifier, + ) + } + else -> { + // Many images - use staggered grid with 4:3 ratio + ManyImageGallery( + images = images, + accountViewModel = accountViewModel, + roundedCorner = roundedCorner, + modifier = Modifier, + ) + } } } } @@ -227,34 +237,62 @@ private fun ManyImageGallery( else -> 4 // 4 columns for 10+ images } - val rows = (images.size + columns - 1) / columns // Ceiling division + if (images.size <= 20) { + // For smaller sets, use non-lazy Column/Row approach (simpler, no constraint issues) + val rows = (images.size + columns - 1) / columns // Ceiling division - Column( - modifier = modifier.aspectRatio(4f / 3f), - verticalArrangement = Arrangement.spacedBy(Size5dp), - ) { - repeat(rows) { rowIndex -> - Row( - modifier = Modifier.weight(1f).fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(Size5dp), - ) { - repeat(columns) { colIndex -> - val imageIndex = rowIndex * columns + colIndex - if (imageIndex < images.size) { - GalleryImage( - image = images[imageIndex], - allImages = images, - modifier = Modifier.weight(1f).fillMaxSize(), - roundedCorner = roundedCorner, - contentScale = ContentScale.Crop, - accountViewModel = accountViewModel, - ) - } else { - // Empty space for incomplete rows - Box(modifier = Modifier.weight(1f)) + Column( + modifier = modifier, + verticalArrangement = Arrangement.spacedBy(Size5dp), + ) { + repeat(rows) { rowIndex -> + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(Size5dp), + ) { + repeat(columns) { colIndex -> + val imageIndex = rowIndex * columns + colIndex + if (imageIndex < images.size) { + GalleryImage( + image = images[imageIndex], + allImages = images, + modifier = Modifier.weight(1f).aspectRatio(1f), + roundedCorner = roundedCorner, + contentScale = ContentScale.Crop, + accountViewModel = accountViewModel, + ) + } else { + // Empty space for incomplete rows + Box(modifier = Modifier.weight(1f)) + } } } } } + } else { + // For larger sets, use LazyVerticalGrid with explicit height constraint + val rows = (images.size + columns - 1) / columns + // Calculate height: (image height + spacing) * rows - last spacing + // Assume square images with 5dp spacing + val gridHeight = (100 * rows + 5 * (rows - 1)).dp + + LazyVerticalGrid( + columns = GridCells.Fixed(columns), + modifier = modifier.height(gridHeight), // Explicit height constraint + verticalArrangement = Arrangement.spacedBy(Size5dp), + horizontalArrangement = Arrangement.spacedBy(Size5dp), + userScrollEnabled = false, + ) { + items(images) { image -> + GalleryImage( + image = image, + allImages = images, + modifier = Modifier.aspectRatio(1f), + roundedCorner = roundedCorner, + contentScale = ContentScale.Crop, + accountViewModel = accountViewModel, + ) + } + } } }