Android

Jetpack Compose Basics - Ako načítať obrázky z Bitmapy, Vectoru, Painteru alebo z URL pomocou funkcie Coil

Obrázky a ikony sú zásadnou súčasťou používateľského rozhrania vašej aplikácie Sú využívané hlavne na vizuálne vyjadrenie akcií. Pomáhajú vytvoriť celkový dojem vašej aplikácie a urobiť ju jedinečnou. Ako s nimi pracovať v Jetpack Compose? Poďme sa na to pozrieť!

Peter Šuly4 Oct 2021

V Jetpack Compose sú k dispozícii defaultne 3 typy image composables. Prvý berie ako parameter bitmapu, druhý vektor a posledný painter. Tieto funkcie majú mnoho spoločných parametrov.

  • contentDescription - text využívaný v accesibility na popísanie obsahu obrázka
  • modifier - slúži ku zmenám z caller side
  • alignment - slúži na umiestnenie obrazu v daných medziach
  • contentScale - slúži na určenie aspect ratia. Možné hodnoty sú None, FillBounds, Inside, Fit, FillWidth, FillHeight alebo Crop
  • alpha - voliteľná nepriehľadnosť
  • colorFilter -pri vykreslení sa na obrázok použije zadaný filter

Načítavanie obrázka z Bitmapy

Tento snippet kódu sa načíta a zobrazí danú bitmapu.

Načítavanie obrázka z Vectoru

Tento snippet kódu sa načíta a zobrazí daný vektor, napr. ikona.

Načítavanie obrázka z Paintru

Toto je najzaujímavejšia časť. Bitmapa aj vektor používajú tento typ composables na pozadí. Existuje mnoho preddefinovaných paintrov, napr. ColorPainter, ktorý kreslí definovanú farbu v medziach.

Načítavanie obrázka z URL

Pravdepodobne nemáte všetky obrázky použité v aplikácii uložené lokálne. Ak vaša aplikácia pracuje s API, ktoré vám posiela adresu URL obrázku, budete ju musieť načítať z internetu. Tu by ste mali použiť ktorúkoľvek z dostupných knižníc.

Krátko pred vydaním prvej stabilnej verzie Jetpack Compose oznámili vývojári programu Coil image loader, že ich knižnica plne funguje s Compose. Pred touto možnosťou bolo najlepším riešením použiť knižnicu Accompanist.

Coil má mnoho skvelých funkcií a na pozadí implementuje aj API pre painters.

Ako používať Coil na načítanie obrázku zo serveru?

Čo keď chceme tento typ „rozloženia" v aplikáciách, kde získavame obrázky ako URL? Je to skutočne jednoduché, zapamätajte si painter a vhoďte ho ako parameter do Image composable.

Happy kitty with photo

Predtým sme spomenuli, že Coil má mnoho skvelých funkcií, napr. škálovanie, transformácie, ukladanie do cache, bitmap polling ..., v podstate všetko, čo budete potrebovať. Ich použitie je jednoduché, iba zavolajte požadovanú funkciu do Builderu. Tieto používame väčšinu času.

Voilà, obrázky sa teraz načítavajú takmer bez námahy.

Ďalšie články zo série Jetpack Compose Basics:

Peter Šuly4 Oct 2021