Jetpack Compose Basics – Jak načítat obrázky z Bitmapy, Vectoru, Painteru nebo URL pomocí funkce Coil

V Jetpack Compose jsou ve výchozím nastavení k dispozici 3 typy image composables. První bere jako parametr bitmapu, druhý vektor a poslední painter. Tyto funkce mají mnoho společných parametrů.

@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 používaný v accesibility k popisu obsahu obrázku
• modifier – slouží k provádění změn z caller side
• alignment – slouží k umístění obrázku v daných mezích
• contentScale – slouží k určení poměru stran. Možné hodnoty jsou None, FillBounds, Inside, Fit, FillWidth, FillHeight nebo Crop.
• alpha – volitelná neprůhlednost
• colorFilter – při vykreslení se na obrázek použije zadaný filtr

Načtení obrázku z Bitmapy

Tento úryvek kódu se načte a zobrazí danou bitmapu.

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

Načítání obrázku z Vectoru

Tento úryvek kódu se načte a zobrazí daný vektor, např. ikonu.

Načtení obrázku z Painteru

To je nejzajímavější část. Bitmapa i vektor používají tento typ composables na pozadí. Existuje mnoho předdefinovaných painterů, např. ColorPainter, který kreslí definovanou barvou v mezích.

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

Načítání obrázku z URL

Pravděpodobně nemáte všechny obrázky použité v aplikaci uloženy lokálně. Pokud vaše aplikace pracuje s API, které vám odesílá adresu URL obrázku, budete ji muset načíst z internetu. Tady byste měli použít kteroukoli z dostupných knihoven.

Krátce před vydáním první stabilní verze Jetpack Compose oznámili vývojáři programu Coil image loader, že jejich knihovna plně spolupracuje s Compose. Než se objevila tato možnost, nejlepším řešením bylo použití knihovny Accompanist.

Coil má spoustu skvělých funkcí a na pozadí implementuje i rozhraní API pro paintery.

Jak použít Coil k načtení obrázku ze serveru?

Co když chceme tento typ „rozložení“ v aplikacích, kde získáváme obrázky jako URL? Je to vážně jednoduché, stačí si zapamatovat painter a hodit ho jako parametr 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
}

Již dříve jsme zmínili, že Coil má spoustu skvělých funkcí, např. škálování, transformace, ukládání do cache, bitmap polling..., v podstatě všechno, co budete potřebovat. Jejich použití je snadné, stačí zavolat požadovanou funkci do Builderu. Ty používáme větš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 se teď načítají téměř bez námahy.

Další články ze série Jetpack Compose Basics:

• Vyzkoušejte Scaffold a sestavte několik materiálových komponent se správným rozložením!
• Naučte se správně používat Snackbar
• Jak používat text field composables v zájmu splnění specifikace Material designu
• Jak používat Backdrop Scaffold composable
• Hledáte alternativu k menu nebo dialogům? Vyzkoušejte Modal Bottom Sheet
• Jak používat a vytvořit vlastní CompositionLocal