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) ) } }
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 IndikatorsLightGray
sind. - Im
HorizontalPager
kann dasText
-Element verwendet werden, um auf jeder Seite den Text „Seite: [Seitennummer]“ anzuzeigen.
Ergebnisse
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Liste oder Raster anzeigen
