Dodawanie wskaźnika strony niestandardowej

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)
        )
    }
}
PagerSnippets.kt

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 jako LightGray.
  • Element Text w komponentach HorizontalPager wyświetla na każdej stronie tekst „Strona: [numer strony]”.

Wyniki

Rysunek 1. Strony przewijania z wskaźnikiem w kształcie koła pod treścią.

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:

Listy i siatki umożliwiają wyświetlanie kolekcji w atrakcyjnej wizualnie formie, która jest łatwa w odczytaniu dla użytkowników.
Kolekcja krótkich przewodników
Dowiedz się, jak funkcje składane mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię