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

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.

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:

• Vyskúšaj Scaffold a zostav niekoľko materiálových komponentov so správnym rozložením!
• Nauč sa používať Snackbar správne
• Ako používať text field composables pre splnenie Material design špecifikácie
• Ako používať Backdrop Scaffold composable
• Hľadáš alternatívu k menu alebo dialógom? Skús Modal Bottom Sheet
• Ako používať a vytvoriť vlastný CompositionLocal