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