Dzięki wskaźnikom stron możesz pomóc użytkownikom zrozumieć, na którym miejscu w aplikacji się znajdują, i wizualnie pokazać im postępy. Te wskazówki nawigacyjne są przydatne, gdy prezentujesz treści sekwencyjnie, np. w ramkach, galeriach obrazów, pokazie slajdów lub na stronach z podziałem na strony.
Zgodność wersji
Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.
Zależności
Tworzenie poziomego przewijacza z niestandardowym wskaźnikiem strony
Podany niżej kod tworzy poziomy odnośnik do strony z wskaźnikiem strony, który wizualnie informuje użytkownika, ile stron jest dostępnych i która z nich jest widoczna:
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) ) } }
Najważniejsze informacje o kodzie
- Kod implementuje
HorizontalPager
, który umożliwia przesuwanie się poziomo między różnymi stronami z treścią. W tym przypadku każda strona wyświetla numer strony. - Funkcja
rememberPagerState()
inicjuje przewijanie i ustala liczbę stron na 4. Ta funkcja tworzy obiekt stanu, który śledzi bieżącą stronę i pozwala na kontrolowanie strony. - Właściwość
pagerState.currentPage
służy do określenia, który wskaźnik strony ma być podświetlony. - Wskaźnik strony pojawia się w pagerze nałożonym na implementację
Row
. - Na każdej stronie strony pagerowej jest rysowany okrąg o szerokości 16 dp. Wskaźnik bieżącej strony jest wyświetlany jako
DarkGray
, a pozostałe wskaźniki jakoLightGray
. - Element
Text
w komponentachHorizontalPager
wyświetla na każdej stronie tekst „Strona: [numer strony]”.
Wyniki
Kolekcje zawierające ten przewodnik
Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Wyświetlanie listy lub siatki
