Share
Wat je gaat creërenGlide is een populaire open-source Android-bibliotheek voor het laden van afbeeldingen, video's en geanimeerde GIF's. Met Glide kunt u media uit veel verschillende bronnen laden en weergeven, zoals externe servers of het lokale bestandssysteem.
Glide gebruikt standaard een aangepaste implementatie van HttpURLConnection om afbeeldingen via internet te laden. Glide biedt echter ook plug-ins voor andere populaire netwerkbibliotheken, zoals Volley of OkHttp.
Het ontwikkelen van uw eigen media-laad- en weergavefunctionaliteit in Java kan heel lastig zijn: u moet zorgen voor caching, decodering, beheer van netwerkverbindingen, threading, afhandeling van uitzonderingen en meer. Glide 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.
In deze zelfstudie leren we over Glide 3 door een eenvoudige app voor afbeeldingen te maken. 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.
Start uw Android Studio op en maak een nieuw project met een lege activiteit genaamd Hoofdactiviteit.
Nadat u een nieuw project hebt gemaakt, geeft u de volgende afhankelijkheden op in uw build.gradle.
opslagplaatsen mavenCentral () // jcenter () werkt ook omdat het afhankelijk is van Maven Central afhankelijkheden // Glide compile 'com.github.bumptech.glide: glide: 3.7.0' // Recyclerview compile 'com.android. ondersteuning: recyclerview-v7: 25.1.1 '
Of met Maven:
com.github.bumptech.glide glijden 3.7.0 com.google.android support-v4 r7
Zorg ervoor dat u uw project synchroniseert nadat u de Glide-afhankelijkheid heeft toegevoegd.
Als u een netwerkbibliotheek zoals OkHttp of Volley in uw project wilt gebruiken voor netwerkbewerkingen, is het aan te bevelen om de specifieke Glide-integratie op te nemen voor de bibliotheek die u gebruikt (in plaats van de standaardglide die HttpURLConnection bundelt).
afhankelijkheden compile 'com.github.bumptech.glide: glide: 3.7.0' compile 'com.github.bumptech.glide: volley-integration: 1.4.0@aar' compile 'com.mcxiaoke.volley: library: 1.0. 8 '
dependencies // okhttp 3 compile 'com.github.bumptech.glide: okhttp3-integration: 1.4.0@aar' compile 'com.squareup.okhttp3: okhttp: 3.2.0' // okhttp 2 compileer 'com.github. bumptech.glide: okhttp-integration: 1.4.0@aar 'compile' com.squareup.okhttp: okhttp: 2.2.0 '
U kunt de officiële Glide-integratiebibliothekengids bezoeken voor meer informatie.
Aangezien Glide een netwerkverzoek gaat doen om afbeeldingen via internet te laden, moeten we de toestemming opnemen INTERNET in onze AndroidManifest.xml.
We beginnen met het maken van onze RecyclerView.
Laten we vervolgens de XML-lay-out maken die voor elk item wordt gebruikt (Figuurweergave) binnen de RecyclerView.
Nu we de lay-out hebben gemaakt, 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.
We gaan een eenvoudig gegevensmodel definiëren voor onze RecyclerView. Dit model implementeert Pakketabel voor hoogwaardig transport van gegevens van de ene component naar de andere. In ons geval worden gegevens getransporteerd van SpaceGalleryActivity naar SpacePhotoActivity.
import android.os.Parcel; import android.os.Parcelable; public class SpacePhoto implementeert Parcelable private String mUrl; private String mTitle; openbare SpacePhoto (String-URL, String-titel) mUrl = url; mTitle = titel; beschermde SpacePhoto (pakket in) mUrl = in.readString (); mTitle = in.readString (); public static final CreatorCREATOR = nieuwe maker () @Override openbare SpacePhoto createFromParcel (Pakket in) retourneer nieuwe SpacePhoto (in); @Overleden openbare SpacePhoto [] newArray (int size) plaats nieuwe SpacePhoto [size]; ; public String getUrl () return mUrl; public void setUrl (String url) mUrl = url; public String getTitle () return mTitle; public void setTitle (String title) mTitle = title; public static SpacePhoto [] getSpacePhotos () retourneer nieuwe SpacePhoto [] nieuwe SpacePhoto ("http://i.imgur.com/zuG2bGQ.jpg", "Galaxy"), nieuwe SpacePhoto ("http: // i. imgur.com/ovr0NAF.jpg "," Space Shuttle "), nieuwe SpacePhoto (" http://i.imgur.com/n6RfJX2.jpg "," Galaxy Orion "), nieuwe SpacePhoto (" http: // i. imgur.com/qpr5LR2.jpg "," Earth "), nieuwe SpacePhoto (" http://i.imgur.com/pSHXfu5.jpg "," Astronaut "), nieuwe SpacePhoto (" http: //i.imgur. com / 3wQcZeY.jpg "," Satellite "),; @Override public int describeContents () return 0; @Override public void writeToParcel (pakketpakket, int i) parcel.writeString (mUrl); parcel.writeString (mTitle);
We zullen een adapter maken om de RecyclerView met gegevens te vullen. We implementeren ook een kliklistener om de detailactiviteit te openen-SpacePhotoActivity-het doorgeven van een instantie van SpacePhoto als een extra. De detailactiviteit toont een close-up van de afbeelding. We zullen het in een later hoofdstuk maken.
public class MainActivity breidt AppCompatActivity uit // ... private class ImageGalleryAdapter breidt RecyclerView.Adapter uit@Override public ImageGalleryAdapter.MyViewHolder onCreateViewHolder (ViewGroup-bovenliggende, int viewType) Context-context = parent.getContext (); LayoutInflater inflater = LayoutInflater.from (context); Bekijk photoView = inflater.inflate (R.layout.item_photo, parent, false); ImageGalleryAdapter.MyViewHolder viewHolder = new ImageGalleryAdapter.MyViewHolder (photoView); return viewHolder; @Override public void onBindViewHolder (ImageGalleryAdapter.MyViewHolder-houder, int-positie) SpacePhoto spacePhoto = mSpacePhotos [positie]; ImageView imageView = holder.mPhotoImageView; @Override public int getItemCount () return (mSpacePhotos.length); public class MyViewHolder breidt RecyclerView uit. ViewHolder implementeert View.OnClickListener public ImageView mPhotoImageView; public MyViewHolder (Bekijk itemView) super (itemView); mPhotoImageView = (ImageView) itemView.findViewById (R.id.iv_photo); itemView.setOnClickListener (deze); @Override public void onClick (View view) int position = getAdapterPosition (); if (positie! = RecyclerView.NO_POSITION) SpacePhoto spacePhoto = mSpacePhotos [positie]; Intent intent = new Intent (mContext, SpacePhotoActivity.class); intent.putExtra (SpacePhotoActivity.EXTRA_SPACE_PHOTO, spacePhoto); startActivity (intent); private SpacePhoto [] mSpacePhotos; private context mContext; public ImageGalleryAdapter (Context-context, SpacePhoto [] spacePhotos) mContext = context; mSpacePhotos = spacePhotos;
Dit is waar Glide nodig is om zijn werk te doen - om afbeeldingen van internet te halen en in het individu weer te geven Figuurweergaves, met behulp van onze RecyclerView onBindViewHolder () methode wanneer de gebruiker door de app bladert.
// ... @Override public void onBindViewHolder (MyViewHolder-houder, int-positie) Photo photo = mPhotoList.get (positie); ImageView imageView = holder.mPhotoImageView; Glide.with (mContext) .load (spacePhoto.getUrl ()) .placeholder (R.drawable.ic_cloud_off_red) .into (imageView); // ...
Stap voor stap, hier zijn wat de calls to Glide aan het doen zijn:
Accentsconagua
met (context context): we beginnen met het laadproces door eerst onze context door te geven aan de met() methode. laden (String string): de afbeeldingsbron wordt opgegeven als een mappad, een URI of een URL.placeholder (int resourceId): een lokale toepassingsresource-id, bij voorkeur een drawable, die een tijdelijke aanduiding zal zijn totdat de afbeelding wordt geladen en weergegeven.naar (ImageView imageView): de doelbeeldweergave waarin de afbeelding zal worden geplaatst.Houd er rekening mee dat Glide ook lokale afbeeldingen kan laden. Geef gewoon de Android-resource-ID, het bestandspad of een URI door als argument voor de laden() methode.
U kunt het formaat van de afbeelding wijzigen voordat deze wordt weergegeven in de Figuurweergave met Glide's .override (int width, int height) methode. Dit is handig voor het maken van miniaturen in uw app bij het laden van een ander afbeeldingsformaat van de server. Merk op dat de afmetingen in pixels zijn, niet dp.
De volgende beeldtransformaties zijn ook beschikbaar:
Fitcenter (): schaalt het beeld gelijkmatig (waarbij de beeldverhouding behouden blijft) zodat het beeld in het gegeven gebied past. De volledige afbeelding is zichtbaar, maar er kan een verticale of horizontale opvulling zijn.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.Hier creëren we onze RecyclerView met GridLayoutManager als lay-outmanager, initialiseer onze adapter en bind deze aan de RecyclerView.
// ... @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); RecyclerView.LayoutManager layoutManager = new GridLayoutManager (this, 2); RecyclerView recyclerView = (RecyclerView) findViewById (R.id.rv_images); recyclerView.setHasFixedSize (true); recyclerView.setLayoutManager (layoutManager); ImageGalleryAdapter-adapter = nieuwe ImageGalleryAdapter (dit, SpacePhoto.getSpacePhotos ()); recyclerView.setAdapter (adapter); // ...
Maak een nieuwe activiteit en noem deze SpacePhotoActivity. We krijgen de SpacePhoto extra en laad de afbeelding met Glide zoals we eerder deden. Hier verwachten we dat het bestand of de URL een is Bitmap, dus we zullen gebruiken asBitmap () om ervoor te zorgen dat die Glide een ontvangt Bitmap. Anders zal de belasting mislukken en de .fout() callback wordt geactiveerd, waardoor de drawable bron die wordt geretourneerd door de fout callback wordt getoond.
Je zou ook kunnen gebruiken asGif () als je ervoor wilde zorgen dat je geladen afbeelding een GIF was. (Ik zal binnenkort uitleggen hoe GIF's in Glide werken.)
importeer android.graphics.Bitmap; importeer android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.graphics.Palette; import android.view.ViewGroup; import android.widget.ImageView; import com.bumptech.glide.Glide; import com.bumptech.glide.request.RequestListener; import com.bumptech.glide.request.target.Target; public class SpacePhotoActivity breidt AppCompatActivity uit public static final String EXTRA_SPACE_PHOTO = "SpacePhotoActivity.SPACE_PHOTO"; privé 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);
Merk op dat we ook een unieke cache initialiseerden voor de geladen afbeeldingen: DiskCacheStrategy.SOURCE. In een later gedeelte zal ik meer uitleg geven over caching.
Hier is een lay-out om de detailactiviteit weer te geven. Het toont gewoon een schuifbaar Figuurweergave die de versie met volledige resolutie van de geladen afbeelding laat zien.
Als u goed kijkt, ziet u dat wanneer u een eerder geladen afbeelding opnieuw bezoekt, deze nog sneller dan voorheen wordt geladen. Wat maakte het sneller? Glide's caching-systeem, dat is wat.
Nadat een afbeelding eenmaal via internet is geladen, slaat Glide deze in het geheugen en op de harde schijf op, waardoor herhaalde netwerkaanvragen worden opgeslagen en de afbeelding sneller kan worden opgehaald. Glide controleert dus eerst of een afbeelding beschikbaar is in het geheugen of op de schijf voordat deze vanuit het netwerk wordt geladen.
Afhankelijk van uw toepassing wilt u mogelijk cachegeheugen vermijden, bijvoorbeeld als de weergegeven afbeeldingen waarschijnlijk vaak worden gewijzigd en niet opnieuw worden geladen.
U kunt geheugencache vermijden door te bellen .skipMemoryCache (true). Houd er echter rekening mee dat de afbeelding nog steeds in de cache op de schijf wordt opgeslagen om te voorkomen dat u ook de afbeelding gebruikt .diskCacheStrategy (DiskCacheStrategy-strategie) methode, die een van de volgende opsommingswaarden heeft:
DiskCacheStrategy.NONE: er worden geen gegevens in de cache opgeslagen.DiskCacheStrategy.SOURCE: originele gegevens opgeslagen in cache.DiskCacheStrategy.RESULT: slaat het resultaat van de gegevens op na transformaties in de cache.DiskCacheStrategy.ALL: cached zowel originele gegevens als getransformeerde gegevens. Om zowel geheugen- als schijfcaching helemaal te vermijden, roept u beide methoden na elkaar op:
Glide.with (this) .load (spacePhoto.getUrl ()) .asBitmap () .skipMemoryCache (true) .diskCacheStrategy (DiskCacheStrategy.NONE) .into (imageView);
In Glide kunt u een RequestListener om de status van het verzoek dat u hebt gemaakt tijdens het laden van de afbeelding te controleren. Slechts een van deze methoden wordt gebruikt.
onException (): geactiveerd wanneer er een uitzondering optreedt, zodat u uitzonderingen kunt verwerken in deze methode.onResourceReady (): ontslagen wanneer de afbeelding is geladen. Terugkomend op onze app voor afbeeldingengallerij, laten we de weergave een beetje aanpassen met behulp van a RequestListener object dat de bitmap op de Figuurweergave en verander ook de achtergrondkleur van de lay-out door de donkere en trillende kleur van onze afbeelding te extraheren met behulp van de Android Palette API.
