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.

@Composable
fun Image(
    //bitmap or vector or painter
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
)

• 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.

val bitmap = getBitmapFromYourSource()
Image(
    bitmap = bitmap, 
    contentDescription = "Cat"
)

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.

Image(
    painter = ColorPainter(Color.Yellow), 
    contentDescription = "Yellow rectangle"
)

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.

Row(
    modifier = Modifier.padding(16.dp),
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    //Important image loading part
    //Remembering of painter
    val painter = rememberImagePainter(data = cat.photoUrl)
	
    Image(
       modifier = Modifier
           .size(100.dp)
           .clip(RoundedCornerShape(16.dp)),
       //Use painter in Image composable
       painter = painter,
       contentDescription = "Cat"
    )
    //Rest of compose code
}

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.

val painter = rememberImagePainter(
    data = url,
    builder = {
        crossfade(true) //Crossfade animation between images
        placeholder(R.drawable.ic_image_loading) //Used while loading
        fallback(R.drawable.ic_empty) //Used if data is null
        error(R.drawable.ic_empty) //Used when loading returns with error
    }
)

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