Benutzerdefinierten Seitenindikator hinzufügen

Mit Seitenindikatoren können Sie Nutzern ihre aktuelle Position in den Inhalten Ihrer App visualisieren. Diese Navigationshinweise sind hilfreich, wenn Sie Inhalte sequenziell präsentieren, z. B. Karussells, Bildergalerien und Diashows oder Paginierung in Listen.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Horizontalen Paginierungsmechanismus mit benutzerdefiniertem Seitenindikator erstellen

Mit dem folgenden Code wird ein horizontaler Bildlauf mit einer Seitenanzeige erstellt, die Nutzern visuell signalisiert, wie viele Seiten es gibt und welche Seite gerade sichtbar ist:

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}
PagerSnippets.kt

Wichtige Punkte zum Code

  • Der Code implementiert ein HorizontalPager, mit dem Sie horizontal zwischen verschiedenen Seiten mit Inhalten wischen können. In diesem Fall wird auf jeder Seite die Seitennummer angezeigt.
  • Die Funktion rememberPagerState() initialisiert den Pager und legt die Anzahl der Seiten auf 4 fest. Diese Funktion erstellt ein Statusobjekt, das die aktuelle Seite verfolgt und mit dem Sie den Bildlauf steuern können.
  • Mit der Property pagerState.currentPage wird festgelegt, welcher Seitenindikator hervorgehoben werden soll.
  • Der Seitenindikator wird in einem Pager angezeigt, der von einer Row-Implementierung überlagert wird.
  • Für jede Seite im Pager wird ein Kreis mit 16 dp gezeichnet. Der Indikator für die aktuelle Seite wird als DarkGray angezeigt, während die restlichen Kreise des Indikators LightGray sind.
  • Im HorizontalPager kann das Text-Element verwendet werden, um auf jeder Seite den Text „Seite: [Seitennummer]“ anzuzeigen.

Ergebnisse

Abbildung 1: Ein Vorleser, der unter dem Inhalt einen Kreis als Indikator anzeigt.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Mit Listen und Rastern können Sie Sammlungen in Ihrer App in einer visuell ansprechenden und für Nutzer leicht verständlichen Form präsentieren.
Sammlung von Kurzanleitungen
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Sammlung von Kurzanleitungen

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.
Zu den FAQs Feedback geben