Карусель

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

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

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

В этой статье рассказывается, как реализовать макеты карусели с несколькими элементами и без контейнера. Подробнее о типах макетов…

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

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

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

Результат

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