Tworzenie menu wysuwanego za pomocą komponentu szuflady nawigacyjnej

Komponent schowanka nawigacyjnej to wysuwane menu, które umożliwia użytkownikom poruszanie się po różnych sekcjach aplikacji. Mogą go aktywować, przesuwając palcem od krawędzi lub klikając ikonę menu.

Oto 3 przypadki użycia szuflady nawigacyjnej:

  • Organizowanie treści: umożliwia użytkownikom przełączanie się między różnymi kategoriami, np. w aplikacjach do czytania wiadomości lub prowadzenia bloga.
  • Zarządzanie kontem: w aplikacjach z kontami użytkowników udostępnij szybkie linki do ustawień konta i sekcji profilu.
  • Odkrywanie funkcji: możesz uporządkować wiele funkcji i ustawień w jednym menu, aby ułatwić użytkownikom ich znajdowanie i dostęp do nich w kompleksowych aplikacjach.

W Material Design występują 2 rodzaje paneli nawigacyjnych:

  • Standardowy: udostępnia przestrzeń na ekranie innym treściom.
  • Okno modalne:wyświetla się nad innymi treściami na ekranie.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Wdrożenie panelu nawigacji

Aby wdrożyć szufladę nawigacyjną, możesz użyć komponentu ModalNavigationDrawer:

Najważniejsze punkty

  • Użyj slotu drawerContent, aby podać wartość ModalDrawerSheet i podać zawartość szuflady.

  • ModalNavigationDrawer może przyjmować kilka dodatkowych parametrów szuflady. Możesz na przykład włączyć lub wyłączyć reagowanie szuflady na przeciąganie za pomocą parametru gesturesEnabled, jak w tym przykładzie:

Sterowanie działaniem panelu nawigacji

Aby kontrolować sposób otwierania i zamykania szuflady, użyj DrawerState:

Najważniejsze punkty

  • Przekaż wartość DrawerState do funkcji ModalNavigationDrawer za pomocą parametru drawerState.
  • DrawerState zapewnia dostęp do funkcji open i close, a także właściwości związanych z obecnym stanem szuflady. Te funkcje zawieszania wymagają obiektu CoroutineScope, który można utworzyć za pomocą funkcji rememberCoroutineScope. Funkcję zawieszania możesz też wywołać w reakcji na zdarzenia interfejsu użytkownika.

Wyniki

Rysunek 1. Standardowy panel nawigacyjny (po lewej) i modalny panel nawigacyjny (po prawej).

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 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ę