1 of 32

Tehnici avansate pentru

dezvoltarea aplicațiilor mobile

4 - Compose - Liste, Card, Iconițe

2 of 32

Liste

2

3 of 32

Column

  • Aplicații care afișează colecții de elemente
  • În mod implicit Column/Row nu sunt scrollable

​

​

​

​

​

​

​

  • Column se poate face scrollable prin modifier-ul verticalScroll

​

​

4 - Compose - Liste, Card, Iconițe

3

4 of 32

Liste lazy

  • Column cu foarte multe elemente => probleme de performanță
    • Sunt compuse toate elementele chiar dacă nu sunt vizibile

​

  • Soluția:
    • LazyColumn - scrolling vertical
    • LazyRow - scrolling orizontal
    • compun și afișează doar elementele care sunt vizibile

4 - Compose - Liste, Card, Iconițe

4

5 of 32

Liste lazy

  • Listele lazy
    • includ un bloc LazyListScope care oferă DSL
    • DSL = domain specific language
    • include funcții pentru descrierea elementelor din layout
      • item() - adaugă un singur element
      • items(Int) - adaugă mai multe elemente

​

  • Lista lazy
    • responsabilă să adauge fiecare element
    • în funcție de poziția de scroll

​

4 - Compose - Liste, Card, Iconițe

5

6 of 32

LazyColumn - exemplu

4 - Compose - Liste, Card, Iconițe

6

7 of 32

LazyColumn - extensii

  • Funcții extensie care permit adăugarea unei colecții de elemente (ex. List)
    • Funcția items
      • messages este o Lista de elemente
      • Un element din lista este message

4 - Compose - Liste, Card, Iconițe

7

8 of 32

LazyColumn - exemplu

  • Lista este de tipul List<Affirmation>
  • Pentru fiecare element din listă se afișează un Card

4 - Compose - Liste, Card, Iconițe

8

9 of 32

Lazy grid

  • Afișarea elementelor într-un grid:
    • LazyVerticalGrid
      • scrolling vertical
    • LazyHorizontalGrid
      • scrolling orizontal

​

​

  • LazyGridScope
    • DSL similar cu cel de la liste

4 - Compose - Liste, Card, Iconițe

9

10 of 32

Lazy grid

  • LazyVerticalGrid
    • parametru columns
    • controlează cum elementele formează coloane

​

  • LazyHorizontalGrid
    • parametru rows
    • controlează cum elementele formează linii

​

  • Iau valoarea GridCells.Adaptive sau GridCells.Fixed

4 - Compose - Liste, Card, Iconițe

10

11 of 32

LazyVerticalGrid

  • GridCells.Adaptive
    • Folosit pentru a seta lățimea unei coloane
    • Cât mai multe coloane posibil
    • Lățimea rămasă este redistribuită
    • Mod adaptiv de a calcula numărul de coloane
    • Adaptare la dimensiuni diferite de ecran

​

  • GridCells.Fixed - număr fix de coloane

4 - Compose - Liste, Card, Iconițe

11

12 of 32

LazyVerticalGrid - exemplu

4 - Compose - Liste, Card, Iconițe

12

13 of 32

Padding

  • Padding în jurul colecției de elemente
    • parametrul contentPadding

4 - Compose - Liste, Card, Iconițe

13

14 of 32

Spațiu între elemente

4 - Compose - Liste, Card, Iconițe

14

15 of 32

Spațiu între elemente

  • Număr fix de coloane = 2
  • Spațiu de 16.dp între elemente pe orizontală și verticală

4 - Compose - Liste, Card, Iconițe

15

16 of 32

Card

16

17 of 32

Card

  • Este un Composable

​

  • Un container Material Design

​

  • Un element de UI care reprezintă o anumită informație

​

  • Poate să includă text, imagini, iconițe

4 - Compose - Liste, Card, Iconițe

17

18 of 32

Card - exemplu simplu

  • Variantă minimală de Card cu text

4 - Compose - Liste, Card, Iconițe

18

19 of 32

Card - exemplu complex

4 - Compose - Liste, Card, Iconițe

19

20 of 32

Iconițe de lansare

20

21 of 32

Densitatea ecranului

  • Câți pixeli per inch sau dots per inch (dpi) are ecranul

​

  • Densitate medie (mdpi) - 160dpi

​

  • Densitate extrem de mare (xxxhdpi) - 640 dpi

4 - Compose - Liste, Card, Iconițe

21

22 of 32

Iconița de lansare

  • Iconița de lansare aplicației
    • pe ecranul principal, în lista aplicațiilor, în Settings
    • diferențiere, aspect

​

  • În app > src > main > res > mipmap-*
    • în foldere separate în funcție de densitatea ecranului
    • ex: mipmap-mdpi

4 - Compose - Liste, Card, Iconițe

22

23 of 32

Folderele mipmap

  • Density bucket

​

  • Pe baza densității ecranului =>
    • resursa din cel mai apropiat bucket cu densitate mai mare
    • apoi scalează în jos

4 - Compose - Liste, Card, Iconițe

23

24 of 32

Folderele mipmap

  • mdpi - resurse pentru medium-density screens (~160 dpi)
  • hdpi - resurse pentru high-density screens (~240 dpi)
  • xhdpi - resurse pentru extra-high-density screens (~320 dpi)
  • xxhdpi - resurse pentru extra-extra-high-density screens (~480 dpi)
  • xxxhdpi - resurse pentru extra-extra-extra-high-density screens (~640 dpi)
  • nodpi - resurse care nu trebuie scalate indiferent de densitatea ecranului
  • anydpi - resurse care scalează cu orice densitate

4 - Compose - Liste, Card, Iconițe

24

25 of 32

Iconițe adaptive

  • De la Android 8.0 (API 26) - suport pentru iconițe adaptive
    • Flexibilitate și efecte vizuale
    • 2 layere: background și foreground

​

​

  • Exemplu:
    • Background = grid albastru cu alb
    • Foreground = iconiță albă
    • Mască circulară => iconiță rotundă

4 - Compose - Liste, Card, Iconițe

25

26 of 32

Iconițe adaptive

  • Declarate în foldere mipmap*-26 (de la API 26 in sus)
  • În ic_launcher.xml

​

​

​

​

​

  • ic_launcher_foreground.xml și ic_launcher_background.xml sunt vectoriale

4 - Compose - Liste, Card, Iconițe

26

27 of 32

Vector vs. bitmap

  • Imaginile vectoriale și bitmap descriu un element grafic

​

  • Imaginea bitmap
    • Informația de culoare pentru fiecare pixel

​

  • Grafică vectorială
    • Instrucțiuni de desenare a formelor, punctelor, liniilor, curbelor, împreună cu informația de culoare
    • Poate fi scalată pentru orice densitate de ecran sau dimensiune fără a pierde calitate

4 - Compose - Liste, Card, Iconițe

27

28 of 32

Grafica vectorială în Android

  • Un drawable vectorial
  • Definit într-un fișier xml
  • Se va defini imaginea o singură dată, nu pe bucket-uri

​

  • Iconițele sunt făcute ideal cu grafică vectorială

​

  • Fotografiile sunt reprezentate ca bitmap

4 - Compose - Liste, Card, Iconițe

28

29 of 32

Iconițe de lansare

  • Dezvoltatorii de dispozitive (OEM)
    • diferite forme de iconițe - diferite măști
    • recomandat modelul cu cele 2 layere peste care OEM aplică o mască

29

30 of 32

Iconițe de lansare

  • De la Android 8 în sus se pot folosi iconițe adaptive
    • drawable vectorial (background + foreground)
    • masca

​

  • Înainte de Android 8 se folosesc iconițe legacy
    • imagini bitmap în folderele mipmap

4 - Compose - Liste, Card, Iconițe

30

31 of 32

Bibliografie

4 - Compose - Liste, Card, Iconițe

31

32 of 32

Cuvinte cheie

  • Column
  • Row
  • Liste lazy
  • LazyColumn
  • LazyRow
  • DSL
  • Grid lazy
  • LazyVerticalGrid
  • LazyHorizontalGrid
  • Card
  • Iconițe adaptive
  • Grafică vectorială

​

4 - Compose - Liste, Card, Iconițe

32

32