1 of 46

Tehnici avansate pentru

dezvoltarea aplicațiilor mobile

8 - Compose - Navigarea

2 of 46

Principiile navigării

2

3 of 46

Jetpack Navigation

  • Până acum - aplicații cu un singur ecran
  • Aplicațiile reale au mai multe ecrane
  • Jetpack Navigation
    • abordare declarativă
  • Navigarea între mai multe ecrane => calitatea experienței
  • O destinație = un ecran

​

8 - Compose - Navigarea

3

4 of 46

Destinație de pornire

  • Primul ecran când pornim aplicația și ultimul ecran înainte să ieșim cu Back

4

5 of 46

Stiva destinaților = Back Stack

  • Starea navigației este reprezentată de stiva destinațiilor

​

  • Destinația de pornire
    • Prima adăugată pe stivă
    • Rămâne la baza stivei

8 - Compose - Navigarea

5

6 of 46

Stiva destinaților = Back Stack

  • Când pornim o nouă destinație (afișată pe ecran)
    • Adăugată în vârful stivei
    • => vârful stivei = ecranul curent

​

  • Operațiile care schimbă stiva:
    • Acționează asupra părții de sus a stivei
      • Adaugă o nouă destinație în vârf
      • Scoate o destinație din vârf

8 - Compose - Navigarea

6

7 of 46

Stiva destinațiilor

  • Apăsăm pe butonul Back
    • Este scoasă destinația din vârful stivei (pop)
    • Se revine la destinația anterioară

​

  • Back de multe ori
    • Parcurgere în ordine cronologică inversă până ajungem la destinația de pornire

8 - Compose - Navigarea

7

8 of 46

Componenta de navigație

  • 3 părți principale:
    • NavController
    • NavGraph
    • NavHost

​

  • NavController:
    • coordonatorul central
      • navigarea între destinații
      • stiva destinațiilor (back stack)
      • deep links

​

8 - Compose - Navigarea

8

9 of 46

Componenta de navigație

  • NavGraph:
    • o structură de date
    • toate destinațiile din aplicație și cum sunt interconectate

​

  • NavHost:
    • un container (composable) pentru destinația curentă
    • în timpul navigării se schimbă destinațiile din NavHost

8 - Compose - Navigarea

9

10 of 46

Ruta

  • Ruta este un string care corespunde unei destinații
    • Similar cum un URL corespunde unei pagini web
    • Identificator unic al unei destinații

​

  • Destinație = un composable sau un grup de composables
    • Ce vede utilizatorul pe ecran

​

​

8 - Compose - Navigarea

10

11 of 46

Rute - exemplu

  • Rutele unei aplicații => într-o clasă enum
    • Fiecare proprietate din enum poate returna un String
    • ex: CupcakeScreen.Start.name

8 - Compose - Navigarea

11

12 of 46

NavHost

12

13 of 46

NavHost

  • Un composable care afișează o destinație pe baza unei rute

13

14 of 46

NavHost - Parametri

  • navController
    • o instanță a clasei NavHostController
      • subclasă a lui NavController
    • folosit pentru a naviga între ecrane
      • metoda navigate()

8 - Compose - Navigarea

14

15 of 46

NavHost - Parametri

  • navController
    • într-un composable se obține folosind metoda rememberNavController()

​

  • startDestination = ruta pentru destinația de pornire

8 - Compose - Navigarea

15

16 of 46

NavHost - Exemplu

…

8 - Compose - Navigarea

16

17 of 46

Definirea rutelor în NavHost

  • Trailing lambda-ul lui NavHost
    • Definirea și maparea rutelor cu composables
    • Folosind funcția composable()

​

  • Funcția composable() este o extensie a NavGraphBuilder

8 - Compose - Navigarea

17

18 of 46

Definirea rutelor în NavHost

​

​

​

​

​

  • route = String-ul corespunzător rutei
  • trailing lambda
    • apelarea unui composable asociat rutei respective

8 - Compose - Navigarea

18

19 of 46

Definirea rutelor în NavHost

  • În trailing lambda-ul lui NavHost
    • câte un apel composable() pentru fiecare rută
  • Ex: pentru ruta Start se apelează StartOrderScreen

​

8 - Compose - Navigarea

19

20 of 46

NavHostController

20

21 of 46

NavHostController

  • Responsabil cu navigarea între rute/destinații

​

  • Logica navigației trebuie păstrată separat de UI

​

  • Lăsăm NavHost să gestioneze navigația

8 - Compose - Navigarea

21

22 of 46

NavHostController

​

​

​

​

  • Navigare către rută
  • Dacă ruta este mapată cu un anumit composable în NavHost => aplicația va afișa acel ecran

8 - Compose - Navigarea

22

23 of 46

navigate() - Exemplu

  • Tot in NavHost
    • Parametru pentru composable - expresie lambda care apelează navigate()

23

24 of 46

navigate()

  • Apăsare de buton => schimbare a rutei
    • apelăm navigate()

​

  • Apelare navigate() => ecranul nou în vârful stivei

​

  • Apăsăm Back
    • elimină ecranul din vârful stivei
    • navigare către ecranul anterior (de pe stivă)

8 - Compose - Navigarea

24

25 of 46

Saltul la ecranul de pornire

  • Dacă vrem implementăm acțiunea Cancel (anulare)
    • trebuie să facem pop la toate ecranele de pe stivă
    • să rămână pe stivă doar ecranul de pornire
    • folosind apelul popBackStack()
    • trebuie să resetăm și starea în ViewModel

8 - Compose - Navigarea

25

26 of 46

popBackStack()

  • Navighează la o rută de pe stivă prin eliminarea celor de deasupra

​

  • popBackStack() fără parametri
    • => elimină doar ultimul ecran

​

  • popBackStack()cu parametri
    • => întoarcere la un ecran specific de pe stivă

​

26

27 of 46

popBackStack()

  • route = ruta la care vrem să ne întoarcem
  • inclusive = un boolean
    • true => elimină și ruta specificată
    • false => elimină toate rutele până la cea specificată (fără ea)
      • ruta specificată vizibilă

8 - Compose - Navigarea

27

28 of 46

Cancel - exemplu

  • Resetează starea în ViewModel
  • Apelează popBackStack() cu ruta de pornire

8 - Compose - Navigarea

28

29 of 46

Cancel - exemplu

  • Apelarea funcției atunci când se apasă butonul Cancel

8 - Compose - Navigarea

29

30 of 46

Navigarea către

altă aplicație

30

31 of 46

ShareSheet

  • O componentă de UI care afișează opțiunile de share
    • Acoperă partea de jos a ecranului

​

  • Nu e parte din aplicație ci din OS
    • System UI
  • Nu este apelat de NavController
  • Apelat printr-un Intent

8 - Compose - Navigarea

31

32 of 46

Intent

  • O cerere către sistem pentru a efectua o anumită acțiune
    • Ex: pornire activități

​

  • Putem include date în Intent
    • opțiuni de share corespuzătoare pentru acel tip de date

8 - Compose - Navigarea

32

33 of 46

Intent

  • Un Intent include:
    • o acțiune (ex. ACTION_SEND)
    • un tip de date (ex. “text/plain”, “image/*”)
    • datele efective - adăugate cu funcții putExtra()

​

  • Apoi este apelat startActivity() cu Intent-ul ca argument

8 - Compose - Navigarea

33

34 of 46

Share - exemplu

  • Este creat Intent-ul care include subiectul și sumarul
  • Este apelat startActivity cu acel Intent

34

35 of 46

Share - exemplu

  • Funcția se va apela atunci când dăm click pe butonul Send

8 - Compose - Navigarea

35

36 of 46

Share -

exemplu

36

37 of 46

Actualizarea app bar în timpul navigării

37

38 of 46

Butoanele Back și Up

Butonul Back - în josul ecranului

  • oferit automat de sistemul de operare

​

Butonul Up - localizat în AppBar-ul aplicației

  • afișat explicit de programator

​

​

8 - Compose - Navigarea

38

39 of 46

Butoanele Back și Up

  • În contextul aplicației curente ambele:
    • navighează înapoi la ecranul anterior

​

  • Butonul Up nu duce la ieșirea din aplicație
    • nu trebuie afișat pe destinația de pornire

​

  • Butonul Back poate duce la ieșirea din aplicație

​

39

40 of 46

Butoanele Back și Up

  • Dacă navigăm spre aplicație printr-un deeplink
    • Back - revine la aplicația anterioară
    • Up - revine in stiva simulată

40

41 of 46

AppBar

  • Afișează titlul pentru ecranul curent
    • se schimbă la fiecare navigare

​

  • Butonul Up trebuie să apară doar dacă există un alt ecran pe stivă în spatele celui curent

8 - Compose - Navigarea

41

42 of 46

AppBar - exemplu

42

43 of 46

AppBar - exemplu

43

44 of 46

Bibliografie

8 - Compose - Navigarea

44

45 of 46

Bibliografie

8 - Compose - Navigarea

45

46 of 46

Cuvinte cheie

  • Jetpack Navigation
  • Ecran/Destinație
  • Stiva destinațiilor/Back stack
  • NavController
  • NavGraph
  • NavHost
  • Ruta
  • navigate()
  • popBackStack()
  • Intent
  • AppBar
  • Buton Up

​

8 - Compose - Navigarea

46

46