Advertisement
  1. Code
  2. Android SDK

Codieren Sie eine Bildergalerie-Android-App mit Glide

Scroll to top
Read Time: 11 min

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

1. Was ist Glide?

Glide ist eine beliebte Open-Source-Android-Bibliothek zum Laden von Bildern, Videos und animierten GIFs. Mit Glide können Sie Medien aus vielen verschiedenen Quellen laden und anzeigen, z. B. Remoteserver oder das lokale Dateisystem.

Standardmäßig verwendet Glide eine benutzerdefinierte Implementierung von HttpURLConnection, um Bilder über das Internet zu laden. Glide bietet jedoch auch Plugins für andere beliebte Netzwerkbibliotheken wie Volley oder OkHttp.

2. Warum also Glide verwenden?

Das Entwickeln eigener Funktionen zum Laden und Anzeigen von Medien in Java kann sehr schwierig sein: Sie müssen sich um das Zwischenspeichern, Dekodieren, Verwalten von Netzwerkverbindungen, Threading, Ausnahmebehandlung und vieles mehr kümmern. Glide ist eine benutzerfreundliche, gut geplante, gut dokumentierte und gründlich getestete Bibliothek, die Ihnen viel wertvolle Zeit und Kopfschmerzen ersparen kann.

In diesem Tutorial lernen wir Glide 3 kennen, indem wir eine einfache Bildergalerie-App erstellen. Die Bilder werden über das Internet geladen und als Miniaturansichten in einer RecyclerView angezeigt. Wenn ein Benutzer auf ein Bild klickt, wird eine Detailaktivität mit dem größeren Bild geöffnet.

3. Erstellen Sie ein Android Studio-Projekt

Starten Sie Ihr Android Studio und erstellen Sie ein neues Projekt mit einer leeren Aktivität namens MainActivity.

Android Studio new project screenshotAndroid Studio new project screenshotAndroid Studio new project screenshot

2. Abhängigkeiten deklarieren

Geben Sie nach dem Erstellen eines neuen Projekts die folgenden Abhängigkeiten in Ihrem build.gradle an.

Oder mit Maven:

Stellen Sie sicher, dass Sie Ihr Projekt synchronisieren, nachdem Sie die Glide-Abhängigkeit hinzugefügt haben.

Integrationsbibliotheken

Wenn Sie eine Netzwerkbibliothek wie OkHttp oder Volley in Ihrem Projekt für den Netzwerkbetrieb verwenden möchten, wird empfohlen, die spezifische Glide-Integration für die von Ihnen verwendete Bibliothek einzuschließen (anstelle der Standardintegration, die HttpURLConnection bündelt).

Volley

OkHttp

Weitere Informationen finden Sie im offiziellen Handbuch zu Glide-Integrationsbibliotheken.

3. Fügen Sie die Internetberechtigung hinzu

Da Glide eine Netzwerkanforderung zum Laden von Bildern über das Internet ausführen wird, müssen wir die Berechtigung INTERNET in unsere AndroidManifest.xml aufnehmen.

4. Erstellen Sie das Layout

Wir beginnen mit der Erstellung unserer RecyclerView.

Erstellen des benutzerdefinierten Elementlayouts

Dann erstellen wir das XML-Layout, das für jedes Element (ImageView) in RecyclerView verwendet wird.

Nachdem wir das Layout erstellt haben, besteht der nächste Schritt darin, den RecyclerView-Adapter zum Auffüllen von Daten zu erstellen. Bevor wir dies tun, erstellen wir unser einfaches Datenmodell.

5. Erstellen Sie ein Datenmodell

Wir werden ein einfaches Datenmodell für unsere RecyclerView definieren. Dieses Modell implementiert Parcelable für den Hochleistungstransport von Daten von einer Komponente zur anderen. In unserem Fall werden Daten von SpaceGalleryActivity zu SpacePhotoActivity transportiert.

6. Erstellen Sie den Adapter

Wir erstellen einen Adapter, um die RecyclerView mit Daten zu füllen. Wir werden auch einen Klick-Listener implementieren, um die Detailaktivität - SpacePhotoActivity - zu öffnen und eine Instanz von SpacePhoto als Extra zu übergeben. Die Detailaktivität zeigt eine Nahaufnahme des Bildes. Wir werden es in einem späteren Abschnitt erstellen.

7. Laden von Bildern von einer URL

Hier muss Glide seine Aufgabe erledigen - Bilder aus dem Internet abrufen und in den einzelnen ImageViews anzeigen. Verwenden Sie dazu unsere RecyclerView onBindViewHolder()-Methode, während der Benutzer die App scrollt.

Schritt für Schritt, hier sind die Aufgaben von Glide:

  • with(Context context): Wir beginnen den Ladevorgang, indem wir zuerst unseren Kontext an die with()-Methode übergeben.
  • load(String string): Die Bildquelle wird entweder als Verzeichnispfad, URI oder URL angegeben.
  • placeholder(int resourceId): Eine lokale Anwendungsressourcen-ID, vorzugsweise eine Zeichnungs-ID, die ein Platzhalter ist, bis das Bild geladen und angezeigt wird.
  • into(ImageView imageView): Die Zielbildansicht, in der das Bild platziert wird.

Beachten Sie, dass Glide auch lokale Bilder laden kann. Übergeben Sie einfach entweder die Android-Ressourcen-ID, den Dateipfad oder einen Uri als Argument an die load()-Methode.

Bildgröße ändern und transformieren

Sie können die Größe des Bilds ändern, bevor es in der ImageView mit der .override(int width, int height)-Methode von Glide angezeigt wird. Dies ist nützlich, um Miniaturansichten in Ihrer App zu erstellen, wenn Sie eine andere Bildgröße vom Server laden. Beachten Sie, dass die Abmessungen in Pixel und nicht in dp angegeben sind.

Die folgende Bildtransformation ist ebenfalls verfügbar:

  • fitCenter(): Skaliert das Bild gleichmäßig (unter Beibehaltung des Seitenverhältnisses des Bildes), sodass das Bild in den angegebenen Bereich passt. Das gesamte Bild ist sichtbar, es kann jedoch zu vertikalen oder horizontalen Auffüllungen kommen.
  • centerCrop(): Skaliert das Bild gleichmäßig (unter Beibehaltung des Seitenverhältnisses des Bildes), sodass das Bild den angegebenen Bereich ausfüllt und so viel wie möglich vom Bild angezeigt wird. Bei Bedarf wird das Bild horizontal oder vertikal zugeschnitten, um es anzupassen.

8. Initialisieren des Adapters

Hier erstellen wir unsere RecyclerView mit GridLayoutManager als Layout-Manager, initialisieren unseren Adapter und binden ihn an die RecyclerView.

9. Erstellen der Detailaktivität

Erstellen Sie eine neue Aktivität und nennen Sie sie SpacePhotoActivity. Wir bekommen das SpacePhoto extra und laden das Bild wie zuvor mit Glide. Hier erwarten wir, dass die Datei oder URL eine Bitmap ist, daher verwenden wir asBitmap(), damit Glide eine Bitmap empfängt. Andernfalls schlägt das Laden fehl und der Rückruf .error() wird ausgelöst. Dadurch wird die vom Fehlerrückruf zurückgegebene zeichnbare Ressource angezeigt. Sie können auch asGif() verwenden, wenn Sie sicherstellen möchten, dass Ihr geladenes Bild ein GIF ist. (Ich werde in Kürze erklären, wie GIFs in Glide funktionieren.)

Beachten Sie, dass wir auch einen eindeutigen Cache für die geladenen Bilder initialisiert haben: DiskCacheStrategy.SOURCE. Ich werde in einem späteren Abschnitt mehr über das Caching erklären.

Das Detaillayout

Hier ist ein Layout zur Anzeige der Detailaktivität. Es wird nur eine scrollbare ImageView angezeigt, die die Vollauflösungsversion des geladenen Bildes anzeigt.

10. Caching in Glide

Wenn Sie genau hinschauen, werden Sie feststellen, dass ein zuvor geladenes Bild beim erneuten Laden noch schneller als zuvor geladen wird. Was hat es schneller gemacht? Das Caching-System von Glide, das ist was.

Nachdem ein Image einmal aus dem Internet geladen wurde, speichert Glide es im Speicher und auf der Festplatte, speichert wiederholte Netzwerkanforderungen und ermöglicht ein schnelleres Abrufen des Images. Daher prüft Glide zunächst, ob ein Image im Speicher oder auf der Festplatte verfügbar ist, bevor es aus dem Netzwerk geladen wird.

Abhängig von Ihrer Anwendung möchten Sie möglicherweise das Caching vermeiden - beispielsweise, wenn sich die angezeigten Bilder wahrscheinlich häufig ändern und nicht neu geladen werden.

Wie deaktivieren Sie das Caching?

Sie können das Zwischenspeichern von Speicher vermeiden, indem Sie .skipMemoryCache(true) aufrufen. Beachten Sie jedoch, dass das Image weiterhin auf der Festplatte zwischengespeichert wird. Um dies zu verhindern, verwenden Sie auch die Methode .diskCacheStrategy(DiskCacheStrategy strategy), die einen der folgenden Aufzählungswerte annimmt:

  • DiskCacheStrategy.NONE: Es werden keine Daten im Cache gespeichert.
  • DiskCacheStrategy.SOURCE: Originaldaten, die im Cache gespeichert wurden.
  • DiskCacheStrategy.RESULT: Speichert das Ergebnis der Daten nach Transformationen in den Cache.
  • DiskCacheStrategy.ALL: Zwischenspeichert sowohl Originaldaten als auch transformierte Daten.

Um das Zwischenspeichern von Speicher und Festplatte insgesamt zu vermeiden, rufen Sie einfach beide Methoden nacheinander auf:

11. Listener anfordern

In Glide können Sie einen RequestListener implementieren, um den Status der Anforderung zu überwachen, die Sie beim Laden des Bildes gestellt haben. Es wird nur eine dieser Methoden aufgerufen.

  • onException(): Wird ausgelöst, wenn eine Ausnahme auftritt, damit Sie Ausnahmen in dieser Methode behandeln können.
  • onResourceReady(): Wird ausgelöst, wenn das Bild erfolgreich geladen wurde.

Kehren Sie zu unserer Bildergalerie-App zurück und ändern Sie die Anzeige ein wenig, indem Sie ein RequestListener-Objekt verwenden, mit dem die Bitmap auf ImageView gesetzt und die Hintergrundfarbe des Layouts geändert wird, indem Sie die dunkle und vibrierende Farbe unseres Bildes mithilfe der Android-Palette extrahieren API.

Hier können Sie auch einen Fortschrittsdialog ausblenden, falls Sie einen hatten. Stellen Sie bei dieser letzten Änderung sicher, dass die Palettenabhängigkeit in Ihrem build.gradle enthalten ist:

12. Testen der App

Endlich können Sie die App ausführen! Klicken Sie auf eine Miniaturansicht, um eine Vollversion des Bildes zu erhalten.

Emulator running the application screenshotsEmulator running the application screenshotsEmulator running the application screenshots

10. Animationen

Wenn Sie die App ausführen, werden Sie eine Überblendanimation bemerken, die auftritt, während das Bild angezeigt wird. Glide hat dies standardmäßig aktiviert, aber Sie können es deaktivieren, indem Sie dontAnimate() aufrufen. Dadurch wird das Bild nur ohne Animation angezeigt. Sie können die Überblendungsanimation auch anpassen, indem Sie crossFade(int duration) aufrufen und die Dauer in Millisekunden übergeben, um sie entweder zu beschleunigen oder zu verlangsamen. Die Standardeinstellung ist 300 Millisekunden.

Animierte GIFs

Es ist sehr einfach, mit Glide ein animiertes GIF in Ihrer App anzuzeigen. Dies funktioniert genauso wie das Anzeigen eines normalen Bildes.

Wenn Sie erwarten, dass das Bild ein GIF ist, rufen Sie asGif() auf. Dadurch wird sichergestellt, dass Glide ein GIF empfängt. Andernfalls schlägt das Laden fehl und das an die .error()-Methode übergebene Drawable wird stattdessen angezeigt.

Video abspielen

Leider unterstützt Glide das Laden und Anzeigen von Videos per URL nicht. Stattdessen können nur Videos geladen und angezeigt werden, die bereits auf dem Telefon gespeichert sind. Zeigen Sie ein Video an, indem Sie seinen URI an die load()-Methode übergeben.

Abschluss

Gut gemacht! In diesem Tutorial haben Sie mit Glide eine vollständige Bildergalerie-App erstellt und dabei gelernt, wie die Bibliothek funktioniert und wie Sie sie in Ihr eigenes Projekt integrieren können. Sie haben auch gelernt, wie Sie sowohl lokale als auch Remote-Bilder anzeigen, animierte GIFs und Videos anzeigen und Bildtransformationen wie das Ändern der Größe anwenden. Darüber hinaus haben Sie gesehen, wie einfach es ist, Caching, Fehlerbehandlung und benutzerdefinierte Anforderungslistener zu aktivieren.

Weitere Informationen zu Glide finden Sie in der offiziellen Dokumentation. Um mehr über das Codieren für Android zu erfahren, lesen Sie einige unserer anderen Kurse und Tutorials hier auf Envato Tuts+!

  • Android SDK
    Wie Sie Anrufe tätigen und SMS in Android Apps verwenden
    Chike Mgbemena
  • Android SDK
    Android Things: Ihr erstes Projekt
    Paul Trebilcox-Ruiz
  • Android SDK
    Erstellen Sie einen Android Cardboard 360 Video Viewer
    Paul Trebilcox-Ruiz
  • Android SDK
    Nehmen Sie Bilder mit Ihrer Android App auf
    Ashraff Hathibelagal
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.