Samouczek krok po kroku zapewniający płynną obsługę użytkownika

Cześć ludzie !! , W dzisiejszym artykule porozmawiamy o „nawigacji” w systemie Android za pomocą „jetpack compose”. Nawigacja oznacza przemieszczanie się użytkownika z jednego miejsca docelowego w aplikacji do innego. Ostatnio nastąpiła zmiana paradygmatu w strategii rozwoju aplikacji naszej organizacji i zaczęliśmy zmierzać w kierunku konwertowania i pisania interfejsu użytkownika aplikacji za pomocą jetpack compose.

Ale why compose? lub what is android jetpack compose? krótka odpowiedź brzmiałaby:-

Compose to nowoczesny zestaw narzędzi dla Androida do tworzenia natywnego interfejsu użytkownika. Co przyspiesza tworzenie interfejsu użytkownika aplikacji przy minimalnej liczbie kodu i intuicyjnych interfejsach API Kotlin. Ożywia aplikacje, dzięki czemu tworzenie interfejsu Androida jest szybsze i prostsze.

Kiedy zacząłem uczyć się nawigacji przy użyciu narzędzia Jetpack Composer, miałem cztery pytania.

  • Jak przenieść użytkownika z jednego ekranu na drugi
  • Jak usunąć poprzedni ekran z BackStack
  • Jak przekazywać dane pomiędzy ekranami.
  • Jak utworzyć zagnieżdżoną przykładową sekcję logowania użytkownika nawigacji

W dzisiejszym artykule znajdziemy odpowiedź na powyższe pytania.

Wprowadzenie do nawigacji tworzenia wiadomości:

Przed wprowadzeniem Jetpack Compose mieliśmy różne metody obsługi sposobu, w jaki użytkownicy poruszają się między różnymi częściami aplikacji, na przykład używanie fragmentów dla różnych ekranów, elementy nawigacyjne do zarządzania przejściami i zamiary rozpoczęcia działań. Metody te były często ukryte, co oznaczało, że system wywnioskował, w jaki sposób nawigacja powinna przebiegać na podstawie kodu i konfiguracji.

Jednak wraz z wprowadzeniem Jetpack Compose nastąpiła zmiana w podejściu do nawigacji. Jetpack Compose zachęca do bardziej jednoznacznego podejścia do nawigacji. Zamiast polegać na systemie, który będzie dedukował, w jaki sposób użytkownicy powinni poruszać się w aplikacji, musimy teraz zdefiniować i zadeklarować wszystkie możliwe ścieżki, którymi użytkownicy mogą podążać już na początku procesu tworzenia aplikacji.

Innymi słowy. Jako programiści musimy wyznaczyć i określić każdą możliwą trasę, którą użytkownik może podążać w swojej podróży po aplikacji, a także określić, w jaki sposób różne ekrany powinny ze sobą współdziałać.
Stosowanie tego jawnego podejścia do nawigacji oferowanego przez jetpack compose może prowadzić do bardziej przewidywalna i łatwiejsza w zarządzaniu nawigacja w aplikacji, ułatwiająca zrozumienie i utrzymanie przepływu doświadczeń użytkownika.

Części komponentów nawigacyjnych:

Elementy nawigacyjne składają się z trzech głównych części:

  • NavController: Odpowiada za nawigację między miejscami docelowymi — czyli ekranami w Twojej aplikacji.
  • NavGraph: mapy, do których można komponować miejsca docelowe, do których można nawigować
  • NavHost: Możliwość złożenia, która działa jako kontener do wyświetlania bieżącego miejsca docelowego NavGraph.

Więcej o implementacji komponentów nawigacyjnych porozmawiamy w dalszej części tej sesji.

Plan działania dotyczący nawigacji w trybie tworzenia wiadomości:

Dla mnie proces konfiguracji jest dość prosty i obejmuje poniższe kroki:

  • Dodaj najnowszą zależność tworzenia nawigacji do build.gradle.
  • Skonfiguruj NavController.
  • Dodaj NavHost i utwórz wykres nawigacji.
  • Przygotuj trasy do nawigacji między różnymi miejscami docelowymi aplikacji.
  • Dodatkowo należy obserwować, czy przepływ danych jest wymagany, czy nie.

Zależność nawigacji podczas tworzenia wiadomości:

Zacznijmy od dodania zależności nawigacji tworzenia do pliku build.gradle(:app) w bloku zależności. Odwiedź podany link, aby uzyskać informacje o aktualnej wersji.

// Navigation Compose
    implementation("androidx.navigation:navigation-compose:2.6.0")

Konfiguracja dla dwóch ekranów [ekran główny i ekran szczegółów]:

W tej sekcji utworzymy dwa ekrany, mianowicie ekran główny i ekran szczegółów, które będziemy mieć w naszym projekcie, i będziemy nawigować między nimi. W tradycyjnym systemie widoków możemy tworzyć nasze ekrany za pomocą fragmentów lub działań, ale w jetpack compose definiujemy nasze ekrany w ramach funkcji, którą można komponować.

HomeScreen.kt

DetailScreen.kt

Teraz, gdy tworzone są oba nasze ekrany, HomeScreen i DetailScreen.
Następną rzeczą, którą musimy zdecydować, jest sposób reprezentowania tych ekranów w naszej nawigacji, aby w Jetpack komponować każdy ekran miał unikalną nazwę lub trasę . Nazwa trasy jest unikalna, ponieważ NavController użyje jej do zidentyfikowania następnego elementu do wyświetlenia.

Trasa to ciąg znaków odpowiadający miejscu docelowemu. Dla naszego zrozumienia możemy założyć, że trasa w jetpacku jest podobna do adresu URL. Podobnie jak inny adres URL jest mapowany na inną stronę w witrynie internetowej, trasa jest ciągiem znaków odwzorowującym miejsce docelowe (może to być pojedynczy obiekt Composable lub grupa obiektów Composable) i służy jako jego unikalny identyfikator.

Definiowanie ekranów w naszej aplikacji:

Tutaj tworzymy zapieczętowaną klasę (Screen.kt), która będzie zawierać dwa obiekty, a każdy obiekt będzie reprezentował jeden ekran, a każdy obiekt dziedziczący po klasie screen będzie zawierał unikalną trasę

Konfigurowanie kontrolera nawigacji:

NavController jest kluczowym narzędziem w komponencie Nawigacja. To jak menedżer, który zapamiętuje kolejność ekranów w Twojej aplikacji i ich aktualny stan (keeps track of back stack composable entries), co z kolei zapewnia nam możliwość manipulowania stosem. Można o tym myśleć jako o przewodniku po poruszaniu się po aplikacji.
Aby skonfigurować NavController, możemy użyć metody rememberNavController() w naszym kodzie. Spowoduje to utworzenie remembers a NavController, który przetrwa zmiany konfiguracji.

NavController powinien zawsze być umieszczony na najwyższym poziomie w hierarchii komponowania, zwykle w obrębie App the composable , MainActivity.kt w naszym przypadku, ponieważ chcemy, aby wszystkie elementy komponowalne wymagające navControllera miały tę samą instancję. Jest to zgodne z zasadą podnoszenia stanu i zapewnia, że ​​kontroler navController działa jako pojedyncze źródło prawdy do nawigacji i utrzymywania stosu zaplecza. Zarządzanie fragmentem stanu jest przenoszone z elementu podrzędnego, który można komponować, do elementu nadrzędnego, który można komponować.

Podnoszenie stanu to koncepcja dostępna w Jetpack Compose, w której zarządzanie fragmentem stanu jest przenoszone z elementu podrzędnego, który można komponować, do elementu nadrzędnego, który może następnie przekazać stan dzieciom jako parametr powodujący, że każde dziecko ma stan .

Teraz musimy utworzyć pierwszy główny komponent naszej nawigacji, a następnie skonfigurujemy komponent navHost.

Konfigurowanie NavHosta:

Następnym głównym komponentem nawigacji jest NavHostjego główną funkcją jest zdefiniowanie wykresu nawigacji, co oznacza, że ​​wewnątrz naszego navHost definiujemy wszystkie trasy naszego ekranu, argumenty, nasz cel początkowy i wszystko else, który jest wymagany do pomyślnego skonfigurowania naszej nawigacji.

NavHost pełni rolę kontenera i odpowiada za wyświetlenie bieżącego miejsca docelowego wykresu. Podczas nawigacji NavHost jest ponownie komponowany.

W skrócie NavHost to zbiór miejsc docelowych, które można pobrać.

NavGraph.kt

Teraz dodaj funkcję „onClick” do HomeScreen, dzięki czemu użytkownik przejdzie do DetailScreen.

Teraz dodaj funkcję „onClick” do ekranu DetailScreen, dzięki czemu użytkownik przejdzie do ekranu głównego, ale w przypadku zdarzenia ponownego naciśnięcia na ekranie głównym użytkownik powinien anulować aplikację i nie powinien wracać do ekranu szczegółów

HomeScreen -> DetailScreen ->HomeScreen() -> OnBackPress -> application shouldcancel.

Do tej pory jesteśmy w stanie poruszać się między dwoma ekranami, a także wyczyścić backStack, co odpowiada na dwa pytania, które zadaliśmy na początku artykułu.

W tej sekcji omówimy How to send data between two screen ?i How to create compartmentalized nav graph?

Przekazywanie danych na ekran:

Większość aplikacji chce wyświetlać informacje lub dane w zależności od wcześniejszego wyboru użytkownika. Inny ekran musi wiedzieć, co pokazać, więc wartość musi zostać przekazana.

Odbywa się to poprzez umieszczenie wartości wewnątrz trasy, dzięki czemu wartość jest kodowana jako ciąg znaków, a następnie analizowana na innym ekranie. Aby przekazać argumenty do ekranu docelowego, musisz dodać do trasy symbole zastępcze argumentów.

Zacznijmy więc od aktualizacji ścieżki trasy na ekranie szczegółów.

Tutaj przechodzimy do wartości na trasie, aby wyświetlić ekran szczegółów.

Następnie przechodzimy do naszego NavGraph(SetUpNavGraph.kt) i będziemy aktualizować plik composable za pomocą parametru argumentu i określać argument w naszym pliku composable.

Do tej pory skonfigurowaliśmy navGraph i trasę do pobierania i przekazywania danych. Teraz musimy po prostu przekazać dane z ekranu głównego do ekranu szczegółów, a nasz navGraph zajmie się resztą.

Przekazywanie obiektu, który można podzielić za pomocą nawigacji:

Do tej pory byliśmy w stanie przekazywać prymitywne typy danych z jednego ekranu na drugi, ale how to move whole data object from one screen to other?

Możemy użyć stosu zaplecza do wysłania danych na ekran docelowy, więc planujemy utworzyć wpis na stosie zaplecza dla obiektu danych, a z naszego ekranu szczegółów pobierzemy poprzedni wpis stosu zaplecza, aby odzyskać obiekt.

Klasa danych dla obiektu osoby :
Person.kt :

@Parcelize
data class Person(
    val firstName : String,
    val secondName : String
): Parcelable

Ustawianie obiektu danych Person z homeScreen.kt jako wpisu BackStack, a następnie przejście do detalScreen.kt

Pobieranie obiektu danych osoby w detalScreen.kt. Tutaj sprawdzimy poprzedni wpis BackStack i pobierzemy obiekt osoby.

Jakkolwiek to podejście zawiedzie, gdy przejdziemy z ekranu głównego do ekranu szczegółów i wyczyścimy stos. Aby przeciwdziałać tej sytuacji, możemy użyć współdzielonego ViewModel, tj. mieć stały viewModel i każdy ekran ma tę samą instancję. Możemy zainicjować współdzielony ViewModel w pliku navGraph.kt i przekazać jego instancję do obu ekranów.

Daj mi znać w komentarzach, jeśli pojawią się jakieś błędy podczas konfiguracji.

Zagnieżdżona nawigacja:

Zagnieżdżona nawigacja w Jetpack Compose odnosi się do praktyki organizowania i konstruowania przepływu nawigacji w aplikacji w sposób hierarchiczny. Wiąże się to z tworzeniem wykresów nawigacyjnych w obrębie innych wykresów nawigacyjnych, co pozwala na bardziej modułowe i podzielone na przedziały zarządzanie nawigacją.

Mówiąc prościej, przypomina to posiadanie mniejszych sekcji lub podprzepływów w głównym przepływie nawigacji w aplikacji. Każdy z tych podprzepływów może mieć własny zestaw ekranów, akcji i logiki. To podejście jest szczególnie przydatne w przypadku złożonych aplikacji, które mają różne sekcje lub moduły, z których każdy wymaga własnej logiki nawigacji.

W naszym istniejącym projekcie dodamy więcej ekranów o nazwach LoginScreen i SignUpScreen.

Dodanie nowego navGraph o nazwie AuthNavGraph.kt

Aby utworzyć zagnieżdżony wykres, wywołujemy funkcję nawigacyjną navHost, która zawiera trasę będącą prostą nazwą bloku nawigacyjnego. i w obrębie tego zagnieżdżonego wykresu nawigacyjnego zachowamy wszystkie ekrany, które powinien zawierać ten wykres, ponieważ nawigacji()jest funkcją rozszerzenia funkcji NavGraphBuilder. Przenieśliśmy ją do innego pliku, aby wprowadzić przenoszenie czytelność kodu.

Podobnie utwórz zagnieżdżony wykres dla ekranu głównego i ekranu szczegółów.

Teraz nasz główny plik NavGraph.kt wygląda mniej więcej tak.

@Composable
fun SetUpNavGraph(
    navController: NavHostController
) {
    NavHost(
        navController = navController,
        startDestination = HOME_ROUTE,
        route = ROOT_ROUTE
    ) {
        homeNavGraph(navController = navController)
        authNavGraph(navController = navController)
    }
}

Teraz dodaj logikę w homeScreen.kt, aby przejść z jednego zagnieżdżonego navGraph (homeNavGraph.kt) do innego navGraph (authNavGraph.kt).

HomeScreen.kt

Tak właśnie wyglądało moje rozumienie nawigacji plecakiem odrzutowym. Zachęcamy do zgłaszania wszelkich sugestii/ulepszeń w sekcji komentarzy.

Github: https://github.com/bajpaiNikhil/navigationInCompose

Dziękujemy za przeczytanie do końca. Zachęcamy do śledzenia autora i tej publikacji. Odwiedź Stackademic, aby dowiedzieć się więcej o tym, jak demokratyzujemy bezpłatną edukację programistyczną na całym świecie.

Do następnego razu,
★DZIĘKUJĘ★