1 of 29

Tehnici avansate pentru

dezvoltarea aplicațiilor mobile

1 - Compose - Introducere

2 of 29

Jetpack Compose

  • Un toolkit declarativ, modern pentru construirea UI-urilor pe Android
    • Mai puțin cod, unelte puternice, API-uri intuitive
    • Folosit pentru definirea funcțiilor Composable

​

1 - Compose - Introducere

2

3 of 29

Programarea UI-ului cu View-uri

  • Metoda veche - arbore de widget-uri UI
  • View-urile trebuie modificate manual când utilizatorul interacționează cu aplicația
  • Modificarea manuală duce la erori
  • Complexitatea gestiunii software-ului crește odată cu numărul de view-uri

1 - Compose - Introducere

3

4 of 29

Programarea declarativă a UI-ului

  • Tranziția industriei spre un model de UI declarativ

​

  • Compose = framework de UI declarativ

​

  • Ecranul este desenat complet
  • Părți din UI sunt redesenate în mod automat
    • doar care conțin date care s-au modificat

​

  • Nu este nevoie de actualizare manuală

​

1 - Compose - Introducere

4

5 of 29

Funcții Composable

  • UI-ul include o serie de funcții Composable

​

  • Primesc date (parametri) și generează o parte din UI

​

  • Adnotate cu @Composable
    • Indică compilatorului Compose că funcția va converti date în UI

​

  • Pot apela alte funcții Composable

​

1 - Compose - Introducere

5

6 of 29

Funcții Composable

  • Nu returnează nimic pentru că generează UI

​

  • Sunt idempotente:
    • se comportă la fel dacă sunt apelate cu același argument
    • nu folosesc alte valori (ex. var globale, valori random)

​

  • Nu au efecte secundare: nu modifică proprietăți sau variabile globale

1 - Compose - Introducere

6

7 of 29

Paradigma declarativă

  • Logica aplicației oferă date funcției composable de nivel superior
  • Funcția apelează alte composables cu datele respective
  • Datele sunt propagate de la nivel înalt, în jos în ierarhie

1 - Compose - Introducere

7

8 of 29

Paradigma declarativă

  • Când utilizatorul interacționează cu aplicația se generează evenimente (ex. onClick)
  • Logica aplicației reacționează și schimbă starea (datele)
  • Când se schimbă starea, funcțiile Composable sunt apelate din nou cu datele noi (recompoziție)

8

9 of 29

Conținut dinamic

  • Funcțiile composable implementate în Kotlin
  • Conținutul se poate genera în mod dinamic
    • Se pot folosi condiționale, bucle, funcții helper

​

​

​

​

​

  • Compose oferă flexibilitate

1 - Compose - Introducere

9

10 of 29

Numele Funcțiilor Composable

  • În Pascal case - fiecare cuvant începe cu majusculă

​

  • Un substantiv
    • eventual cu un adjectiv descriptiv

​

  • NU verb, adjectiv, adverb

​

  • Exemplu: SmallButton(), RoundIcon()

​

1 - Compose - Introducere

10

11 of 29

Numele Funcțiilor Composable

1 - Compose - Introducere

11

12 of 29

Adnotări

  • Atașează codului informații suplimentare
  • De ajutor pentru tool-uri (Compose) și pentru dezvoltatori

1 - Compose - Introducere

12

13 of 29

Adnotări

Adnotare fără parametri

​

​

​

​

Adnotare cu parametru - pentru afișarea fundalului

1 - Compose - Introducere

13

14 of 29

Ierarhia UI

  • O componentă UI părinte poate conține una sau mai multe componente copil

​

  • Un copil poate conține la rândul lui alte componente

1 - Compose - Introducere

14

15 of 29

Funcții Composable de bază

  • Column, Row, Box

​

  • Părinți pentru alte funcții Composable

1 - Compose - Introducere

15

16 of 29

Expresie lambda

  • Tipul funcție
  • Putem pasa o funcție ca parametru al unei alte funcții:

​

​

​

​

​

​

​

  • Expresie lambda = literal de tipul funcție
    • { println(“Hello”) }

1 - Compose - Introducere

16

17 of 29

Sintaxa trailing lambda

  • Când pasăm o funcție ca parametru, se poate muta conținutul funcției (între acolade) la sfarșit

​

  • Funcția Row are parametrul content care descrie elementele copii:

1 - Compose - Introducere

17

18 of 29

Parametrul modifier

  • Funcțiile Composable - parametru opțional modifier
    • Descrie cum ar trebui elementul UI sa fie afișat
    • Cum să se comporte în cadrul părintelui
    • Dimensiune, fundal, padding, comportament
    • Elementul este: clickable, scrollable, draggable, zoomable

1 - Compose - Introducere

18

19 of 29

Aranjament și aliniere

  • Poziționarea elementelor copil în layout:
    • în modifier - proprietățile de aranjament și aliniere

​

  • Aranjament = când dimensiunea layout-ului este mai mare decât suma dimensiunilor copiilor săi

​

  • Column: verticalArrangement și horizontalAlignment

1 - Compose - Introducere

19

20 of 29

Aranjarea pe verticală într-o coloană

20

21 of 29

Aranjarea pe orizontală într-o linie

1 - Compose - Introducere

21

22 of 29

Padding

  • Fiecare Composable poate să aibă padding
  • Se specifică prin modifier

1 - Compose - Introducere

22

23 of 29

Padding

1 - Compose - Introducere

23

24 of 29

Resursele unei aplicații

  • Fișiere, imagini, șiruri de caractere, instrucțiuni de animație

​

  • Recomandare: separea resurselor de codul sursă

​

  • La runtime - se folosesc resursele pentru configurația curentă
    • dimensiunea ecranului, limba

1 - Compose - Introducere

24

25 of 29

Resursele unei aplicații

  • directorul /res
    • /drawable - imagini
    • /mipmap - iconițe de launcher
    • /values - string-uri

1 - Compose - Introducere

25

26 of 29

Resursele unei aplicații

  • Clasa R
    • generată automat
    • conține toate ID-urile resurselor din proiect

​

  • Resursele accesate în cod folosind ID-urile din clasa R

1 - Compose - Introducere

26

27 of 29

Resursele unei aplicații

1 - Compose - Introducere

27

28 of 29

Bibliografie

1 - Compose - Introducere

28

29 of 29

Cuvinte cheie

  • Jetpack Compose
  • Funcții Composable
  • Paradigma declarativă
  • Pascal case
  • Adnotare
  • Ierarhia UI
  • Row, Column, Box
  • Sintaxa trailing lambda
  • Modifier
  • Padding
  • Resursele aplicației

1 - Compose - Introducere

29

29