Карусель

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

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

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

В этой статье рассказывается, как реализовать макеты с несколькими объектами и каруселью без контейнера. Дополнительную информацию о типах макетов можно найти в руководстве по каруселям Material 3.

API surface

Чтобы реализовать карусели с несколькими элементами и без контейнера, используйте composable-функции HorizontalMultiBrowseCarousel и HorizontalUncontainedCarousel. У этих composable-функций есть следующие основные параметры:

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

Эти composable-функции отличаются тем, как они задают размер элементов:

• 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, заполненных ресурсами изображений и описаниями.
• Использует composable-функцию HorizontalMultiBrowseCarousel, которая предназначена для показа нескольких элементов в карусели.
  • Состояние карусели инициализируется с помощью rememberCarouselState, которому передается общее количество элементов.
  • У элементов есть свойство preferredItemWidth (в данном случае 186.dp), которое предлагает оптимальную ширину для каждого элемента. Карусель использует это, чтобы определить, сколько элементов может поместиться на экране одновременно.
  • Параметр itemSpacing добавляет небольшой зазор между элементами.
  • Завершающее лямбда-выражение HorizontalMultiBrowseCarousel перебирает элементы CarouselItems. На каждой итерации он извлекает элемент с индексом i и отображает для него composable-функцию 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

Важные сведения о коде

• Composable-функция HorizontalUncontainedCarousel создает макет карусели.
  • Параметр itemWidth задает фиксированную ширину для каждого элемента в карусели.

Результат

На изображении ниже показан результат выполнения приведенного выше фрагмента кода.