Picasso est une bibliothèque Android open source populaire permettant de charger des images locales et distantes. Apprenez à l'utiliser facilement pour répondre à vos besoins de chargement d'images.
1. Qu'est-ce que Picasso??
Picasso (nom inspiré du célèbre artiste français Pablo Picasso) est une bibliothèque Android très populaire et open source permettant de charger des images dans votre application Android. Selon la documentation officielle, il est écrit:
… Picasso permet de charger des images sans problème dans votre application, souvent en une seule ligne de code!
Notez que Picasso utilise OkHttp (une bibliothèque réseau du même développeur) sous le capot pour charger les images par Internet..
2. Pourquoi utiliser Picasso??
Maintenant que vous savez ce qu'est Picasso, la prochaine question que vous pourriez vous poser est de savoir pourquoi l'utiliser?
Développer vos propres fonctionnalités d'affichage et de chargement des supports en Java ou en Kotlin peut s'avérer une tâche ardue: vous devez prendre en charge la mise en cache, le décodage, la gestion des connexions réseau, le threading, la gestion des exceptions, etc. Picasso est une bibliothèque facile à utiliser, bien planifiée, bien documentée et entièrement testée qui peut vous faire gagner un temps précieux - et vous éviter quelques maux de tête..
Selon la documentation officielle, voici quelques-uns des pièges courants liés au chargement d'images sur Android, traités pour vous par Picasso:
manipulation ImageView annulation du recyclage et du téléchargement dans un adaptateur
Transformations d'image complexes avec une utilisation minimale de la mémoire
mémoire automatique et mise en cache disque
L'ajout d'images à votre application peut donner vie à votre application Android. Dans ce didacticiel, nous allons donc découvrir Picasso 2 en construisant une simple application de galerie d'images. Il charge les images via Internet et les affiche sous forme de vignettes dans un RecyclerView. Lorsqu'un utilisateur clique sur une image, il ouvre une activité de détail contenant l'image plus grande..
Vous trouverez un exemple de projet (en Kotlin) pour ce tutoriel sur notre dépôt GitHub afin que vous puissiez suivre facilement.
Les bons artistes copient les grands artistes volent. - Pablo Picasso
3. Prérequis
Pour pouvoir suivre ce tutoriel, vous aurez besoin de:
une compréhension de base des principales API Android et de Kotlin
Android Studio 3.1.1 ou supérieur
Kotlin plugin 1.2.30 ou supérieur
Lancez Android Studio et créez un nouveau projet (vous pouvez le nommer PicassoDemo) avec une activité vide appelée Activité principale. Assurez-vous également de vérifier le Inclure le support Kotlin case à cocher.
4. Déclarez les dépendances
Après avoir créé un nouveau projet, spécifiez les dépendances suivantes dans votre build.gradle. Au moment de la rédaction de cet article, la dernière version de Picasso est 2,71828.
Assurez-vous de synchroniser votre projet après avoir ajouté Picasso et le RecyclerVoir artefacts v7.
5. Ajouter une autorisation Internet
Parce que Picasso va effectuer une requête réseau pour charger des images via Internet, nous devons inclure l'autorisation L'INTERNET dans notre AndroidManifest.xml.
Alors va le faire maintenant!
Notez que cela n’est requis que si vous allez charger des images à partir d’Internet. Cela n'est pas nécessaire si vous chargez uniquement des images localement sur le périphérique..
6. Créer la mise en page
Nous allons commencer par créer notre RecyclerVoir à l'intérieur de activity_main.xml fichier de mise en page.
Création de la disposition de l'élément personnalisé
Ensuite, créons la disposition XML (item_image.xml) qui sera utilisé pour chaque article (ImageView) dans le RecyclerVoir.
Maintenant que nous avons créé les dispositions nécessaires pour notre application de galerie simple, la prochaine étape consiste à créer le RecyclerVoir adaptateur pour le remplissage des données. Avant de le faire, cependant, créons notre modèle de données simple.
7. Créer un modèle de données
Nous allons définir un modèle de données simple pour notre RecyclerVoir. Ce modèle implémente Parcelable pour le transport hautes performances de données d'un composant à un autre dans Android. Dans notre cas, les données seront transportées de SunsetGalleryActivité à SunsetPhotoActivity.
Classe de données SunsetPhoto (url: String): Parcelable constructeur (parcel: Parcel): this (parcel.readString ()) remplace l'écriture fun writeToParcel (la parcelle: Parcel, flags: Int) parcel.writeString (url) écrasera fun de la description de contenu (): Int return 0 objet compagnon CREATOR: Parcelable.Creator remplacez fun createFromParcel (parcelle: Parcel): SunsetPhoto return SunsetPhoto (parcelle) remplacez fun newArray (size: Int): Array return arrayOfNulls (size)
Notez que ce modèle SunsetPhoto n'a qu'un seul champ appelé url (à des fins de démonstration), mais vous pouvez en avoir plus si vous le souhaitez. Cette classe implémente Colis, ce qui signifie que nous devons remplacer certaines méthodes.
Nous pouvons utiliser Android Studio IDEA pour générer ces méthodes, mais l’inconvénient est la maintenance. Comment? Chaque fois que nous ajoutons de nouveaux champs à cette classe, nous pouvons oublier de mettre à jour explicitement le constructeur et writeToParcel méthodes, ce qui peut conduire à des bugs si nous ne mettons pas à jour les méthodes.
Maintenant, pour éviter de mettre à jour ou d’écrire ces méthodes standard, Kotlin 1.1.14 a introduit la @Parcelize annotation. Cette annotation nous aidera à générer le writeToParcel, writeFromParcel, et décrire le contenu méthodes automatiquement sous le capot pour nous.
Classe de données @Parcelize SunsetPhoto (val url: String): Parcelable
Maintenant, notre code SunsetPhoto la classe est juste deux lignes! Impressionnant!
N'oubliez pas d'ajouter le code suivant à votre module d'application build.gradle:
androidExtensions experimental = true
De plus, j'ai inclus un objet compagnon (ou une méthode statique en Java) getSunsetPhotos () dans le SunsetPhoto classe modèle qui retournera simplement un ArrayList de SunsetPhoto quand appelé.
Nous allons créer un adaptateur pour peupler notre RecyclerVoir avec des données. Nous allons également implémenter un écouteur de clic pour ouvrir l'activité de détail-SunsetPhotoActivity-en passant une instance de SunsetPhoto comme une intention supplémentaire. L'activité de détail montrera un gros plan de l'image. Nous allons le créer dans une section ultérieure.
class MainActivity: AppCompatActivity () //… classe interne privée ImageGalleryAdapter (contexte de val: Contexte, valeur de coucher du soleilPhotos: Array): RecyclerView.Adapter() redéfinit fun onCreateViewHolder (parent: ViewGroup, viewType: Int): ImageGalleryAdapter.MyViewHolder val context = parent.context val inflater = LayoutInflater.from (context) val photoView = inflater.inflate (R.layout.item_image, parent, false) return MyViewHolder (photoView) annule le plaisir onBindViewHolder (titulaire: ImageGalleryAdapter.MyViewHolder, position: Int) val sunsetPhoto = sunsetPhotos [position] val imageView = holder.photoImageView annule fun getItemCount (): Int return sunset.sys classe intérieure MyViewHolder (itemView: View): RecyclerView.ViewHolder (itemView), View.OnClickListener var photoImageView: ImageView = itemView.findViewById (R.id.iv_photo) init itemView.setOnClickListener (this) remplacez fun onClick (view: Voir) val position = adapterPosition if (position! = RecyclerView.NO_POSITION) val sunsetPhoto = sunsetPhotos [position] val intent = Intention (contexte, SunsetPhotoActivity :: class.java) .apply putExtra (SunsetPhotoActivity.EXTRA_SUNSET_PHOTO, sun setPhoto) startActivity (intent)
Notez que nous avons utilisé le appliquer fonction d'extension pour mettre un objet en plus de l'intention. Pour rappel, le appliquer function renvoie l'objet qui lui est passé sous forme d'argument (c'est-à-dire l'objet destinataire).
9. Charger des images depuis une URL
Picasso devra faire son travail dans cette section - non pas pour nous peindre une œuvre d’art, mais pour aller chercher des images sur Internet et les afficher. Nous afficherons ces images individuellement dans leurs images respectives. ImageViews à l'intérieur de notre RecyclerVoironBindViewHolder () méthode lorsque l'utilisateur fait défiler l'application.
Pas à pas, voici ce que les appels à Picasso faites:
le obtenir() Méthode
Cela retourne le global Picasso instance (instance singleton) initialisée avec les configurations par défaut suivantes:
Cache mémoire LRU de 15% de la RAM disponible pour l'application.
Cache disque de 2% d'espace de stockage jusqu'à 50 Mo mais pas moins de 5 Mo Remarque: ceci est uniquement disponible sur l'API 14.+.
Trois threads de téléchargement pour l'accès au disque et au réseau.
Notez que si ces paramètres ne répondent pas aux exigences de votre application, vous êtes libre de créer votre propre Picasso exemple avec un contrôle total de ces configurations en utilisant Picasso.Builder.
val picassoBuilder = Picasso.Builder (contexte) // réalisez des configurations personnalisées // Spécifiez le @link Downloader à utiliser pour le téléchargement des images. picassoBuilder.downloader () // Spécifiez le service d'exécution pour charger les images en arrière-plan. picassoBuilder.executor () // Spécifie la mémoire cache utilisée pour les images les plus récentes. picassoBuilder.memoryCache () // et plus val picasso = picassoBuilder.build ()
Enfin, vous appelez le construire() méthode pour vous retourner un Picasso exemple avec vos propres configurations.
Il est recommandé de le faire dans votre Application.onCreate puis définissez-le comme l'instance singleton avec Picasso.setSingletonInstance dans cette méthode, pour vous assurer que le Picasso par exemple est le global.
le charge() Méthode
load (chemin de chaîne) démarre une demande d'image en utilisant le chemin spécifié. Ce chemin peut être une URL distante, une ressource de fichier, une ressource de contenu ou une ressource Android..
placeholder (int placeholderResId): un identifiant de ressource d'espace réservé local ou pouvant être utilisé pendant le chargement, puis l'affichage de l'image. C'est une bonne expérience utilisateur d'afficher une image de substitution pendant le téléchargement de l'image..
Notez que Picasso vérifie d’abord si l’image demandée se trouve dans le cache de la mémoire et, le cas échéant, l’affiche à partir de là (nous verrons plus en détail la mise en cache dans Picasso dans une section ultérieure)..
Autres méthodes
erreur (int errorResId): un dessin utilisable si l'image demandée ne peut pas être chargée - probablement parce que le site Web est en panne.
noFade (): Picasso disparaît toujours dans l'image pour être affiché dans le ImageView. Si vous ne voulez pas cette animation en fondu, appelez simplement le noFade () méthode.
dans (ImageView imageView): la vue de l'image cible dans laquelle l'image sera placée.
Redimensionnement et transformation d'image
Si le serveur auquel vous demandez l'image ne vous fournit pas l'image dont vous avez besoin dans la taille requise, vous pouvez facilement la redimensionner à l'aide de redimensionner (int targetWidth, int targetHeight). L'appel de cette méthode redimensionne l'image et l'affiche ensuite sur le ImageView. Notez que les dimensions sont en pixels (px), pas dp.
Vous pouvez transmettre une ressource de dimension Android pour la largeur et la hauteur à l'aide de la méthode resizeDimen (int targetWidthResId, int targetHeightResId). Cette méthode convertit la taille de la dimension en pixels bruts, puis appelle redimensionner () sous le capot en passant les tailles converties (en pixels) comme arguments.
Notez que ces méthodes de redimensionnement ne respectent pas les proportions. En d'autres termes, votre format d'image peut être déformé.
Heureusement, Picasso nous donne quelques méthodes utiles pour résoudre ce problème:
centerCrop (): Redimensionne l'image de manière uniforme (en conservant le rapport de format de l'image) de sorte que l'image remplisse la zone donnée, avec autant d'images que possible affichées. Si nécessaire, l'image sera recadrée horizontalement ou verticalement pour s'adapter. L'appel de cette méthode recadre une image à l'intérieur des limites spécifiées par redimensionner ().
centerInside (): redimensionne l'image de sorte que les deux dimensions soient égales ou inférieures aux limites demandées. Cela va centrer une image à l'intérieur des limites spécifiées par redimensionner ().
onlyScaleDown (): redimensionne une image uniquement si la taille de l'image d'origine est supérieure à la taille cible spécifiée par redimensionner ().
en forme(): tente de redimensionner l’image pour s’adapter exactement à la cible ImageViewles limites.
Rotation de l'image
Picasso dispose d'une API facile à utiliser pour faire pivoter une image, puis l'afficher. le faire pivoter (degrés de flottement) méthode fait pivoter l'image des degrés spécifiés.
Picasso.get () //… tourner (90f) //…
Dans l'exemple ci-dessus, cela ferait pivoter l'image de 90 degrés. le faire pivoter (degrés de flottement, float pivotX, float pivotY) méthode fait pivoter l'image des degrés spécifiés autour d'un point pivot.
Picasso.get () //… tourner (30f, 200f, 100f) //…
Ici, nous allons faire pivoter l'image de 30 degrés autour du point de pivotement 200, 100 pixels.
Transformation
En plus de manipuler une image en la faisant pivoter, Picasso nous offre également la possibilité d'appliquer une transformation personnalisée à une image avant de l'afficher..
Vous créez simplement une classe qui implémente Picasso Transformation interface. Vous devez ensuite remplacer deux méthodes:
Transformation Bitmap (source Bitmap): cela transforme le bitmap source en un nouveau bitmap.
Clé de chaîne (): renvoie une clé unique pour la transformation, utilisée à des fins de mise en cache.
Après avoir créé votre transformation personnalisée, vous l’exécutez simplement en invoquant transform (transformation de transformation) sur votre instance Picasso. Notez que vous pouvez également transmettre une liste de Transformation à transformer().
Ici, j'ai appliqué une transformation de rognage de cercle à l'image de la bibliothèque Android open source de Transformations Picasso. Cette bibliothèque contient de nombreuses transformations que vous pouvez appliquer à une image avec Picasso, notamment des transformations permettant de rendre floues ou en nuances de gris une image. Allez voir si vous voulez appliquer des transformations cool à vos images.
10. Initialisation de l'adaptateur
Ici, nous créons simplement notre RecyclerVoir avec GridLayoutManager en tant que gestionnaire de disposition, initialisez notre adaptateur et liez-le au RecyclerVoir.
class MainActivity: AppCompatActivity () private lateinit var recyclerView: RecyclerView private lateinit var imageGalleryAdapter: ImageGalleryAdapter remplace fun sur la création (saveInstanceState: Bundle?) //… val layoutManager = GridLayoutManager (this, 2) recyclerView = findView ) recyclerView.setHasFixedSize (true) recyclerView.layoutManager = layoutManager imageGalleryAdapter = ImageGalleryAdapter (this, SunsetPhoto.getSunsetPhotos ()) annule le plaisir onStart () super.onStart () recyclerView.adapter = imageGalleryAdapter //…
11. Création de l'activité de détail
Créez une nouvelle activité et nommez-la SunsetPhotoActivity. Nous obtenons le SunsetPhoto extra et charge l'image à l'intérieur onStart ()-avec Picasso comme nous le faisions auparavant.
Voici une mise en page pour afficher l'activité de détail. Il affiche simplement un ImageView cela montrera la version en pleine résolution de l'image chargée.
12. Mécanisme de mise en cache à Picasso
Si vous observez attentivement, vous remarquerez que, lorsque vous revisitez une image précédemment chargée, son chargement est encore plus rapide qu'auparavant. Qu'est-ce qui l'a rendu plus rapide? C'est le mécanisme de cache de Picasso, c'est ce que.
Voici ce qui se passe sous le capot. Une fois qu'une image a été chargée une fois sur Internet, Picasso la met en cache à la fois en mémoire et sur disque, en sauvegardant les demandes répétées du réseau et en permettant une récupération plus rapide de l'image. Lorsque cette image est à nouveau utilisée, Picasso vérifie d’abord si elle est disponible en mémoire. Si elle est disponible, elle la renverra immédiatement. Si cette image n'est pas en mémoire, Picasso vérifiera ensuite le disque et, s'il y en a un, le renverra. Si ce n'est pas là, Picasso va finalement faire une demande de réseau pour cette image et l'afficher.
En résumé, voici ce qui se passe (sous le capot) pour une demande d’image: mémoire -> disque -> réseau.
Toutefois, en fonction de votre application, vous pouvez éviter la mise en cache, par exemple, si les images affichées sont susceptibles de changer souvent et de ne pas être rechargées..
Alors, comment désactiver la mise en cache?
Vous pouvez éviter la mémoire cache en appelant memoryPolicy (MemoryPolicy.NO_CACHE). Cela va simplement ignorer la recherche du cache mémoire lors du traitement d'une requête d'image.
Notez qu'il existe une autre énumération: MemoryPolicy.NO_STORE. Ceci est utile si vous êtes certain de ne demander une image qu'une seule fois. L'application de cette option ne stockera pas non plus l'image dans le cache mémoire, ce qui ne forcera pas la sortie d'autres bitmaps du cache mémoire..
Mais sachez que l’image sera toujours mise en cache sur le disque pour éviter cela aussi, vous utilisez networkPolicy (politique @NonNull NetworkPolicy, @NonNull NetworkPolicy… supplémentaire), qui prend une ou plusieurs des valeurs enum suivantes:
NetworkPolicy.NO_CACHE: ignore la vérification du cache sur le disque et force le chargement sur le réseau.
NetworkPolicy.NO_STORE: ignore le résultat dans le cache du disque.
NetworkPolicy.OFFLINE: force la requête à travers le cache disque seulement, en sautant le réseau.
Pour éviter la mise en cache de la mémoire et du disque, appelez les deux méthodes l'une après l'autre:
Dans Picasso, vous pouvez implémenter un écouteur ou un rappel pour surveiller l'état de la demande que vous avez effectuée lors du chargement de l'image. Une seule de ces méthodes sera appelée si vous implémentez la Cible interface sur demande.
void onBitmapFailed (e: Exception ?, errorDrawable: Drawable?): déclenché chaque fois que l'image n'a pas pu être chargée avec succès. Ici, nous pouvons accéder à l'exception qui a été levée.
void onBitmapLoaded (Bitmap, LoadedFrom à partir de): déclenché chaque fois qu'une image a été chargée avec succès. Ici, nous obtenons le bitmap pour montrer à l'utilisateur.
void onPrepareLoad (Drawable placeHolderDrawable): invoqué juste avant que votre demande soit soumise.
Picasso.get () .load (sunsetPhoto.url) .placeholder (R.drawable.placeholder) .error (R.drawable.error) .into (object: Target override fun surPrepareLoad (placeHolderDrawable: Drawable?) Fun onBitmapFailed (e: Exception ?, errorDrawable: Drawable?) remplace l'amusant onBitmapLoaded (bitmap: Bitmap ?, à partir de: Picasso.LoadedFrom?) )
Ici, vous pouvez également afficher et masquer une boîte de dialogue de progression si vous en avez une..
Il existe un autre écouteur de rappel que vous pouvez implémenter si vous le souhaitez, appelé Rappeler. Cette interface n'a que deux méthodes: onSuccès () et onError (Exception e). Le premier est appelé lorsque le chargement de la demande d’image a réussi, et le second s’appelle en cas d’erreur dans le traitement de la demande..
Pour revenir à notre application de galerie d'images (à l'intérieur SunsetPhotoActivity), modifions un peu l’affichage en utilisant un Rappeler objet qui va définir le bitmap à la ImageView et changez également la couleur de fond de la mise en page en extrayant la couleur sombre et vibrante de notre image à l'aide de l'API de palette Android..
Donc, inclure l'artefact de la palette dans le module de votre application build.gradle:
Mettons maintenant en œuvre le Rappeler interface dans notre demande Picasso.
écrasez fun onStart () super.onStart () Picasso.get () .load (sunsetPhoto.url) .placeholder (R.drawable.placeholder) .error (R.drawable.error) .fit () .into (imageView, object: Callback override fun onSuccess () val bitmap = (imageView.drawable en tant que BitmapDrawable) .bitmap onPalette (Palette.from (bitmap) .generate ()) remplace fun onError (e: Exception?) ) fun onPalette (palette: palette?) if (null! = palette) val parent = imageView.parent.parent comme ViewGroup parent.setBackgroundColor (palette.getDarkVibrantColor (Color.GRAY))
14. Test de l'application
Enfin, vous pouvez exécuter l'application! Cliquez sur une vignette pour obtenir une version agrandie de l'image.
15. Demandes de priorité
Lorsque vous souhaitez charger différentes images en même temps sur le même écran, vous avez la possibilité de commander laquelle est plus importante que l’autre. En d'autres termes, vous pouvez d'abord charger des images importantes.
Vous appelez simplement priorité() sur votre instance de demande Picasso et transmettez l’un des énumérations suivantes: Priorité.LOW, Priorité.NORMAL, ou Priorité.HAUT.
En balisant vos demandes Picasso, vous pouvez reprendre, suspendre ou annuler les demandes associées à des balises spécifiques. En fonction de votre cas d'utilisation, vous pouvez marquer vos demandes avec une chaîne ou des objets devant définir la portée de la demande en tant que Le contexte, un Activité, ou un Fragment. Vous pouvez facilement marquer une demande Picasso en appelant tag (@NonNull Object tag) sur une. Transmettez-lui une instance de Objet qui sert de tag.
Voici les opérations suivantes que vous pouvez effectuer sur les demandes Picasso marquées:
pauseTag (balise d'objet): met en pause toutes les demandes associées à la balise donnée.
resumeTag (balise d'objet): reprendre les demandes en pause avec la balise donnée.
cancelTag (balise d'objet): annule toutes les requêtes existantes avec la balise donnée.
Picasso.get () //… tag (contexte
Bien que le marquage de vos demandes vous permette de contrôler certaines demandes, vous devez faire très attention lorsque vous utilisez des balises, en raison du risque de fuite de mémoire. Voici ce que dit la documentation officielle:
Picasso conservera une référence à la balise aussi longtemps que cette balise est en pause et / ou a des demandes actives. Attention aux fuites potentielles.
Chargement à partir du système de fichiers
C'est simple de charger des images localement dans votre application.
Bon travail! Dans ce didacticiel, vous avez construit une application complète de galerie d'images avec Picasso et vous avez appris comment fonctionne la bibliothèque et comment l'intégrer à votre propre projet..
Vous avez également appris à afficher des images locales et distantes, à baliser des demandes, à hiérarchiser des demandes, et à appliquer des transformations d'image telles que le redimensionnement. De plus, vous avez constaté à quel point il est facile d'activer et de désactiver la mise en cache, la gestion des erreurs et des écouteurs de demandes personnalisées..
Pour en savoir plus sur Picasso, vous pouvez vous reporter à sa documentation officielle. Pour en savoir plus sur le codage pour Android, consultez certains de nos autres cours et tutoriels ici sur Envato Tuts.+!
Share
Ce que vous allez créer
Accentsconagua
