MultiAspectCarouselItemDrawInfo

Interface to hold information about a multi-aspect carousel item and its draw info that change as

MultiAspectCarouselItemDrawInfo

@ExperimentalMaterial3Api
sealed interface MultiAspectCarouselItemDrawInfo

Interface to hold information about a multi-aspect carousel item and its draw info that change as the item scrolls.

Example of MultiAspectCarouselItemDrawInfo usage:

Properties

val index: Int

The index of this item in the list.

@get:FrequentlyChangingValue val size: Float

The current size of this item in the main scrolling axis taking into account any masking from maskStart and maskEnd.

val minSize: Float

The smallest size this item will ever be masked to in the main scrolling axis. size will never be less than minSize.

val maxSize: Float

The maximum size this item will be in the main scrolling axis. This is the fully unmasked size of the item with no mask applied. size will never be greater than maxSize.

@get:FrequentlyChangingValue val maskStart: Float

The offset in pixels from the start of this item's bounds by which the item should be masked.

When this item exists the start or top of the viewport, maskStart will increase to make it look like this item is being squeezed against the edge of the viewport.

@get:FrequentlyChangingValue val maskEnd: Float

The offset in pixels from the end of this item's bounds by which the item should be masked.

When this item exists the end or bottom of the viewport, maskEnd will increase to make it look like this item is being squeezed against the edge of the viewport.

@get:FrequentlyChangingValue val parallax: Float

The distance in pixels to translate this item's content in the main scrolling axis.

When an item is exiting the viewport, parallax will translate the content in the opposite direction of scroll, making it look like the item is moving more slowly and being compressed against the edge of the viewport.

val isHorizontal: Boolean

True if the main scrolling axis is horizontal.

Code Examples

MultiAspectCarouselLazyRowSample

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun MultiAspectCarouselLazyRowSample() {
    data class CarouselItem(
        val id: Int,
        @DrawableRes val imageResId: Int,
        @StringRes val contentDescriptionResId: Int,
        val mainAxisSize: Dp,
    )
    val items =
        listOf(
            CarouselItem(
                0,
                R.drawable.carousel_image_1,
                R.string.carousel_image_1_description,
                305.dp,
            ),
            CarouselItem(
                1,
                R.drawable.carousel_image_2,
                R.string.carousel_image_2_description,
                205.dp,
            ),
            CarouselItem(
                2,
                R.drawable.carousel_image_3,
                R.string.carousel_image_3_description,
                275.dp,
            ),
            CarouselItem(
                3,
                R.drawable.carousel_image_4,
                R.string.carousel_image_4_description,
                350.dp,
            ),
            CarouselItem(
                4,
                R.drawable.carousel_image_5,
                R.string.carousel_image_5_description,
                100.dp,
            ),
        )
    MultiAspectCarouselScope {
        val state = rememberLazyListState()
        LazyRow(
            state = state,
            contentPadding = PaddingValues(16.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            modifier = Modifier.fillMaxWidth().height(221.dp),
        ) {
            itemsIndexed(items) { i, item ->
                val drawInfo = remember { MultiAspectCarouselItemDrawInfo(i, state) }
                Image(
                    painter = painterResource(id = item.imageResId),
                    contentDescription = stringResource(item.contentDescriptionResId),
                    modifier =
                        Modifier.width(item.mainAxisSize)
                            .height(205.dp)
                            .maskClip(MaterialTheme.shapes.extraLarge, drawInfo),
                    contentScale = ContentScale.Crop,
                )
            }
        }
    }
}