Карусель

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Карусель отображает прокручиваемый список элементов, которые динамически адаптируются в зависимости от размера окна. Используйте карусели для демонстрации коллекции связанного контента. Элементы карусели подчеркивают визуальные эффекты, но также могут содержать краткий текст, который адаптируется к размеру элемента.

Доступны четыре варианта макета карусели для различных вариантов использования:

• Мультипросмотр : включает элементы разных размеров. Рекомендуется для просмотра многих элементов одновременно, например фотографий.
• Неограниченный : содержит элементы одного размера, выходящие за пределы экрана. Можно настроить для отображения большего количества текста или другого пользовательского интерфейса над или под каждым элементом.
• Hero : выделяет одно большое изображение, на котором можно сосредоточиться, и позволяет заглянуть в то, что будет дальше, с помощью небольшого элемента. Рекомендуется для выделения контента, на котором вы хотите сделать акцент, например, миниатюр фильмов или шоу.
• Полный экран : показывает один большой элемент от края до края за раз и прокручивает по вертикали. Рекомендуется для контента, высота которого больше ширины.

На этой странице показано, как реализовать макеты multi-browse и uncontained carousel. Для получения дополнительной информации о типах макетов см. руководство Carousel Material 3.

API поверхность

Для реализации многобраузеров и неконтейнерных каруселей используйте компонуемые HorizontalMultiBrowseCarousel и HorizontalUncontainedCarousel . Эти компонуемые имеют следующие общие ключевые параметры:

• state : Экземпляр CarouselState , который управляет текущим индексом элемента и позицией прокрутки. Создайте это состояние с помощью rememberCarouselState { itemCount } , где itemCount — это общее количество элементов в карусели.
• itemSpacing : определяет размер пустого пространства между соседними элементами в карусели.
• contentPadding : Применяет отступ вокруг области контента карусели. Используйте это, чтобы добавить пространство перед первым элементом или после последнего элемента, или чтобы предоставить поля для элементов в прокручиваемой области.
• content : Компонуемая функция, которая получает целочисленный индекс. Используйте эту лямбду для определения пользовательского интерфейса для каждого элемента в карусели на основе его индекса.

Эти компонуемые элементы различаются по способу указания размера элемента:

• itemWidth (для HorizontalUncontainedCarousel ): указывает точную ширину каждого элемента в незамкнутой карусели.
• preferredItemWidth (для HorizontalMultiBrowseCarousel ): предлагает идеальную ширину для элементов в карусели с несколькими просмотрами, позволяя компоненту отображать несколько элементов, если позволяет пространство.

Пример: карусель с несколькими просмотрами

В этом фрагменте реализована многобраузерная карусель:

@Composable
fun CarouselExample_MultiBrowse() {
    data class CarouselItem(
        val id: Int,
        @DrawableRes val imageResId: Int,
        val contentDescription: String
    )

    val items = remember {
        listOf(
            CarouselItem(0, R.drawable.cupcake, "cupcake"),
            CarouselItem(1, R.drawable.donut, "donut"),
            CarouselItem(2, R.drawable.eclair, "eclair"),
            CarouselItem(3, R.drawable.froyo, "froyo"),
            CarouselItem(4, R.drawable.gingerbread, "gingerbread"),
        )
    }

    HorizontalMultiBrowseCarousel(
        state = rememberCarouselState { items.count() },
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(top = 16.dp, bottom = 16.dp),
        preferredItemWidth = 186.dp,
        itemSpacing = 8.dp,
        contentPadding = PaddingValues(horizontal = 16.dp)
    ) { i ->
        val item = items[i]
        Image(
            modifier = Modifier
                .height(205.dp)
                .maskClip(MaterialTheme.shapes.extraLarge),
            painter = painterResource(id = item.imageResId),
            contentDescription = item.contentDescription,
            contentScale = ContentScale.Crop
        )
    }
}
Carousel.kt

Ключевые моменты кодекса

• Определяет класс данных CarouselItem , который структурирует данные для каждого элемента в карусели.
• Создает и запоминает List объектов CarouselItem , заполненных ресурсами изображений и описаниями.
• Использует компонуемый элемент HorizontalMultiBrowseCarousel , предназначенный для отображения нескольких элементов в карусели.
  • Состояние карусели инициализируется с помощью rememberCarouselState , которому присваивается общее количество элементов.
  • Элементы имеют preferredItemWidth (здесь 186.dp ), что предполагает оптимальную ширину для каждого элемента. Карусель использует это, чтобы определить, сколько элементов может поместиться на экране одновременно.
  • Параметр itemSpacing добавляет небольшой зазор между элементами.
  • Завершающая лямбда HorizontalMultiBrowseCarousel проходит по CarouselItems . В каждой итерации она извлекает элемент с индексом i и визуализирует Image , которое можно составить для него.
  • Modifier.maskClip(MaterialTheme.shapes.extraLarge) применяет предопределенную маску формы к каждому изображению, придавая ему скругленные углы.
  • contentDescription предоставляет описание доступности изображения.

Результат

На следующем изображении показан результат предыдущего фрагмента:

Пример: Неограниченная карусель

Следующий фрагмент реализует неконтейнированную карусель:

@Composable
fun CarouselExample() {
    data class CarouselItem(
        val id: Int,
        @DrawableRes val imageResId: Int,
        val contentDescription: String
    )

    val carouselItems = remember {
        listOf(
            CarouselItem(0, R.drawable.cupcake, "cupcake"),
            CarouselItem(1, R.drawable.donut, "donut"),
            CarouselItem(2, R.drawable.eclair, "eclair"),
            CarouselItem(3, R.drawable.froyo, "froyo"),
            CarouselItem(4, R.drawable.gingerbread, "gingerbread"),
        )
    }

    HorizontalUncontainedCarousel(
        state = rememberCarouselState { carouselItems.count() },
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(top = 16.dp, bottom = 16.dp),
        itemWidth = 186.dp,
        itemSpacing = 8.dp,
        contentPadding = PaddingValues(horizontal = 16.dp)
    ) { i ->
        val item = carouselItems[i]
        Image(
            modifier = Modifier
                .height(205.dp)
                .maskClip(MaterialTheme.shapes.extraLarge),
            painter = painterResource(id = item.imageResId),
            contentDescription = item.contentDescription,
            contentScale = ContentScale.Crop
        )
    }
}
Carousel.kt

Ключевые моменты кодекса

• Компоновочный элемент HorizontalUncontainedCarousel создает макет карусели.
  • Параметр itemWidth задает фиксированную ширину для каждого элемента в карусели.

Результат

На следующем изображении показан результат предыдущего фрагмента: