qu'est-ce que la bobine

Ouvrez github, puis recherchez bobine, vous pouvez voir l'introduction suivante

Coil est une bibliothèque de chargement d'images Android qui charge des images via des coroutines Kotlin.

Faites défiler le README, vous pouvez voir un tel paragraphe

Je dois dire que la bobine est vraiment parfumée

Comment compose-t-il les images d'affichage

Avant de charger les images réseau, vous devez encore jeter les bases et voir comment les images ordinaires sont affichées.

format d'image

En revenant sur les points de connaissance, les formats des images sont généralement divisés en bitmaps et en graphiques vectoriels

Bitmap : dans Android natif, utilisez Bitmap pour charger un bitmap. Le bitmap est composé de pixels et il sera déformé lorsqu'il sera agrandi.
Graphiques vectoriels : Les graphiques vectoriels sont dessinés selon des caractéristiques géométriques, et ne seront pas déformés après grossissement.En android natif, il est généralement chargé avec VectorDrawable ou une bibliothèque tierce (Glide/coil).

composer charge des images locales (Image)

Dans Android natif, ImageView est généralement utilisé pour afficher des images. Dans compose, Image est utilisé pour afficher une image, comme suit :

@Composable
fun ShowLauncher() {
    Image(painter = painterResource(id = R.drawable.jin), contentDescription = "")
}
复制代码

Twisted la question, Jhin est si beau

Explication des paramètres d'image

Paramètre obligatoire

painter : utilisez painterResource pour créer un objet painter, qui peut être ImageBitmap (classe bitmap de compose) / ImageVector (classe vector de compose), le type spécifique est déterminé par le format de l'image elle-même.
contentDescription : pour le mode d'accessibilité

paramètres non essentiels

alignement : définit la disposition de l'image dans la mise en page parent
contentScale : définit les règles de mise à l'échelle
alpha : transparence
colorFilter : utilisé pour modifier la couleur de l'image

Taille de l'image

Dans le développement natif Android, la taille générale peut être définie de trois manières, qui sont des valeurs spécifiques / wrap / match. Dans compose, les correspondants sont les suivants :

Valeur spécifique --> xxx.dip
wrap --> la valeur par défaut est wrap
match -> fillMaxSize / fillMaxHeight / fillMaxWidth

Essayons, agrandissons l'image sur tout l'écran

@Composable
fun ShowLauncher() {
    Image(
        painter = painterResource(id = R.drawable.jin),
        contentDescription = "",
        modifier = Modifier.fillMaxWidth()
    )
}
复制代码

emmm..., il y a des changements, mais cela ne semble pas correspondre à nos attentes élevées. À ce stade, si la règle de contentScale est remplacée par FillHeight, le problème est résolu :

@Composable
fun ShowLauncher() {
    Image(
        painter = painterResource(id = R.drawable.jin),
        contentDescription = "",
        modifier = Modifier.fillMaxHeight(),
        contentScale = ContentScale.FillHeight
    )
}
复制代码

Veuillez profiter du gros plan de Jhin ici

Charger des images Web

Comme mentionné précédemment, coil prend déjà en charge le chargement d'image de compose, et le support de coil est aussi simple que jamais, comme suit :

importation de dépendance

implementation("io.coil-kt:coil-compose:2.0.0")
复制代码

Notez ici qu'il est incompatible avec les packages qui doivent être importés nativement

utiliser

@Composable
fun ShowLauncher() {
    AsyncImage(
        model = "https://pic.iyingdi.com/post/content/2022/05/14/16325/ed50f6b7-8654-44ff-8762-7596c40928a7.png?imageMogr2/format/jpg|imageMogr2/quality/70",
        contentDescription = "")
}
复制代码

modèle : adresse de l'image
contentDescription : utilisation du mode d'accessibilité

À ce stade, l'image réseau est chargée avec succès dans compose

coil - compose est le meilleur partenaire pour charger des images web