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