Picasso este o populară bibliotecă Android deschisă pentru încărcarea imaginilor locale și de la distanță. Aflați cum să o utilizați cu ușurință pentru a vă gestiona nevoile de încărcare a imaginii.
1. Ce este Picasso?
Picasso (numele inspirat de faimosul artist francez Pablo Picasso) este o foarte populară bibliotecă open source Android pentru încărcarea imaginilor în aplicația Android. Potrivit documentelor oficiale, acesta prevede:
... Picasso permite încărcarea imaginii fără probleme în aplicația dvs. - adesea într-o singură linie de cod!
Rețineți că Picasso folosește OkHttp (o bibliotecă de rețea de la același dezvoltator) sub hota pentru a încărca imaginile pe internet.
2. Deci, de ce folosiți Picasso?
Acum, ați învățat despre ce se referă Picasso, următoarea întrebare pe care ați putea să o întrebați este motivul pentru care o utilizați?
Dezvoltarea propriilor funcții de încărcare și afișare a conținutului în Java sau Kotlin poate fi o adevărată durere: trebuie să aveți grijă de caching, decodare, gestionarea conexiunilor de rețea, filetarea, tratarea excepțiilor și multe altele. Picasso este o bibliotecă ușor de utilizat, bine planificată, bine documentată și bine testată, care vă poate economisi o mulțime de timp prețios - și vă poate salva unele dureri de cap.
Iată câteva dintre capcanele obișnuite de încărcare a imaginilor pe Android care sunt tratate pentru dvs. de către Picasso, conform documentelor oficiale:
manipulare ImageView reciclarea și anularea descărcării într-un adaptor
transformări de imagine complexe cu utilizare minimă a memoriei
memoria automată și cache-ul pe disc
Adăugarea de imagini în aplicația dvs. poate face ca aplicația dvs. Android să fie în viață. Deci, în acest tutorial, vom afla despre Picasso 2 prin construirea unei aplicații simple de galerie de imagini. Acesta va încărca imaginile prin Internet și le va afișa ca miniaturi într-un RecyclerView, iar atunci când un utilizator face clic pe o imagine, va deschide o activitate detaliată care conține imaginea mai mare.
Un exemplu de proiect (în Kotlin) pentru acest tutorial poate fi găsit pe replica noastră GitHub, pentru a putea urmări cu ușurință.
Artiștii buni copiați, marii artiști fură. - Pablo Picasso
3. Cerințe preliminare
Pentru a putea urma acest tutorial, veți avea nevoie de:
o înțelegere de bază a API-urilor Android core și Kotlin
Android Studio 3.1.1 sau o versiune ulterioară
Kotlin plugin 1.2.30 sau mai mult
Activați Android Studio și creați un nou proiect (îl puteți numi PicassoDemo) cu o activitate goală numită Activitate principala. Asigurați-vă că verificați, de asemenea Includeți suportul Kotlin Caseta de bifat.
4. Declararea dependențelor
După ce ați creat un nou proiect, specificați următoarele dependențe în build.gradle. La momentul scrierii, cea mai recentă versiune a lui Picasso este 2,71828.
Asigurați-vă că vă sincronizați proiectul după ce ați adăugat Picasso și RecyclerView artefacte V7.
5. Adăugați Permisiune Internet
Deoarece Picasso va efectua o solicitare de rețea pentru a încărca imagini prin intermediul internetului, trebuie să includeți permisiunea INTERNET în a noastră AndroidManifest.xml.
Deci, fă asta acum!
Rețineți că acest lucru este necesar numai dacă intenționați să încărcați imagini de pe Internet. Acest lucru nu este necesar dacă încărcați imagini numai pe dispozitiv.
6. Creați aspectul
Vom începe prin crearea noastră RecyclerView în interiorul activity_main.xml layout file.
Crearea aspectului elementului personalizat
Apoi, să creați aspectul XML (item_image.xml) care vor fi folosite pentru fiecare element (ImageView) în cadrul RecyclerView.
Acum, că am creat planurile necesare pentru aplicația noastră simplă de galerie, următorul pas este să creați RecyclerView adaptor pentru stocarea datelor. Înainte de a face acest lucru, totuși, să creăm modelul nostru simplu de date.
7. Creați un model de date
Vom defini un model de date simplu pentru noi RecyclerView. Acest model implementează Parcelable pentru transportul performant de date de la o componentă la alta în Android. În cazul nostru, datele vor fi transportate de la SunsetGalleryActivity la SunsetPhotoActivity.
clasa de date SunsetPhoto (val url: String): Parcelabilă constructor (parcelă: parcelă): this (parcel.readString ()) suprascrie fun writeToParcel parcelă, parcele: Int) parcel.writeString (url) (): Int return 0 obiect însoțitor CREATOR: Parcelable.Creator suprascrie distracție createFromParcel (parcelă: Parcelă): SunsetPhoto retur SunsetPhoto (parcelă) suprascrie fun newArray (dimensiune: Int): Array return arrayOfNulls (dimensiune)
Rețineți că acest model SunsetPhoto are doar un câmp numit URL-ul (pentru scopuri demo), dar puteți avea mai mult dacă doriți. Această clasă implementează Parcelable, ceea ce înseamnă că trebuie să ignorăm anumite metode.
Putem folosi Android Studio IDEA pentru a genera aceste metode pentru noi, dar dezavantajul acestui lucru este întreținerea. Cum? De fiecare dată când adăugăm noi câmpuri la această clasă, s-ar putea să uităm să actualizăm în mod explicit constructor și writeToParcel metode care pot duce la unele erori dacă nu actualizăm metodele.
Acum, pentru a evita actualizarea sau scrierea acestor metode de boilerplate, Kotlin 1.1.14 a introdus @Parcelize adnotare. Această adnotare ne va ajuta să generăm writeToParcel, writeFromParcel, și describeContents metode automat sub capota pentru noi.
@Parcelize clasa de date SunsetPhoto (val url: String): Parcelabil
Acum, codul nostru SunsetPhoto clasa este doar două linii! Minunat!
Nu uitați să adăugați următorul cod în modulul dvs. de aplicație build.gradle:
androidExtensions experimental = true
În plus, am inclus un obiect însoțitor (sau o metodă statică în Java) getSunsetPhotos () în SunsetPhoto clasa de modele care va returna pur și simplu un ArrayList de SunsetPhoto când este chemat.
Vom crea un adaptor pentru a ne popula RecyclerView cu date. Vom implementa, de asemenea, un ascultător de clicuri pentru a deschide activitatea detaliată-SunsetPhotoActivity-trecând o instanță de SunsetPhoto ca o intenție în plus. Activitatea detaliată va afișa o imagine de fundal a imaginii. O vom crea într-o secțiune ulterioară.
class MainActivity: AppCompatActivity () // ... clasă privată privată ImageGalleryAdapter (val context: Context, val sunsetFotografie: Array): RecyclerView.Adapter() suprascris 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, false) return MyViewHolder (photoView) suprascrie distracția onBindViewHolder (titular: ImageGalleryAdapter.MyViewHolder, position: Int) val sunsetPhoto = sunsetFotografie [position] val imageView = holder.photoImageView override fun getItemCount (): Int return sunsetPhotos.size clasa interioara MyViewHolder (itemView: View): RecyclerView.ViewHolder (itemView), View.OnClickListener var photoImageView: ImageView = itemView.findViewById (R.id.iv_photo) init itemView.setOnClickListener (this) suprascrie fun onClick View) val position = adapterPoziția if (position! = RecyclerView.NO_POSITION) valul sunsetPhoto = sunsetFotografia [position] val intent = Intent (context, SunsetPhotoActivity :: class.java) .apply putExtra (SunsetPhotoActivity.EXTRA_SUNSET_PHOTO, sun setPhoto) startActivitate (intenție)
Observați că am folosit aplica extensie pentru a pune un obiect în plus față de intenție. Ca reamintire, aplica funcția returnează obiectul care ia fost transmis ca argument (adică obiectul receptorului).
9. Încărcarea imaginilor dintr-o adresă URL
Vom avea nevoie de Picasso pentru a-și face treaba în această secțiune - să nu ne picteze o lucrare de artă, ci să scoatem imagini de pe internet și să le afișăm. Vom afișa aceste imagini în mod individual ImageViewîn interiorul nostru RecyclerViewonBindViewHolder () deoarece utilizatorul derulează aplicația.
Pas cu pas, iată la ce trebuie să faceți apelurile Picasso fac:
obține() Metodă
Aceasta returnează valoarea globală Picasso instanță (instanță singleton) inițializată cu următoarele configurații implicite:
LRU cache de memorie de 15% din memoria RAM a aplicației.
Disk cache de spațiu de stocare de 2% până la 50MB, dar nu mai puțin de 5MB. Notă: acest lucru este disponibil numai în API 14+.
Trei file de descărcare pentru accesul pe disc și în rețea.
Rețineți că, dacă aceste setări nu corespund cerințelor aplicației dvs., sunteți liber să construiți propriile dvs. Picasso exemplu, cu controlul complet al acestor configurații prin utilizarea Picasso.Builder.
val picassoBuilder = Picasso.Builder (context) // face configurații personalizate // Specificați @link Downloader care va fi folosit pentru descărcarea imaginilor. picassoBuilder.downloader () // Specificați ExecutorService pentru încărcarea imaginilor în fundal. picassoBuilder.executor () // Specificați cache-ul de memorie folosit pentru cele mai recente imagini. picassoBuilder.memoryCache () // și mai mult val picasso = picassoBuilder.build ()
În cele din urmă, apelați construi() metoda de a vă întoarce a Picasso exemplu cu propriile configurații.
Este recomandat să faceți acest lucru în dvs. Application.onCreate și apoi setați-l ca instanța singleton cu Picasso.setSingletonInstance în această metodă - pentru a vă asigura că Picasso exemplu este cel global.
sarcină() Metodă
încărcare (calea de coarde) pornește o cerere de imagine utilizând calea specificată. Această cale poate fi o adresă URL la distanță, o resursă de fișier, o resursă de conținut sau o resursă Android.
placeholder (int placeholderResId): un id de resursă localizată sau un traseu care poate fi utilizat în timp ce imaginea este încărcată și apoi afișată. Acesta servește ca o bună experiență a utilizatorului pentru a afișa o imagine cu destinația substituentului în timp ce imaginea se descarcă.
Rețineți că Picasso verifică mai întâi dacă imaginea solicitată se află în cache-ul de memorie și, dacă este așa, afișează imaginea de acolo (vom discuta mai mult despre cache în Picasso într-o secțiune ulterioară).
Alte metode
eroare (int errorResId): un trasabil care va fi folosit dacă imaginea solicitată nu a putut fi încărcată - probabil pentru că site-ul este în jos.
noFade (): Picasso întotdeauna se estompează în imagine pentru a fi afișat în ImageView. Dacă nu doriți această animație de decolorare, pur și simplu apelați noFade () metodă.
în (ImageView imageView): afișarea imaginii țintă în care va fi plasată imaginea.
Image Resizing și Transformation
Dacă serverul de la care solicitați imaginea nu vă oferă imaginea de care aveți nevoie la dimensiunea necesară, puteți redimensiona cu ușurință imaginea utilizând redimensionați (int targetWidth, int targetHeight). Apelarea acestei metode redimensionează imaginea și apoi o afișează pe ImageView. Rețineți că dimensiunile sunt în pixeli (px), nu dp.
Puteți trece într-o resursă de dimensiune Android atât pentru lățime cât și pentru înălțime, utilizând metoda resizeDimen (int targetWidthResId, int targetHeightResId). Această metodă va converti dimensiunea dimensiunii la pixeli brute și apoi va apela redimensionarea () sub capotă - trecând dimensiunile convertite (în pixeli) ca argumente.
Rețineți că aceste metode de redimensionare nu vor respecta raportul de aspect. Cu alte cuvinte, raportul de aspect al imaginii poate fi distorsionat.
din fericire, Picasso ne oferă câteva metode utile pentru a rezolva această problemă:
centerCrop (): Salvează imaginea uniform (menținând raportul de aspect al imaginii), astfel încât imaginea să umple suprafața dată, cu cât mai multă imagine arătată posibil. Dacă este necesar, imaginea va fi tăiată orizontal sau vertical pentru a se potrivi. Apelarea acestei metode captează o imagine în interiorul limitelor specificate de redimensionarea ().
centerInside (): micșorează imaginea astfel încât ambele dimensiuni să fie egale sau mai mici decât limitele solicitate. Aceasta va centra o imagine în interiorul limitelor specificate de redimensionarea ().
onlyScaleDown (): redimensionați numai o imagine dacă dimensiunea originală a imaginii este mai mare decât dimensiunea țintă specificată de redimensionarea ().
potrivi(): încercați să redimensionați imaginea pentru a se încadra exact în țintă ImageViewlimitele.
Rotația imaginilor
Picasso are un API ușor pentru a roti o imagine și apoi a afișa acea imagine. rotiți (grade plutitoare) metoda rotește imaginea la gradele specificate.
Picasso.get () // ... rotate (90f) // ...
În exemplul de mai sus, aceasta va roti imaginea cu 90 de grade. rotiți (grade plutitoare, pivotul plutitor, pivotul plutitor) metoda rotește imaginea la gradele specificate în jurul unui punct pivot.
Aici vom roti imaginea cu 30 de grade în jurul punctului de pivotare 200, 100 de pixeli.
Transformare
În afară de manipularea unei imagini prin rotirea ei, Picasso ne oferă, de asemenea, opțiunea de a aplica o transformare personalizată unei imagini înainte de ao afișa.
Pur și simplu creați o clasă care implementează Picasso Transformare interfață. Trebuie să suprascrieți două metode:
Transformare bitmap (sursă bitmap): aceasta transformă bitmapul sursă într-un bitmap nou.
Tasta șir (): returnează o cheie unică pentru transformare, utilizată în scopuri de cache.
După ce ați terminat procesul de creare a transformării personalizate, pur și simplu o executați invocând transformare (Transformare transformare) pe instanța Picasso. Rețineți că puteți trece și o listă cu Transformare la transforma().
Aici, am aplicat o transformare a culturilor în cercul imaginii din biblioteca Android Open Source cu transformări Picasso. Această bibliotecă are numeroase transformări pe care le puteți aplica unei imagini cu Picasso - inclusiv transformări pentru estomparea sau scalarea unei imagini. Verificați dacă doriți să aplicați unele transformări reci pe imaginile dvs..
10. Inițializarea adaptorului
Aici, ne creăm pur și simplu RecyclerView cu GridLayoutManager ca manager de layout, inițializați adaptorul nostru și legați-l de acesta RecyclerView.
class MainActivity: AppCompatActivity () privat lateinit var reciclerView: RecyclerView privat lateinit var imagineGalleryAdapter: ImageGalleryAdapter suprascrie fun onCreate (savedInstanceState: Bundle?) // ... val layoutManager = GridLayoutManager (acest lucru, 2) recyclerView = findViewById (R.id.rv_images ) reciclerView.setHasFixedSize (adevărat) reciclerView.layoutManager = layoutManager imageGalleryAdapter = ImageGalleryAdapter (this, SunsetPhoto.getSunsetPhotos ()) suprascrie fun onStart () super.onStart () reciclerView.adapter =
11. Crearea activității detaliilor
Creați o nouă activitate și denumiți-o SunsetPhotoActivity. Noi primim SunsetPhoto extra și încărcați imaginea în interior onStart ()-cu Picasso, așa cum am făcut înainte.
Iată un aspect pentru afișarea activității detaliate. Pur și simplu afișează un ImageView care va afișa versiunea cu rezoluție completă a imaginii încărcate.
12. Mecanismul de caching în Picasso
Dacă observați cu atenție, veți observa că atunci când revizuiți o imagine încărcată anterior, aceasta se încarcă chiar mai repede decât înainte. Ce a făcut mai repede? Este mecanismul de caching al lui Picasso.
Iată ce se întâmplă sub capotă. După ce o imagine a fost încărcată o dată de pe internet, Picasso o va memora în memorie și pe disc, salvând cereri de rețea repetate și permițând recuperarea mai rapidă a imaginii. Atunci când imaginea este necesară din nou, Picasso va verifica mai întâi dacă imaginea este disponibilă în memorie și, dacă este acolo, o va returna imediat. Dacă imaginea nu este în memorie, Picasso va verifica discul următor și, dacă este acolo, îl va întoarce. Dacă nu este acolo, Picasso va face în sfârșit o solicitare de rețea pentru acea imagine și o va afișa.
În concluzie, iată ce se întâmplă (sub capota) pentru o solicitare de imagine: memorie -> disc -> rețea.
În funcție de aplicația dvs., poate doriți să evitați cache-de exemplu, dacă imaginile afișate sunt susceptibile de a se schimba frecvent și să nu fie reîncărcate.
Deci, cum dezactivezi caching-ul?
Puteți evita cache-ul de memorie apelând memoryPolicy (MemoryPolicy.NO_CACHE). Acest lucru va pur și simplu sări peste căutarea cache-ului de memorie atunci când procesează o cerere de imagine.
Rețineți că există un alt enum: MemoryPolicy.NO_STORE. Acest lucru este util dacă sunteți foarte sigur că veți solicita o singură dată o singură imagine. Aplicând acest lucru, de asemenea, nu se va stoca imaginea în cache-ul de memorie - prin aceasta nu se fortează alte bitmap-uri din cache-ul de memorie.
Dar fiți foarte conștienți de faptul că imaginea va fi încă stocată în cache pe disc - pentru a împiedica acest lucru, de asemenea, pe care îl utilizați networkPolicy (politica @NonNull NetworkPolicy, @NonNull NetworkPolicy ... suplimentar), care ia una sau mai multe din următoarele valori enum:
NetworkPolicy.NO_CACHE: sări peste cache-ul de disc și forțează încărcarea prin rețea.
NetworkPolicy.NO_STORE: ignoră stocarea rezultatului în memoria cache a discului.
NetworkPolicy.OFFLINE: forțează cererea numai prin cache-ul de disc, sărind peste rețea.
Pentru a evita atât cache-ul, cât și memoria cache-ului, trebuie să apelați ambele metode una după alta:
În Picasso, puteți implementa un ascultător sau un apel invers pentru a monitoriza starea solicitării pe care ați făcut-o în timpul încărcării imaginii. Numai una dintre aceste metode va fi chemată dacă implementați Ţintă interfață la cerere.
void onBitmapFailed (e: Exception ?, errorDrawable: Drawable?): declanșat ori de câte ori imaginea nu a putut fi încărcată cu succes. Aici putem accesa excepția care a fost aruncată.
void onBitmapLoaded (Bitmap bitmap, LoadedFrom): declanșat ori de câte ori o imagine a fost încărcată cu succes. Aici, vom obține Bitmap-ul pentru a afișa utilizatorului.
void onPrepareLoad (trasabil placeHolderDrawable): invocată chiar înainte de trimiterea solicitării.
Aici puteți afișa și apoi ascundeți un dialog de progres dacă ați avea unul.
Există un alt ascultător de callback pe care îl puteți implementa dacă doriți, numit Suna inapoi. Această interfață are doar două metode: onSuccess () și onError (excepție e). Primul este apelat când încărcarea cererii de imagine a avut succes, iar ultima este apelată atunci când există o eroare în procesarea solicitării.
Revenind la aplicația noastră de galerie de imagini (în interiorul SunsetPhotoActivity), să modificăm afișajul puțin, utilizând a Suna inapoi obiect care va seta bitmap la ImageView și, de asemenea, să schimbați culoarea de fundal a aspectului prin extragerea culorii întunecate și vibrante a imaginii noastre utilizând API Paletă API.
Așa că includeți artefactul paletei în modulul dvs. de aplicație build.gradle:
Să implementăm acum Suna inapoi interfață în cererea noastră Picasso.
(R.drawable.placeholder) .error (R.drawable.error) .fit () .into (imagineView, obiect: Callback suprascrie fun onSuccess () val bitmap = (imageView.drawable ca BitmapDrawable) .bitmap onPalette (Palette.from (bitmap) .generate ()) suprascrie fun onError (e: Exception?) Funcționare pe paletă (paletă: paletă) if (null! = paletă) val parent = imageView.parent.parent ca ViewGroup parent.setBackgroundColor (palette.getDarkVibrantColor (Color.GRAY)
14. Testarea aplicației
În cele din urmă, puteți rula aplicația! Faceți clic pe o miniatură pentru a obține o versiune de dimensiune completă a imaginii.
15. Prioritizarea cererilor
Când doriți să încărcați simultan diferite imagini pe același ecran, aveți opțiunea de a ordona care este mai important decât celălalt. Cu alte cuvinte, puteți încărca mai întâi imagini importante.
Pur și simplu sunați prioritate() pe exemplul dvs. de cerere Picasso și treceți în oricare din enumuri: Priority.LOW, Priority.NORMAL, sau Priority.HIGH.
Etichetarea cererilor dvs. Picasso vă permite să reluați, să întrerupeți sau să anulați cererile care sunt asociate cu etichete specifice. În funcție de cazul dvs. de utilizare, puteți să vă etichetați cererile cu un șir sau obiecte care ar trebui să definească domeniul de aplicare a solicitării ca a Context, un Activitate, sau a Fragment. Puteți să etichetați cu ușurință o solicitare Picasso sunând tag (@NonNull tag de obiect) pe unu. Treceți-l cu o instanță Obiect care servește ca etichetă.
Iată câteva operații pe care le puteți efectua cu cererile Picasso etichetate:
pauseTag (eticheta obiectului): întrerupeți toate solicitările asociate tagului dat.
resumeTag (eticheta obiectului): reluați solicitările întrerupte cu eticheta dată.
cancelTag (eticheta obiectului): anulați orice solicitare existentă cu eticheta dată.
Picasso.get () // ... tag (context
Deși etichetarea cererilor dvs. vă oferă un anumit control asupra solicitărilor dvs., trebuie să fiți foarte atenți atunci când utilizați etichete din cauza potențialului de scurgeri de memorie. Iată ce spune documentația oficială:
Picasso va păstra o referință la etichetă atâta timp cât această etichetă este întreruptă și / sau are solicitări active. Căutați scurgeri potențiale.
Încărcare din sistemul de fișiere
Este simplu să încărcați imagini în mod local în aplicația dvs..
Buna treaba! În acest tutorial, ați construit o aplicație completă a galeriei de imagini cu Picasso și pe parcurs ați învățat cum funcționează biblioteca și cum o puteți integra în propriul proiect.
De asemenea, ați învățat cum să afișați atât imagini locale, cât și imagini la distanță, solicitări de etichetare, prioritizarea cererilor și cum să aplicați transformări de imagine, cum ar fi redimensionarea imaginilor. Nu numai că, dar ați văzut cât de ușor este să activați și să dezactivați memorarea în cache, gestionarea erorilor și ascultătorii personalizați ai solicitărilor.
Pentru a afla mai multe despre Picasso, vă puteți referi la documentația oficială. Pentru a afla mai multe despre codificarea pentru Android, consultați câteva dintre celelalte cursuri și tutoriale de aici, pe Envato Tuts+!
Share
Ce veți crea
Accentsconagua
