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