Wyświetlanie paska aplikacji u góry

Utwórz górny pasek aplikacji, aby ułatwić użytkownikom poruszanie się po aplikacji i dostęp do jej funkcji. W tym celu użyj komponentu TopAppBar.

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 komponentu dla górnego paska aplikacji

Utwórz górny pasek aplikacji za pomocą komponentu MediumTopAppBar, który zwija się, gdy użytkownik przewija obszar treści w dół, i rozwija, gdy użytkownik przewija z powrotem do góry treści:

Najważniejsze informacje o kodzie

  • Zewnętrzna Scaffold z ustawionym TopBar.
  • Tytuł składający się z jednego elementu Text.
  • Górny pasek z 1 zdefiniowanym działaniem
  • Czynność IconButton z funkcją lambda onClick, która ją wykonuje.
  • IconButton zawierający Icon z ikoną i tekstem opisu treści.
  • Zachowanie przewijania dla zawartości wewnętrznej szkieletu jest zdefiniowane jako enterAlwaysScrollBehavior(). Spowoduje to zwinięcie paska aplikacji, gdy użytkownik przesunie zawartość w górę, i rozwinięcie go, gdy przesunie ją w dół.
  • Oprócz atrybutu MediumTopBar, który zawiera tytuł, możesz też użyć:
    • TopAppBar: użyj tego trybu na ekranach, które nie wymagają dużej ilości nawigacji ani działań.
    • CenterAlignedTopAppBar: używaj na ekranach, które mają jedno główne działanie.Tytuł jest wyśrodkowany w komponencie.
    • MediumTopAppBar: użyj tego formatu na ekranach, które wymagają umiarkowanej ilości nawigacji i działań.
    • LargeTopAppBar: używaj na ekranach, które wymagają dużej ilości nawigacji i działań. Używa większego marginesu niż MediumTopAppBar i umieszcza tytuł pod dodatkowymi ikonami.

Wyniki

Rysunek 1. Średni pasek górny aplikacji.

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:

Dowiedz się, jak używać standardowej platformy do tworzenia złożonych interfejsów użytkownika. Szablon łączy ze sobą różne części interfejsu, zapewniając spójny wygląd i działanie aplikacji.
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.