Picasso is een populaire open-source Android-bibliotheek voor het laden van zowel lokale als externe afbeeldingen. Leer hoe u het gemakkelijk kunt gebruiken om aan uw behoeften voor het laden van afbeeldingen te voldoen.
1. Wat is Picasso?
Picasso (naam geïnspireerd door de beroemde Franse kunstenaar Pablo Picasso) is een zeer populaire open-source Android-bibliotheek voor het laden van afbeeldingen in uw Android-app. Volgens de officiële documenten zegt het:
... Picasso zorgt voor probleemloos laden van afbeeldingen in uw toepassing, vaak in één regel code!
Merk op dat Picasso OkHttp (een netwerkbibliotheek van dezelfde ontwikkelaar) onder de motorkap gebruikt om de afbeeldingen via internet te laden.
2. Dus waarom Picasso gebruiken?
Nu je hebt geleerd waar Picasso over gaat, is de volgende vraag die je zou kunnen stellen, waarom zou je het gebruiken?
Het ontwikkelen van uw eigen media-laad- en weergavefunctionaliteit in Java of Kotlin kan een hele klus zijn: u moet zorgen voor caching, decodering, beheer van netwerkverbindingen, threading, afhandeling van uitzonderingen en meer. Picasso is een eenvoudig te gebruiken, goed geplande, goed gedocumenteerde en grondig geteste bibliotheek die u veel kostbare tijd kan besparen en u enkele hoofdpijnen kan besparen.
Hier zijn veel van de gebruikelijke valkuilen bij het laden van afbeeldingen op Android die door Picasso voor u zijn afgehandeld, volgens de officiële documenten:
behandeling Figuurweergave recycling en annulering van downloads in een adapter
complexe beeldtransformaties met minimaal geheugengebruik
automatisch geheugen en schijfcaching
Als u afbeeldingen aan uw app toevoegt, kan uw Android-app tot leven komen. In deze tutorial leren we dus over Picasso 2 door een eenvoudige app met afbeeldingen te bouwen. Het laadt de afbeeldingen via internet en geeft ze weer als miniaturen in een RecyclerView, en wanneer een gebruiker op een afbeelding klikt, wordt een detailactiviteit geopend met de grotere afbeelding.
Een voorbeeldproject (in Kotlin) voor deze tutorial is te vinden op onze GitHub repo, zodat je gemakkelijk kunt volgen.
Goede artiesten kopiëren, geweldige artiesten stelen. - Pablo Picasso
3. Vereisten
Als je deze zelfstudie wilt kunnen volgen, heb je het volgende nodig:
een basiskennis van de belangrijkste Android-API's en Kotlin
Android Studio 3.1.1 of hoger
Kotlin-plug-in 1.2.30 of hoger
Start Android Studio en maak een nieuw project (u kunt het een naam geven PicassoDemo) met een lege activiteit genaamd Hoofdactiviteit. Zorg ervoor dat u ook de Inclusief Kotlin-ondersteuning selectievakje.
4. Declare Dependencies
Nadat u een nieuw project hebt gemaakt, geeft u de volgende afhankelijkheden op in uw build.gradle. Op het moment van schrijven is de nieuwste versie van Picasso 2,71828.
Zorg ervoor dat je je project synchroniseert na het toevoegen van Picasso en de RecyclerView v7 artefacten.
5. Voeg internettoestemming toe
Omdat Picasso een netwerkverzoek gaat uitvoeren om afbeeldingen via internet te laden, moeten we de toestemming opnemen INTERNET in onze AndroidManifest.xml.
Dus ga dat nu doen!
Merk op dat dit alleen nodig is als u afbeeldingen van internet gaat laden. Dit is niet vereist als u alleen afbeeldingen lokaal op het apparaat laadt.
6. Maak de lay-out
We beginnen met het maken van onze RecyclerView binnen in de activity_main.xml lay-outbestand.
De aangepaste itemlay-out maken
Laten we vervolgens de XML-lay-out maken (item_image.xml) die voor elk item wordt gebruikt (Figuurweergave) binnen de RecyclerView.
Nu we de lay-outs hebben gemaakt die nodig zijn voor onze eenvoudige galerij-app, is de volgende stap het maken van de RecyclerView adapter voor het invullen van gegevens. Voordat we dat doen, laten we ons eenvoudige gegevensmodel maken.
7. Maak een gegevensmodel
We gaan een eenvoudig gegevensmodel definiëren voor onze RecyclerView. Dit model implementeert Pakketabel voor high-performance transport van gegevens van de ene component naar de andere in Android. In ons geval worden gegevens getransporteerd van SunsetGalleryActivity naar SunsetPhotoActivity.
Merk op dat dit model SunsetPhoto heeft slechts één enkel veld met de naam url (voor demo-doeleinden), maar u kunt meer hebben als u wilt. Deze klasse implementeert Parcelable, wat betekent dat we sommige methoden moeten overschrijven.
We kunnen Android Studio IDEA gebruiken om deze methoden voor ons te genereren, maar het nadeel hiervan is onderhoud. Hoe? Telkens wanneer we nieuwe velden toevoegen aan deze klasse, kunnen we vergeten de update expliciet te updaten bouwer en writeToParcel methoden, wat kan leiden tot een aantal bugs als we de methoden niet bijwerken.
Nu, om het bijwerken of schrijven van deze boilerplate-methoden te omzeilen, introduceerde Kotlin 1.1.14 de @Parcelize annotatie. Met deze annotatie kunnen we de writeToParcel, writeFromParcel, en describeContents methoden automatisch onder de motorkap voor ons.
Nu onze code SunsetPhoto les is slechts twee regels! Geweldig!
Vergeet niet om de volgende code toe te voegen aan uw app-module build.gradle:
androidExtensions experimenteel = waar
Daarnaast heb ik een begeleidend object (of een statische methode in Java) toegevoegd getSunsetPhotos () in de SunsetPhoto modelklasse die eenvoudig een ArrayList van SunsetPhoto wanneer gebeld.
We zullen een adapter maken om onze te vullen RecyclerView met gegevens. We implementeren ook een kliklistener om de detailactiviteit te openen-SunsetPhotoActivity-het doorgeven van een instantie van SunsetPhoto als een intentie extra. De detailactiviteit toont een close-up van de afbeelding. We zullen het in een later hoofdstuk maken.
class MainActivity: AppCompatActivity () // ... private inner class ImageGalleryAdapter (val context: Context, val sunsetFoto's: Array): RecyclerView.Adapter() override fun onCreateViewHolder (boven: ViewGroup, viewType: Int): ImageGalleryAdapter.MyViewHolder val context = parent.context val inflater = LayoutInflater.from (context) val photoView = inflater.inflate (R.layout.item_image, parent, false) retourneer MyViewHolder (photoView) override fun onBindViewHolder (houder: ImageGalleryAdapter.MyViewHolder, position: Int) val sunsetPhoto = sunsetFoto's [positie] val imageView = holder.photoImageView override-fun getItemCount (): Int return sunsetPhotos.size inner class MyViewHolder (itemView: View): RecyclerView.ViewHolder (itemView), View.OnClickListener var photoImageView: ImageView = itemView.findViewById (R.id.iv_photo) init itemView.setOnClickListener (this) override fun onClick (view: Weergave) val position = adapterPosition if (position! = RecyclerView.NO_POSITION) val sunsetPhoto = sunsetFoto's [positie] val intent = Intent (context, SunsetPhotoActivity :: class.java) .apply putExtra (SunsetPhotoActivity.EXTRA_SUNSET_PHOTO, sun setPhoto) startActivity (intent)
Merk op dat we de van toepassing zijn uitbreidingsfunctie om een object als extra aan de intentie te geven. Ter herinnering: de van toepassing zijn functie retourneert het object dat eraan is doorgegeven als een argument (dat wil zeggen het ontvangerobject).
9. Afbeeldingen laden van een URL
We zullen Picasso nodig hebben om zijn werk in dit gedeelte te doen - niet om ons een kunstwerk te schilderen, maar om afbeeldingen van internet te halen en weer te geven. We zullen deze afbeeldingen afzonderlijk weergeven in hun respectievelijke Figuurweergaves in onze RecyclerViewonBindViewHolder () methode wanneer de gebruiker door de app bladert.
override fun onBindViewHolder (houder: ImageGalleryAdapter.MyViewHolder, positie: Int) val sunsetPhoto = sunsetFoto's [positie] val imageView = holder.photoImageView Picasso.get () .load (sunsetPhoto.url) .placeholder (R.drawable.placeholder). error (R.drawable.error) .fit () .into (imageView)
Stap voor stap, hier is wat de oproepen aan Picasso zijn aan het doen:
De krijgen() Methode
Dit levert het globale resultaat op Picasso instance (singleton instance) geïnitialiseerd met de volgende standaardconfiguraties:
LRU-geheugencache van 15% het beschikbare toepassings-RAM.
Schijfcache van 2% opslagruimte tot 50 MB maar niet minder dan 5 MB. Opmerking: dit is alleen beschikbaar op API 14+.
Drie downloadthreads voor schijf- en netwerktoegang.
Merk op dat als deze instellingen niet voldoen aan de vereisten van uw applicatie, u vrij bent om uw eigen instellingen te maken Picasso bijvoorbeeld met volledige controle over deze configuraties door te gebruiken Picasso.Builder.
val picassoBuilder = Picasso.Builder (context) // doe aangepaste configuraties // Specificeer de @link Downloader die zal worden gebruikt voor het downloaden van afbeeldingen. picassoBuilder.downloader () // Geef de ExecutorService op voor het laden van afbeeldingen op de achtergrond. picassoBuilder.executor () // Geef de geheugencache op die wordt gebruikt voor de meest recente afbeeldingen. picassoBuilder.memoryCache () // en meer val picasso = picassoBuilder.build ()
Eindelijk, bel je de bouwen() methode om je terug te sturen Picasso bijvoorbeeld met uw eigen configuraties.
Het wordt aanbevolen dat je dit in je doet Application.onCreate en stel het vervolgens in als de singleton-instantie met Picasso.setSingletonInstance in die methode - om ervoor te zorgen dat de Picasso instantie is de globale.
De laden() Methode
laden (reekspad) start een afbeeldingsverzoek met behulp van het opgegeven pad. Dit pad kan een externe URL, bestandsresource, contentresource of Android-bron zijn.
placeholder (int placeholderResId): een lokale bron voor tijdelijke gegevensbron of tekenbaar om te gebruiken terwijl de afbeelding wordt geladen en vervolgens wordt weergegeven. Het dient als een goede gebruikerservaring om een afbeelding van een tijdelijke aanduiding weer te geven terwijl de afbeelding wordt gedownload.
Merk op dat Picasso eerst controleert of de aangevraagde afbeelding zich in de geheugencache bevindt en als dit het geval is, wordt daar de afbeelding weergegeven (we bespreken de cache in Picasso meer in een later gedeelte).
Andere methodes
fout (int errorResId): een aantrekbaar om te gebruiken als de gevraagde afbeelding niet kan worden geladen, waarschijnlijk omdat de website niet beschikbaar is.
noFade (): Picasso vervaagt altijd in de afbeelding die in de afbeelding moet worden weergegeven Figuurweergave. Als u deze inflight-animatie niet wilt, belt u gewoon de noFade () methode.
naar (ImageView imageView): de doelbeeldweergave waarin de afbeelding zal worden geplaatst.
Beeldgrootte wijzigen en transformeren
Als de server waarvan u de afbeelding aanvraagt, u niet de gewenste afbeelding in de gewenste grootte geeft, kunt u die afbeelding eenvoudig aanpassen met resize (int targetWidth, int targetHeight). Als u deze methode gebruikt, wordt het formaat van de afbeelding gewijzigd en vervolgens weergegeven op de afbeelding Figuurweergave. Merk op dat de afmetingen in pixels (px) zijn, niet dp.
U kunt met behulp van de methode een Android-dimensieresource doorgeven voor zowel de breedte als de hoogte resizeDimen (int targetWidthResId, int targetHeightResId). Deze methode converteert de bematingsgrootte naar onbewerkte pixels en roept vervolgens verkleinen () onder de motorkap: de geconverteerde formaten (in pixels) doorgeven als argumenten.
Merk op dat deze resize-methoden de aspectratio niet zullen respecteren. Met andere woorden, de beeldverhouding van uw beeld kan vervormd zijn.
gelukkig, Picasso geeft ons enkele handige methoden om dit probleem op te lossen:
centerCrop (): Schaalt het beeld gelijkmatig (waarbij de beeldverhouding wordt gehandhaafd) zodat het beeld het gegeven gebied vult, waarbij zoveel mogelijk van het beeld wordt weergegeven. Indien nodig wordt de afbeelding horizontaal of verticaal bijgesneden om te passen. Als u deze methode aanroept, wordt een afbeelding ingekort binnen de grenzen die zijn opgegeven met verkleinen ().
centerInside (): schaalt het beeld zodat beide dimensies gelijk zijn aan of kleiner zijn dan de gevraagde grenzen. Hierdoor wordt een afbeelding gecentreerd binnen de grenzen die zijn opgegeven met verkleinen ().
onlyScaleDown (): wijzig de grootte van een afbeelding alleen als de originele afbeeldingsgrootte groter is dan de doelwaarde die is opgegeven met verkleinen ().
fit (): probeer de grootte van de afbeelding aan te passen zodat deze exact in het doel past Figuurweergavede grenzen.
Beeldrotatie
Picasso heeft een eenvoudige API om een afbeelding te draaien en die afbeelding vervolgens weer te geven. De roteren (zweven graden) methode roteert het beeld met de opgegeven graden.
Picasso.get () // ... rotate (90f) // ...
In het bovenstaande voorbeeld zou dit het beeld 90 graden draaien. De roteren (zweven graden, zweven zwenken X, zweven zwenken) methode roteert het beeld met de opgegeven graden rond een draaipunt.
Hier gaan we het beeld 30 graden draaien rond het draaipunt 200, 100 pixels.
transformatie
Afgezien van het manipuleren van een afbeelding door deze te draaien, geeft Picasso ons ook de mogelijkheid om een aangepaste transformatie toe te passen op een afbeelding voordat deze wordt weergegeven.
U maakt eenvoudigweg een klas die de Picasso implementeert transformatie interface. U moet dan twee methoden overschrijven:
Bitmap-transformatie (Bitmap-bron): hiermee transformeert u de bronbitmap in een nieuwe bitmap.
String-toets (): retourneert een unieke sleutel voor de transformatie, gebruikt voor cachedoeleinden.
Nadat u klaar bent met het maken van uw aangepaste transformatie, voert u deze eenvoudig uit door op te roepen transformeren (transformatie transformatie) op uw Picasso-instantie. Merk op dat u ook een lijst met kunt doorgeven transformatie naar transformeren().
Hier heb ik een cirkelsgewastransformatie toegepast op de afbeelding uit de open-source Android-bibliotheek van Picasso Transformations. Deze bibliotheek heeft vele transformaties die u kunt toepassen op een afbeelding met Picasso, inclusief transformaties voor vervaging of grijswaarden van een afbeelding. Bekijk het eens als je coole transformaties op je afbeeldingen wilt toepassen.
10. De adapter initialiseren
Hier maken we eenvoudig onze RecyclerView met GridLayoutManager als lay-outmanager, initialiseer onze adapter en bind deze aan de RecyclerView.
Maak een nieuwe activiteit en noem deze SunsetPhotoActivity. We krijgen de SunsetPhoto extra en laad de afbeelding binnen onStart ()-met Picasso zoals we eerder deden.
Hier is een lay-out om de detailactiviteit weer te geven. Het toont gewoon een Figuurweergave die de versie met volledige resolutie van de geladen afbeelding laat zien.
12. Caching-mechanisme in Picasso
Als u goed oplet, zult u merken dat wanneer u een eerder geladen afbeelding opnieuw bezoekt, deze nog sneller dan voorheen wordt geladen. Wat maakte het sneller? Het is het caching-mechanisme van Picasso, dat is wat.
Dit is wat er gebeurt onder de motorkap. Nadat een afbeelding eenmaal via internet is geladen, slaat Picasso deze zowel in het geheugen als op de schijf op, waardoor herhaalde netwerkaanvragen worden opgeslagen en de afbeelding sneller kan worden opgehaald. Als die afbeelding opnieuw nodig is, controleert Picasso eerst of de afbeelding beschikbaar is in het geheugen. Als deze afbeelding daar is, wordt deze onmiddellijk geretourneerd. Als die afbeelding niet in het geheugen staat, zal Picasso de schijf als volgende controleren en als die er is, wordt deze teruggestuurd. Als het er niet is, zal Picasso eindelijk een netwerkaanvraag doen voor die afbeelding en deze weergeven.
Samengevat, hier is wat er gebeurt (onder de motorkap) voor een beeldverzoek: geheugen -> schijf -> netwerk.
Afhankelijk van uw toepassing wilt u mogelijk caching vermijden, bijvoorbeeld als de weergegeven afbeeldingen waarschijnlijk vaak veranderen en niet opnieuw worden geladen.
Dus hoe schakel je caching uit?
U kunt geheugencache vermijden door te bellen memoryPolicy (MemoryPolicy.NO_CACHE). Hierdoor wordt de zoekactie naar de geheugencache eenvoudigweg overgeslagen bij het verwerken van een afbeeldingsverzoek.
Merk op dat er nog een enum is: MemoryPolicy.NO_STORE. Dit is handig als u er zeker van bent dat u slechts één keer een afbeelding aanvraagt. Als u dit toepast, wordt de afbeelding ook niet opgeslagen in de geheugencache, waardoor andere bitmaps uit de geheugencache niet worden verwijderd.
Maar wees u ervan bewust dat de afbeelding nog steeds in de cache op de schijf wordt opgeslagen om te voorkomen dat u die ook gebruikt networkPolicy (@NonNull NetworkPolicy-beleid, @NonNull NetworkPolicy ... extra), waarbij een of meer van de volgende opsommingswaarden zijn vereist:
NetworkPolicy.NO_CACHE: slaat het controleren van de schijfcache over en dwingt het laden via het netwerk.
NetworkPolicy.NO_STORE: slaat het opslaan van het resultaat in de schijfcache over.
NetworkPolicy.OFFLINE: forceert het verzoek alleen via de schijfcache en slaat het netwerk over.
Om zowel geheugen- als schijfcaching helemaal te vermijden, roept u beide methoden na elkaar op:
In Picasso kunt u een listener of callback implementeren om de status van het verzoek dat u hebt gemaakt tijdens het laden van de afbeelding te controleren. Slechts een van deze methoden wordt aangeroepen als u de Doelwit interface op een verzoek.
void onBitmapFailed (e: Exception ?, errorDrawable: Drawable?): geactiveerd wanneer de afbeelding niet succesvol kon worden geladen. Hier hebben we toegang tot de uitzondering die is gegenereerd.
void onBitmapLoaded (Bitmap bitmap, LoadedFrom from): ontslagen wanneer een afbeelding succesvol is geladen. Hier krijgen we de Bitmap om de gebruiker te tonen.
void onPrepareLoad (Drawable placeHolderDrawable): ingeroepen net voordat uw aanvraag wordt ingediend.
Hier kun je ook een voortgangsdialoog tonen en verbergen als je die had.
Er is nog een callback-listener die u kunt implementeren als u wilt, genaamd Bel terug. Deze interface heeft slechts twee methoden: onSuccess () en onError (Uitzondering e). De eerste wordt aangeroepen wanneer de laadopdracht van de afbeelding is gelukt en de laatste wordt opgeroepen als er een fout is opgetreden bij het verwerken van de aanvraag.
Terug naar onze app voor afbeeldingengalerie (binnenkant SunsetPhotoActivity), laten we het scherm een beetje aanpassen met behulp van a Bel terug object dat de bitmap op de Figuurweergave en verander ook de achtergrondkleur van de lay-out door de donkere en levendige kleuren van onze afbeelding te extraheren met behulp van de Android Palette API.
Neem dus het paletartefact op in uw app-modules build.gradle:
Laten we nu het Bel terug interface in ons Picasso-verzoek.
override 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 as BitmapDrawable) .bitmap onPalette (Palette.from (bitmap) .generate ()) overschrijven fun onError (e: Exception?) ) fun onPalette (palette: Palette?) if (null! = palette) val parent = imageView.parent.parent als ViewGroup parent.setBackgroundColor (palette.getDarkVibrantColor (Color.GRAY))
14. De app testen
Eindelijk kunt u de app gebruiken! Klik op een miniatuur om een volledige versie van de afbeelding te krijgen.
15. Prioritering van aanvragen
Wanneer u verschillende afbeeldingen tegelijkertijd op hetzelfde scherm wilt laden, hebt u de mogelijkheid om te bepalen welke van de twee belangrijker is dan de andere. Met andere woorden, u kunt eerst belangrijke afbeeldingen laden.
Je belt gewoon prioriteit() op uw Picasso-verzoekinstantie en geef een van de enums door: Priority.LOW, Priority.NORMAL, of Priority.HIGH.
Door uw Picasso-aanvragen te labelen, kunt u aanvragen die zijn gekoppeld aan specifieke tags hervatten, onderbreken of annuleren. Afhankelijk van uw use-case, kunt u uw verzoeken labelen met een tekenreeks of met objecten die de reikwijdte van de aanvraag moeten definiëren als een Context, een Activiteit, of a Fragment. Je kunt een Picasso-verzoek gemakkelijk taggen door te bellen tag (@NonNull Object-tag) op een. Geef het een instantie van Voorwerp die als tag dient.
Dit zijn de volgende bewerkingen die u kunt uitvoeren op gecodeerde Picasso-aanvragen:
pauseTag (Object-tag): pauzeer alle verzoeken die aan de gegeven tag zijn gekoppeld.
resumeTag (Object-tag): hervatte aanvragen hervatten met de gegeven tag.
cancelTag (Object-tag): annuleer bestaande verzoeken met de gegeven tag.
Picasso.get () // ... tag (context
Hoewel het labelen van uw verzoeken u enige controle geeft over uw verzoeken, moet u heel voorzichtig zijn bij het gebruik van tags vanwege het potentieel voor geheugenlekken. Hier is wat de officiële documentatie zegt:
Picasso houdt een verwijzing naar de tag bij zolang deze tag is gepauzeerd en / of actieve verzoeken heeft. Let op mogelijke lekken.
Laden vanuit het bestandssysteem
Het is eenvoudig om afbeeldingen lokaal in uw app te laden.
Bestandsbestand = nieuw bestand ("uw / pic / bestand / pad / bestand.png") Picasso.get () .load (bestand) .fit () .into (imageView)
Conclusie
Goed werk! In deze zelfstudie hebt u een complete app met afbeeldingengalerie met Picasso gebouwd en onderweg heeft u geleerd hoe de bibliotheek werkt en hoe u deze kunt integreren in uw eigen project.
U hebt ook geleerd hoe u zowel lokale als externe afbeeldingen kunt weergeven, verzoeken kunt labelen, verzoeken kunt prioriteren en hoe u transformaties van afbeeldingen kunt toepassen, zoals het formaat wijzigen. Niet alleen dat, maar u hebt ook gezien hoe eenvoudig het is om caching, foutafhandeling en luisteraars op maat toe te staan en uit te schakelen.
Voor meer informatie over Picasso, kunt u de officiële documentatie raadplegen. Voor meer informatie over codering voor Android, bekijk enkele van onze andere cursussen en tutorials hier op Envato Tuts+!
Share
Wat je gaat creëren
Accentsconagua
