MultiAspectCarouselItemDrawInfo

Function
Common
@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
index the index of the LazyList item this draw info is being used for
state the LazyListState of the list this item belongs to
Common
@ExperimentalMaterial3Api
fun MultiAspectCarouselItemDrawInfo(
    index: Int,
    state: LazyGridState,
): MultiAspectCarouselItemDrawInfo

Create a MultiAspectCarouselItemDrawInfo object for an item at the given index in a androidx.compose.foundation.lazy.grid.LazyHorizontalGrid or androidx.compose.foundation.lazy.grid.LazyVerticalGrid.

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
index the index of the LazyGrid item this draw info is being used for
state the LazyGridState of the list this item belongs to

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