MultiAspectCarouselScope

A scope containing all methods used to create a multi-aspect carousel from a

MultiAspectCarouselScope

interface MultiAspectCarouselScope

A scope containing all methods used to create a multi-aspect carousel from a androidx.compose.foundation.lazy.LazyRow or androidx.compose.foundation.lazy.LazyColumn.

For each item in a lazy list, remember a MultiAspectCarouselItemDrawInfo using and then modify items with maskClip to create a parallax masking effect as items enter and exit the scrolling container.

Functions

@ExperimentalMaterial3Api
    fun Modifier.maskClip(
        shape: Shape,
        multiAspectItemDrawInfo: MultiAspectCarouselItemDrawInfo,
    ): Modifier

Clip and parallax a composable item in a LazyLayout to the given shape according to mask and parallax values from multiAspectItemDrawInfo.

Parameters

@ExperimentalMaterial3Api
    @Composable
    fun Modifier.maskBorder(
        border: BorderStroke,
        shape: Shape,
        multiAspectItemDrawInfo: MultiAspectCarouselItemDrawInfo,
    ): Modifier

Draw a border on a composable item in a LazyLayout using the given shape according to the mask values from multiAspectItemDrawInfo.

Apply maskBorder before maskClip to avoid clipping the border.

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