Téléchargement d’images vers Jetpack Compose en utilisant Glide, Coil et Fresco

UN La nouvelle boîte à outils d’interface utilisateur moderne, Jetpack Compose, a été annoncée par Google il y a plus d’un an et a finalement été publiée 1.0 stable en juillet. De plus, de nombreux types d’entreprises comme Twitter, Lyft, Square ont déjà adapté Jetpack Compose à leurs niveaux de production car il est très intuitif, puissant et simplifie toute la structure de l’interface utilisateur si nous l’utilisons bien. Ce nouveau paradigme de framework d’interface utilisateur changera beaucoup de choses dans notre avenir, nous devons également faire plus d’efforts pour migrer les éléments liés à l’interface utilisateur précédents, comme le chargement d’images d’URL.

Lorsque Google a annoncé Jetpack Compose 1.0.0-alpha01, je me demandais comment migrer tous les systèmes précédents liés à l’interface utilisateur vers les projets Jetpack Compose ? Il suffit de rechercher des images à partir d’une URL (réseau) et de dessiner sur le Image composable nécessiterait un processus complètement différent qu’auparavant. A cette époque, le compagnon de Chris Banes a été libéré et beaucoup m’ont inspiré dans la bibliothèque. La bibliothèque a pris en charge Coil (Glide a été pris en charge plus tard), mais je voulais utiliser et fournir autant d’options que possible pour choisir les bibliothèques de chargement d’images. Parce que la migration de tous les systèmes de chargement d’images (comme Glide to Coil) peut causer beaucoup de problèmes aux développeurs. Et Landscapist a été créé pour prendre en charge de nombreuses options telles que Glide, Coil et Fresco pour Jetpack Compose.

Landscapist est une bibliothèque de chargement d’images pour Jetpack Compose. Il y a trois options ; Glide, Coil et Fresh. Par conséquent, nous pouvons choisir selon nos préférences. Cette bibliothèque prend également en charge le chargement d’animations telles que l’effet de lueur et la révélation circulaire. Si vous souhaitez rechercher d’autres utilisations de cette bibliothèque, vous pouvez référencer des projets de démonstration qui utilisent Landscapist pour dessiner des images.

Nous pouvons charger et dessiner des images à partir d’une URL en utilisant un GlideImage Fonction composable comme ci-dessous. C’est très simple.

Nous pouvons également fournir des attributs de base comme le Image composable comme contentScale et modifier.

Si nous voulons afficher un espace réservé (chargement) et une image d’erreur basée sur l’état de la recherche, nous pouvons utiliser le placeHolder et error attributs comme celui ci-dessous.

Différents composables en fonction des états demandeurs

Parfois, nous devons implémenter une interface utilisateur différente en fonction des états de demande. Fondamentalement, nous pouvons implémenter différents composables en fonction des états de chargement/succès/erreur. L’exemple suivant montre un indicateur lorsque l’état demandeur est en cours de chargement et affichera un Text composable en cas d’échec. Si la demande aboutit, une image chargée s’affichera.

Si nous voulons personnaliser votre hit combinable, nous pouvons également personnaliser le résultat de l’interface utilisateur du hit comme indiqué ci-dessous. O success lambda entre dans un état de demande, et nous pouvons obtenir un ImageBitmap de l’instance étatique.

LocalGlideRequestBuilder

CompositionLocal est l’un des concepts les plus utilisés dans Jetpack Compose, et la référence officielle d’Android le décrit comme suit.

Compose transmet les données à travers l’arbre de composition explicitement via des paramètres aux fonctions composables. C’est souvent le moyen le plus simple et le meilleur de faire circuler les données dans l’arborescence. CompositionLocals peut être utilisé comme un moyen implicite de faire circuler les données dans une composition.

Le paysagiste soutient également la CompositionLocal donner du goût RequestBuilder (l’épine dorsale de la requête sur Glide) dans le flux de données correspondant.

La bobine est presque la même que Glide, elle utilise CoilImage plutôt que GlideImage.

Nous pouvons également fournir de nombreux types d’attributs personnalisés comme Glide.

LocalCoilImageLoader

Il prend également en charge la CompositionLocal donner du goût ImageLoader dans la hiérarchie combinable.

Fresh est un peu différent du précédent, il faut initialiser un pipeline d’image avant de l’utiliser. Si nous devons récupérer des images du réseau, nous vous recommandons d’utiliser OkHttpImagePipelineConfigFactory.
Utilisant un ImagePipelineConfig, nous pouvons personnaliser les stratégies de cache, de réseau et de pool de threads. Voici d’autres références relatives à la configuration du pipeline.

En outre, d’autres éléments sont presque identiques aux bibliothèques ci-dessus.

Le paysagiste prend en charge l’effet de lueur lors du chargement d’images à partir du réseau, et nous pouvons l’implémenter à l’aide d’un ShimmerParams. L’exemple ci-dessous utilise CoilImage mais on peut aussi appliquer le ShimmerParams pour GlideImage et FrescoImage.

Nous pouvons personnaliser les détails de la ShimmerParam en utilisant baseColor, highlightColor, durationMillis, dropOff, et tilt.

Le paysagiste prend en charge l’animation de révélation circulaire lors de l’affichage d’images. Cela peut être mis en œuvre très simplement en donnant au circularRevealedEnabled attribut comme true.

ImageRévélée Circulaire

On peut utiliser CircularRevealedImage composable indépendamment des bibliothèques de chargement d’images (Glide, Coil, Fresco) et nous pouvons implémenter une animation de révélation circulaire à l’aide de notre image de ressource pouvant être dessinée.

Nous devons définir le circularRevealedEnabled Comme true si nous voulons appliquer une animation de révélation circulaire, nous pouvons également modifier la durée de l’animation en utilisant circularRevealedDuration attribut.

Dans cet article, nous avons vu comment charger et dessiner des images dans Jetpack Compose à l’aide de Landscapist. Heureusement, cette bibliothèque a été utilisée par de nombreuses entreprises mondiales, dont Twitter. Ce voyage a commencé à partir de Jetpack Compose 1.0.0-alpha et a maintenant été publié plus de 30 fois avant d’atteindre la version stable de Jetpack Compose 1.0. Heureusement, j’ai été très inspiré et aidé le compagnon (merci Chris Banes ! Et merci à toute l’équipe Google Compose, Android !), et ce long voyage semble ne faire que commencer. 🛫