1 of 52

Tehnici avansate pentru

dezvoltarea aplicațiilor mobile

2 - Compose - Layout, funcții modifier, elemente UI

2 of 52

Layout

2

3 of 52

Transformarea stării în UI

  • Compose transformă starea în elemente UI prin:
    • Compoziția elementelor
    • Aranjarea (layout) elementelor
    • Desenarea elementelor

​

2 - Compose - Layout, funcții modifier, elemente UI

3

4 of 52

Layout-uri predefinite

  • Diferite modalități de aranjare a elementelor UI

2 - Compose - Layout, funcții modifier, elemente UI

4

5 of 52

Column

  • Column - plasează elementele vertical pe ecran

2 - Compose - Layout, funcții modifier, elemente UI

5

6 of 52

Row

  • Row - plasează elementele orizontal pe ecran

6

7 of 52

Box

  • Box - pune elementele unul deasupra celuilalt

7

8 of 52

Aranjare și aliniere

  • Compose permite folosirea layout-urilor imbricate în mod eficient
    • În contrast cu Android Views

​

  • Pentru aranjarea și alinierea elementelor, putem seta parametri:
    • pentru Row:
      • horizontalArrangement și verticalAlignment
    • pentru Column:
      • verticalArrangement și horizontalAlignment

2 - Compose - Layout, funcții modifier, elemente UI

8

9 of 52

Aranjarea pe verticală într-o coloană

9

10 of 52

Aranjarea pe orizontală într-o linie

1 - Compose - Introducere

10

11 of 52

Aranjare și aliniere - exemplu

11

12 of 52

Funcții modifier

12

13 of 52

Parametrul modifier

  • Permite configurarea unui Composable
    • Dimensiunea
    • Aspectul
    • Comportamentul
    • Plasarea
    • Adăugarea etichetelor de accesibilitate
    • Procesarea inputului de la utilizator
    • Interacțiuni de nivel înalt
      • clickable, scrollable, draggable, zoomable

2 - Compose - Layout, funcții modifier, elemente UI

13

14 of 52

Funcții modifier

  • Unul sau mai multe funcții modifier
  • Le putem lega împreună într-un lanț (chain)

14

15 of 52

Ordinea funcțiilor modifier

  • Ordinea funcțiilor modifier e importantă

​

  • Fiecare funcție face modificări asupra Modifier-ului returnat de funcția anterioară
    • => modificările se vor face în ordinea specificată în cod

2 - Compose - Layout, funcții modifier, elemente UI

15

16 of 52

Ordinea funcțiilor - exemplu

2 - Compose - Layout, funcții modifier, elemente UI

16

17 of 52

Ordinea funcțiilor - exemplu

  • Padding-ul a fost aplicat după clickable
    • => toata zona e clickable, inclusiv padding-ul

17

18 of 52

Ordinea funcțiilor - exemplu

  • Inversăm padding și clickable

18

19 of 52

Ordinea funcțiilor - exemplu

  • Acum padding-ul nu mai răspunde la click

2 - Compose - Layout, funcții modifier, elemente UI

19

20 of 52

Funcțiile modifier built-in - size

  • size - specifică dimensiunea
  • dacă nu satisface constrângerile de la părinte nu va fi respectată

2 - Compose - Layout, funcții modifier, elemente UI

20

21 of 52

Funcțiile modifier built-in - requiredSize

  • requiredSize - setează această dimensiune indiferent de constrângerile venite de la părinte

21

22 of 52

Funcțiile modifier built-in - fillMaxHeight

  • fillMaxHeight
    • Copilul poate să umple toată înălțimea permisă de părinte
    • Similar fillMaxWidth și fillMaxSize

22

23 of 52

Funcțiile modifier built-in - padding

  • padding - adaugă spațiu liber în jurul elementului
  • paddingFromBaseline
    • Specifică spațiul între partea de sus a layout-ului până la baza textului

23

24 of 52

Funcțiile modifier built-in - offset

  • offset:
    • Mută relativ la poziția originală
    • Pe x și pe y
    • Pozitiv sau negativ
    • Nu modifică dimensiunea Composable-ului
      • padding-ul modifică dimensiunea

2 - Compose - Layout, funcții modifier, elemente UI

24

25 of 52

Funcțiile modifier built-in - offset

25

26 of 52

Funcțiile modifier built-in - matchParentSize

  • matchParentSize
    • Se aplică doar pentru Box (valabil doar in BoxScope)
    • Copilul va avea aceeași dimensiune ca părintele

26

27 of 52

Funcțiile modifier built-in

  • Care este diferența între fillMaxSize și matchParentSize?
    • fillMaxSize extinde părintele cât îi permite spațiul

​

​

​

​

    • matchParentSize umple spațiul părintelui fără să-l extindă

2 - Compose - Layout, funcții modifier, elemente UI

27

28 of 52

Funcțiile modifier built-in - weight

  • weight - doar la Row și Column
    • Pondere în cadrul părintelui
    • Imaginea va avea un spațiu de 2 ori mai mare decât coloana

28

29 of 52

Elemente de UI

29

30 of 52

Button

  • Button:
    • Element UI care permite utilizatorului să declanșeze o anumită acțiune

​

  • Tipuri de butoane:

​

​

​

  • Tipul de bază este cel Filled

​

2 - Compose - Layout, funcții modifier, elemente UI

30

31 of 52

Button

  • Primește o funcție onClick ca parametru

2 - Compose - Layout, funcții modifier, elemente UI

31

32 of 52

Button - parametri

  • onClick: funcția apelată când apăsăm pe buton
  • enabled: butonul este activ sau nu
  • colors: o instanță ButtonColors - culorile butonului
  • contentPadding: padding-ul din interiorul butonului
  • modifier: modifier-ul care este aplicat pe buton
  • border: o margine în jurul butonului
  • etc.

2 - Compose - Layout, funcții modifier, elemente UI

32

33 of 52

Image

  • Pentru a afișa un element grafic pe ecran
    • O imagine (PNG, JPEG, WEBP)
    • O resursă vectorială

​

  • painterResource() pentru încărcarea de pe disc
  • contentDescription pentru accesibilitate
    • TalkBack citește descrierea

2 - Compose - Layout, funcții modifier, elemente UI

33

34 of 52

Text

  • Afișarea unui text din resurse
  • Încărcat cu stringResource()
  • String-urile sunt stocate în string.xml

34

35 of 52

Text

  • Mulți parametri pentru a configura stilul conținutului

​

  • Exemple:

​

35

36 of 52

Starea în Composable

36

37 of 52

Starea într-un Composable

  • Composables nu au stare în mod implicit
    • Nu rețin nicio valoare, la recompoziție se resetează valorile

​

  • Stocarea permanentă a unui obiect în Composable
    • Folosind funcția Composable remember

37

38 of 52

Starea într-un Composable

  • by - delegă gestiunea
  • remember - stocare obiect în Composable
  • mutableStateOf() - obiect observabil
    • Dacă se schimbă valoarea lui text => recompoziție

38

39 of 52

TextField

  • Implementare din Material Design
  • Modificarea variabilei de stare text => recompoziție

​

Curs 2 - Kotlin - Condiționale, bucle și nullability

39

40 of 52

TextField - salvarea input-ului

  • Variabila text va fi salvată în Composable

​

  • Va fi modificată în onValueChange - când utilizatorul introduce input

​

  • Valoarea afișată de TextField va fi text

​

  • La fiecare modificare a lui text se va declanșa o recompoziție

​

40

41 of 52

OutlinedTextField

41

42 of 52

TextField - exemplu

42

43 of 52

TextField - exemplu

43

44 of 52

TextField - iconiță

  • Putem adăuga o iconiță la TextField

​

  • De exemplu un TextField cu o iconiță de căutare

44

45 of 52

TextField - iconiță

  • Parametrul leadingIcon reprezintă iconița
  • Se poate încărca din resurse

45

46 of 52

Switch

  • Modifică starea unui singur element
    • dezactivat sau activat

​

  • Un switch include:
    1. track
    2. thumb
    3. icon (opțional)

46

47 of 52

Switch

  • Utilizatorul poate trage de thumb înainte și înapoi
  • Sau poate apăsa pe switch

47

48 of 52

Switch - parametri

  • checked: starea switch-ului (boolean)
  • onCheckedChange: callback apelat când se schimbă starea switch-ului
  • enabled: switch-ul este activat sau nu
  • colors: culorile folosite pentru switch
  • thumbContent: pentru a specifica iconița

48

49 of 52

Switch - exemplu

  • Salvăm starea (obiectul observabil) în Composable

49

50 of 52

Bibliografie

2 - Compose - Layout, funcții modifier, elemente UI

50

51 of 52

Bibliografie

2 - Compose - Layout, funcții modifier, elemente UI

51

52 of 52

Cuvinte cheie

  • Layout
  • Column
  • Row
  • Box
  • Aranjare și aliniere
  • Funcții modifier
  • Button
  • Image
  • Text
  • TextField
  • Switch

​

2 - Compose - Layout, funcții modifier, elemente UI

52

52