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)
        )
    }
}

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.
Dowiedz się, jak funkcje składane mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.

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.