Share
Hva du skal skapeGlide er et populært Android-bibliotek med åpen kildekode for lasting av bilder, videoer og animerte GIF-er. Med Glide kan du laste og vise media fra mange forskjellige kilder, for eksempel eksterne servere eller det lokale filsystemet.
Som standard bruker Glide en tilpasset implementering av HttpURLConnection for å laste bilder over internett. Imidlertid gir Glide også plugins til andre populære nettverksbiblioteker som Volley eller OkHttp.
Å utvikle din egen medieinnlasting og displayfunksjonalitet i Java kan være en ekte smerte: du må ta vare på caching, dekoding, styring av nettverkstilkoblinger, tråder, unntakshåndtering og mer. Glide er et brukervennlig, godt planlagt, godt dokumentert og grundig testet bibliotek som kan spare deg for mye dyrebar tid - og spare deg for noen hodepine.
I denne opplæringen lærer vi om Glide 3 ved å bygge et enkelt bildegalleri-app. Den vil laste bildene via internett og vise dem som miniatyrbilder i en RecyclerView, og når en bruker klikker på et bilde, åpner den en detaljaktivitet som inneholder det større bildet.
Brann opp Android Studio og opprett et nytt prosjekt med en tom aktivitet som heter Hoved aktivitet.
Etter å ha opprettet et nytt prosjekt, spesifiser du følgende avhengigheter i din build.gradle.
repositories mavenCentral () // jcenter () fungerer også fordi det trekker fra Maven Central avhengigheter // Glide compile 'com.github.bumptech.glide: glide: 3.7.0' // Recyclerview compile 'com.android. støtte: recyclerview-v7: 25.1.1 '
Eller med Maven:
com.github.bumptech.glide glid 3.7.0 com.google.android support-v4 r7
Sørg for at du synkroniserer prosjektet ditt etter å ha tilføyd Glide-avhengigheten.
Hvis du vil bruke et nettverksbibliotek som OkHttp eller Volley i prosjektet ditt for nettverksoperasjoner, anbefales det at du inkluderer den spesifikke Glide-integrasjonen for biblioteket du bruker (i stedet for den standard som binder HttpURLConnection).
avhengigheter compile 'com.github.bumptech.glide: glide: 3.7.0' compile 'com.github.bumptech.glide: volley-integrasjon: 1.4.0@aar' compile 'com.mcxiaoke.volley: bibliotek: 1.0. 8 '
avhengigheter // okhttp 3 compile 'com.github.bumptech.glide: okhttp3-integrasjon: 1.4.0@aar' compile 'com.squareup.okhttp3: okhttp: 3.2.0' // okhttp 2 compile 'com.github. bumptech.glide: okhttp-integrasjon: 1.4.0@aar 'compile' com.squareup.okhttp: okhttp: 2.2.0 '
Du kan besøke den offisielle Glide-integrasjonsbibliotekets guide for mer informasjon.
Siden Glide skal utføre en nettverksforespørsel for å laste bilder via internett, må vi inkludere tillatelsen INTERNETT i vår AndroidManifest.xml.
Vi starter med å lage vår RecyclerView.
Deretter la vi opprette XML-oppsettet som skal brukes for hvert element (Imageview) innen RecyclerView.
Nå som vi har opprettet layoutet, er neste skritt å lage RecyclerView adapter for å fylle data. Før vi gjør det, skjønner vi, la oss lage vår enkle datamodell.
Vi skal definere en enkel datamodell for vår RecyclerView. Denne modellen implementerer Parcelable for høy ytelse transport av data fra en komponent til en annen. I vårt tilfelle vil data bli transportert fra SpaceGalleryActivity til SpacePhotoActivity.
importere android.os.Parcel; importere android.os.Parcelable; offentlig klasse SpacePhoto implementerer Parcelable private String mUrl; Private String mTitle; offentlig SpacePhoto (String url, String title) mUrl = url; mTitle = tittel; beskyttet SpacePhoto (Pakke inn) mUrl = in.readString (); mTitle = in.readString (); offentlig statisk endelig skaperCREATOR = ny skaperen () @Override public SpacePhoto createFromParcel (Pakke inn) returner nytt SpacePhoto (inn); @Override public SpacePhoto [] newArray (int størrelse) returner nytt SpacePhoto [size]; ; offentlig String getUrl () return mUrl; offentlig tomt settUrl (streng url) mUrl = url; offentlig String getTitle () return mTitle; offentlig tomgang setTitle (strengtittel) mTitle = title; offentlig statisk SpacePhoto [] getSpacePhotos () returner ny SpacePhoto [] new SpacePhoto ("http://i.imgur.com/zuG2bGQ.jpg", "Galaxy"), ny SpacePhoto ("http: // i. imgur.com/ovr0NAF.jpg "," Space Shuttle "), ny SpacePhoto (" http://i.imgur.com/n6RfJX2.jpg "," Galaxy Orion "), ny SpacePhoto (" http: // i. imgur.com/qpr5LR2.jpg "," Earth "), ny SpacePhoto (" http://i.imgur.com/pSHXfu5.jpg "," Astronaut "), ny SpacePhoto (" http: //i.imgur. com / 3wQcZeY.jpg "," Satellite "),; @Override public int describeContents () return 0; @Override public void writeToParcel (Parcel pakke, int i) parcel.writeString (mUrl); parcel.writeString (mTitle);
Vi lager en adapter for å fylle RecyclerView med data. Vi vil også implementere en klikklytter for å åpne detaljaktiviteten-SpacePhotoActivity-passerer det en forekomst av SpacePhoto som en ekstra. Detaljeringsaktiviteten viser et nærbilde av bildet. Vi lager den i en senere del.
offentlig klasse MainActivity utvider AppCompatActivity // ... privat klasse ImageGalleryAdapter utvider RecyclerView.Adapter@Override offentlig ImageGalleryAdapter.MyViewHolder onCreateViewHolder (ViewGroup foreldre, int viewType) Context context = parent.getContext (); LayoutInflater inflater = LayoutInflater.from (kontekst); Se photoView = inflater.inflate (R.layout.item_photo, foreldre, false); ImageGalleryAdapter.MyViewHolder viewHolder = ny ImageGalleryAdapter.MyViewHolder (photoView); returnere viewHolder; @Override public void onBindViewHolder (ImageGalleryAdapter.MyViewHolder holder, int posisjon) SpacePhoto spacePhoto = mSpacePhotos [posisjon]; ImageView imageView = holder.mPhotoImageView; @ Overstyr offentlige int getItemCount () return (mSpacePhotos.length); offentlig klasse MyViewHolder utvider RecyclerView.ViewHolder implementerer View.OnClickListener public ImageView mPhotoImageView; offentlig MyViewHolder (Se itemView) super (itemView); mPhotoImageView = (ImageView) itemView.findViewById (R.id.iv_photo); itemView.setOnClickListener (this); @Override public void onClick (Vis visning) int position = getAdapterPosition (); hvis (posisjon! = RecyclerView.NO_POSITION) SpacePhoto spacePhoto = mSpacePhotos [posisjon]; Intent Intent = Ny Intent (mContext, SpacePhotoActivity.class); intent.putExtra (SpacePhotoActivity.EXTRA_SPACE_PHOTO, spacePhoto); startActivity (hensikt); private SpacePhoto [] mSpacePhotos; privat kontekst mContext; offentlig ImageGalleryAdapter (Kontekst kontekst, SpacePhoto [] spacePhotos) mContext = context; mSpacePhotos = spaceBilder;
Det er her vi trenger Glide for å gjøre jobben sin - for å hente bilder fra internett og vise dem i individet Imageviews, ved hjelp av vår RecyclerView onBindViewHolder () Metode som brukeren ruller appen.
// ... @Override public void onBindViewHolder (MyViewHolder-holderen, int posisjon) Photo photo = mPhotoList.get (posisjon); ImageView imageView = holder.mPhotoImageView; Glide.with (mContext) .load (spacePhoto.getUrl ()) .placeholder (R.drawable.ic_cloud_off_red) .into (imageView); // ...
Steg for steg, her er det som kallingene til Glide gjør:
Accentsconagua
med (kontekst kontekst): Vi starter lastprosessen ved først å sende konteksten til med() metode. last (streng streng): Bildekilden er spesifisert som enten en katalogbane, en URI eller en URL.plassholder (int ressursId): En lokal programressurs ID, helst en tegning, som vil være en plassholder til bildet er lastet og vist.inn i (ImageView imageView): Målbildevisningen som bildet skal plasseres i.Vær oppmerksom på at Glide også kan laste inn lokale bilder. Bare pass enten Android ressurs ID, filbanen eller en URI som et argument til laste() metode.
Du kan endre størrelsen på bildet før det vises i Imageview med Glide s .overstyre (int bredde, int høyde) metode. Dette er nyttig for å lage miniatyrer i appen din når du laster inn en annen bildestørrelse fra serveren. Merk at dimensjonene er i piksler ikke dp.
Følgende bildetransformasjoner er også tilgjengelige:
fitCenter (): skalerer bildet jevnt (opprettholder bildeforholdet) slik at bildet passer i det angitte området. Hele bildet vil være synlig, men det kan være vertikal eller horisontal polstring.centerCrop (): skalerer bildet jevnt (opprettholder bildeforholdet) slik at bildet fyller opp det oppgitte området, med så mye av bildet som mulig. Om nødvendig vil bildet bli beskåret horisontalt eller vertikalt for å passe.Her lager vi vår RecyclerView med GridLayoutManager Som layoutleder, initialiser adapteren, og bind den til RecyclerView.
// ... @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); RecyclerView.LayoutManager layoutManager = ny GridLayoutManager (dette, 2); RecyclerView recyclerView = (RecyclerView) findViewById (R.id.rv_images); recyclerView.setHasFixedSize (true); recyclerView.setLayoutManager (layoutManager); ImageGalleryAdapter adapter = ny ImageGalleryAdapter (dette, SpacePhoto.getSpacePhotos ()); recyclerView.setAdapter (adapter); // ...
Opprett en ny aktivitet og navn den SpacePhotoActivity. Vi får SpacePhoto ekstra og last bildet med Glide som vi gjorde før. Her forventer vi at filen eller nettadressen skal være en bitmap, så vi skal bruke asBitmap () til at Glide mottar en bitmap. Ellers vil lasten mislykkes og .feil() tilbakeringing vil bli utløst - forårsaker at den trekkbare ressursen returneres fra feiloppringningen som skal vises.
Du kan også bruke asGif () hvis du ønsket å sikre at det lastede bildet ditt var en GIF. (Jeg skal forklare hvordan GIF fungerer i Glide snart.)
importer android.graphics.Bitmap; importere android.graphics.Color; importere android.os.Bundle; importer android.support.v7.app.AppCompatActivity; importer android.support.v7.graphics.Palette; importer android.view.ViewGroup; importer android.widget.ImageView; importer com.bumptech.glide.Glide; importer com.bumptech.glide.request.RequestListener; importer com.bumptech.glide.request.target.Target; offentlig klasse SpacePhotoActivity utvider AppCompatActivity offentlig statisk endelig streng EXTRA_SPACE_PHOTO = "SpacePhotoActivity.SPACE_PHOTO"; privat ImageView mImageView; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_photo_detail); mImageView = (ImageView) findViewById (R.id.image); SpacePhoto spacePhoto = getIntent (). GetParcelableExtra (EXTRA_SPACE_PHOTO); Glide.with (this) .load (spacePhoto.getUrl ()) .asBitmap () .error (R.drawable.ic_cloud_off_red) .diskCacheStrategy (DiskCacheStrategy.SOURCE) .into (mImageView);
Legg merke til at vi også har initialisert et unikt cache for de lastede bildene: DiskCacheStrategy.SOURCE. Jeg vil forklare mer om caching i et senere avsnitt.
Her er et oppsett for å vise detaljaktiviteten. Det viser bare en rullbar Imageview som vil vise fulloppløsningsversjonen av det lastede bildet.
Hvis du ser nøye på, ser du at når du besøker et bilde som tidligere ble lastet, laster det enda raskere enn før. Hva gjorde det raskere? Glides caching system, det er hva.
Etter at et bilde er lastet inn en gang fra internett, vil Glide cache det i minnet og på disken, lagre gjentatte nettverksforespørsler og tillater raskere henting av bildet. Så vil Glide først sjekke om et bilde er tilgjengelig i minne eller på disken før du laster det fra nettverket.
Avhengig av søknaden din, kan du likevel unngå cache-for eksempel hvis bildene som vises, sannsynligvis vil endre seg ofte og ikke bli lastet opp.
Du kan unngå minnebufring ved å ringe .skipMemoryCache (sann). Men vær oppmerksom på at bildet fortsatt vil bli cached på disken for å forhindre at du også bruker .diskCacheStrategy (DiskCacheStrategy strategi) metode, som tar en av følgende enumverdier:
DiskCacheStrategy.NONE: Ingen data lagres i cachen.DiskCacheStrategy.SOURCE: Opprinnelige data lagret til cache.DiskCacheStrategy.RESULT: Lagrer resultatet av dataene etter transformasjoner til cachen.DiskCacheStrategy.ALL: cacher både originale data og transformerte data. For å unngå både minne og disk caching helt, bare ring begge metodene etter hverandre:
Glide.with (this) .load (spacePhoto.getUrl ()) .asBitmap () .skipMemoryCache (true) .diskCacheStrategy (DiskCacheStrategy.NONE) .into (imageView);
I Glide kan du implementere en RequestListener for å overvåke statusen til forespørselen du gjorde da bildet lastes. Bare en av disse metodene vil bli kalt.
onException (): utløses når et unntak oppstår, slik at du kan håndtere unntak i denne metoden.onResourceReady (): sparket når bildet er lastet inn. Når vi går tilbake til vårt bildegalleri-app, la oss endre skjermen litt ved hjelp av en RequestListener objekt som vil sette bitmapet til Imageview og også endre bakgrunnsfargen på oppsettet ved å trekke ut den mørke og vibrerende fargen på bildet vårt ved hjelp av Android Palette API.
