MultiAspectCarouselItemDrawInfo

Create a [MultiAspectCarouselItemDrawInfo] object for an item at the given [index] in a

MultiAspectCarouselItemDrawInfo

@ExperimentalMaterial3Api
fun MultiAspectCarouselItemDrawInfo(
    index: Int,
    state: LazyListState,
): MultiAspectCarouselItemDrawInfo

Create a MultiAspectCarouselItemDrawInfo object for an item at the given index in a androidx.compose.foundation.lazy.LazyRow or androidx.compose.foundation.lazy.LazyColumn.

Remember a MultiAspectCarouselItemDrawInfo for each item in the LazyList and use MultiAspectCarouselScope.maskClip on the item's outermost container to mask and parallax the item on scroll.

Parameters

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,
                )
            }
        }
    }
}