Karussell

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Ein Karussell enthält eine scrollbare Liste von Elementen, die sich dynamisch an die Fenstergröße anpassen. Mit Karussells können Sie eine Sammlung ähnlicher Inhalte präsentieren. Bei Karussellelementen stehen Bilder im Vordergrund, sie können aber auch kurzen Text enthalten, der sich an die Größe des Elements anpasst.

Es gibt vier Karusselllayouts für verschiedene Anwendungsfälle:

• Mehrere Suchanfragen: Enthält Artikel in unterschiedlichen Größen. Empfohlen, wenn Sie viele Elemente gleichzeitig durchsuchen möchten, z. B. Fotos.
• Ohne Begrenzung: Enthält Elemente, die alle dieselbe Größe haben und über den Bildschirmrand hinausragen. Kann angepasst werden, um über oder unter jedem Element mehr Text oder eine andere Benutzeroberfläche anzuzeigen.
• Hero-Image: Ein großes Bild, das den Fokus auf sich zieht, und ein kleines Element, das einen Ausblick auf das nächste Bild bietet. Empfohlen, um Inhalte hervorzuheben, die du betonen möchtest, z. B. Film- oder Serien-Thumbnails.
• Vollbild: Es wird jeweils ein großes Element von Rand zu Rand angezeigt und vertikal gescrollt. Empfohlen für Inhalte, die höher als breit sind.

Auf dieser Seite erfahren Sie, wie Sie die Karusselllayouts mit mehreren Ansichten und ohne Begrenzung implementieren. Weitere Informationen zu den Layouttypen finden Sie in den Material 3-Richtlinien für Karussells.

API-Oberfläche

Verwenden Sie die HorizontalMultiBrowseCarousel- und HorizontalUncontainedCarousel-Kompositen, um Karussells mit mehreren Ansichten und ohne Begrenzung zu implementieren. Diese Elemente haben die folgenden gemeinsamen Parameter:

• state: Eine CarouselState-Instanz, die den aktuellen Artikelindex und die Scrollposition verwaltet. Erstellen Sie diesen Status mit rememberCarouselState { itemCount }, wobei itemCount die Gesamtzahl der Elemente im Karussell ist.
• itemSpacing: Definiert den Abstand zwischen den Elementen im Karussell.
• contentPadding: Hiermit wird ein Abstand um den Inhaltsbereich des Karussells herum angewendet. So können Sie vor dem ersten oder nach dem letzten Element Platz lassen oder Ränder für die Elemente im scrollbaren Bereich festlegen.
• content: Eine komponierbare Funktion, die einen Ganzzahlindex empfängt. Mit diesem Lambda können Sie die Benutzeroberfläche für jedes Element im Karussell basierend auf seinem Index definieren.

Diese Composeables unterscheiden sich in der Angabe der Artikelgröße:

• itemWidth (für HorizontalUncontainedCarousel): Gibt die genaue Breite für jedes Element in einem nicht enthaltenen Karussell an.
• preferredItemWidth (für HorizontalMultiBrowseCarousel): Hier wird die ideale Breite für Elemente in einem Karussell mit mehreren Ansichten vorgeschlagen. So können in der Komponente mehrere Elemente angezeigt werden, sofern der Platz dafür ausreicht.

Beispiel: Karussell mit mehreren Produkten

In diesem Snippet wird ein Multi-Browse-Karussell implementiert:

@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

Wichtige Punkte zum Code

• Hier wird eine CarouselItem-Datenklasse definiert, die die Daten für jedes Element im Karussell strukturiert.
• Erstellt und speichert eine List von CarouselItem Objekten, die mit Bildressourcen und Beschreibungen ausgefüllt werden.
• Es wird die HorizontalMultiBrowseCarousel-Komponente verwendet, die zum Anzeigen mehrerer Elemente in einem Karussell entwickelt wurde.
  • Der Status des Karussells wird mit rememberCarouselState initialisiert, wobei die Gesamtzahl der Elemente angegeben wird.
  • Elemente haben einen preferredItemWidth (hier 186.dp), der eine optimale Breite für jedes Element vorschlägt. Anhand dieser Informationen wird im Karussell festgelegt, wie viele Elemente gleichzeitig auf dem Bildschirm angezeigt werden können.
  • Mit dem Parameter itemSpacing wird ein kleiner Abstand zwischen den Elementen hinzugefügt.
  • Das abschließende Lambda von HorizontalMultiBrowseCarousel iteriert durch die CarouselItems. In jeder Iteration wird das Element mit dem Index i abgerufen und ein Image-Komposit für dieses Element gerendert.
  • Modifier.maskClip(MaterialTheme.shapes.extraLarge) wendet auf jedes Bild eine vordefinierte Formmaske an, wodurch es abgerundete Ecken erhält.
  • contentDescription enthält eine barrierefreie Beschreibung des Bilds.

Ergebnis

Das folgende Bild zeigt das Ergebnis des vorherigen Snippets:

Beispiel: Uncontained carousel

Im folgenden Snippet wird ein Karussell ohne Begrenzung implementiert:

@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

Wichtige Punkte zum Code

• Mit dem HorizontalUncontainedCarousel-Element wird das Karusselllayout erstellt.
  • Mit dem Parameter itemWidth wird für jedes Element im Karussell eine feste Breite festgelegt.

Ergebnis

Das folgende Bild zeigt das Ergebnis des vorherigen Snippets: