Advertisement
  1. Code
  2. Android SDK
Code

Wetteranwendung für Mars mit Volley erstellen

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called An Introduction to Volley.
An Introduction to Volley

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Final product image
What You'll Be Creating

Einführung

In diesem Tutorial zeige ich Ihnen einen möglichen Anwendungsfall dessen, was wir im vorherigen Artikel über Volley gelernt haben. Wir erstellen eine Wetteranwendung für den Mars mit den vom Curiosity-Rover gesammelten Informationen, die von der NASA jedem über die {MAAS}-API zur Verfügung gestellt werden.

Zunächst werden wir das Projekt in Android Studio einrichten und die Benutzeroberfläche entwerfen. Wir werden dann den Kern der Anwendung mit Volley strukturieren. Da jede schöne Anwendung über einige Bilder verfügt, zeige ich Ihnen, wie Sie mithilfe der Flickr-API eine beliebige Anwendung abrufen. Wir werden das Bild mit Volley herunterladen, vor allem wegen des großartigen Caching-Systems. Zum Schluss werden wir noch ein paar ausgefallene Details hinzufügen, um der Anwendung ein prächtiges Aussehen zu verleihen.

1. Projekteinrichtung

Erstellen Sie zunächst ein neues Projekt in Android Studio. Da Volley abwärtskompatibel ist, können Sie die API-Ebene auswählen, die Sie bevorzugen. Ich habe mich für API 21 entschieden, aber Sie sollten in Ordnung sein, solange der API-Level 8 (Froyo) oder höher ist.

Schritt 1: Benutzeroberfläche

Unsere Anwendung hat eine einzige, einfache Aktivität. Sie können es MainActivity.java nennen, wie von Android Studio vorgeschlagen. Öffnen Sie den Layouteditor und doppelklicken Sie auf activity_main.xml.

Da wir möchten, dass etwa 70% des Bildschirms für das Bild und der Rest für die Wetterinformationen reserviert sind, müssen wir das XML-Attribut layout_weight verwenden. Natürlich können wir auch absolute Werte verwenden, aber es wäre nicht dasselbe. Leider bietet die Android-Welt alles andere als homogene Anzeigen. Wenn Sie einen absoluten Wert für die Höhe des Bildes angeben, kann dies bei sehr kleinen Geräten zu einem Verhältnis von 90 bis 10 und einem Verhältnis von 70 bis 30 oder sogar 60 bis 40 führen. bei größeren Geräten. Das Attribut layout_weight ist das, was Sie zur Lösung dieses Problems benötigen.

Fügen Sie im ersten Kind die ImageView hinzu:

Im zweiten RelativeLayout fügen wir eine Liste von TextView-Elementen hinzu. Zwei davon sind Ansichten, in denen die Durchschnittstemperatur und die Opazität der Atmosphäre angezeigt werden. Der dritte ist ein Fehleretikett.

Das Layout sollte nun vollständig sein. Sie können weitere Details hinzufügen, wenn Sie möchten. Eine komplexe und detaillierte Benutzeroberfläche ist jedoch nicht Gegenstand dieses Tutorials.

Schritt 2: Thema und Berechtigungen

Es gibt zwei weitere Dinge, die wir beachten müssen, bevor Sie mit dem Kern der Anwendung beginnen. Ändern Sie das geerbte Design der Anwendung in android: Theme.Material.Light.NoActionBar. Das bedeutet, dass wir die Aktionsleiste nicht zur Laufzeit ausblenden müssen.

Fügen Sie schließlich die Internet-Berechtigung zum Manifest des Projekts hinzu.

2. Anwendungskern

Schritt 1: Volley importieren

Wie im vorigen Artikel beschrieben, besteht der einfachste und zuverlässigste Weg, Volley zu verwenden, darin, die Bibliothek als neues Modul zu importieren. Laden Sie den Quellcode der Bibliothek herunter, importieren Sie ihn über Datei > Neu > Modul und weisen Sie den Compiler in der Datei build.gradle des Projekts an, ihn in das Projekt aufzunehmen.

Schritt 2: Implementieren Sie die Helper-Klasse

Wie bereits im vorigen Artikel erwähnt, ist es besser, eine gemeinsam genutzte Anforderungswarteschlange zu verwenden, wenn mehrere Anforderungen ausgelöst werden müssen. Sie sollten es vermeiden, eine Anforderungswarteschlange jedes Mal zu erstellen, wenn Sie eine Anforderung planen, indem Sie Volley.newRequestQueue aufrufen, da Sie nicht zu Speicherverlusten und anderen unerwünschten Problemen führen möchten.

Dazu müssen Sie zunächst eine Klasse mit dem Singleton-Muster erstellen. Die Klasse wird mit einer statischen, global sichtbaren Variablen referenziert, die dann das Objekt RequestQueue verarbeitet. Auf diese Weise erhalten Sie eine einzige RequestQueue für die Anwendung. Anschließend müssen Sie die Application-Klasse erweitern und dem Betriebssystem mitteilen, dass dieses Objekt beim Start der Anwendung generiert werden soll, noch bevor die erste Aktivität erstellt wird.

Da wir uns in der Android-Umgebung befinden, ändern wir leicht die allgemeine Singleton-Struktur. Die Klasse muss eine neue Instanz von sich selbst in der Application.onCreate-Methode erstellen - nicht in einer generischen getInstance-Methode, wenn sie null ist.

Um das zu erreichen, erstellen Sie eine neue Klasse und nennen Sie sie MarsWeather.java. Erweitern Sie als Nächstes die Android-Application-Klasse, überschreiben Sie die onCreate-Methode und initialisieren Sie das RequestQueue-Objekt der statischen Instanz.

In der Singleton-Klasse konstruieren wir das Objekt der Klasse mit einer public und synchronized Funktion getInstance. Innerhalb dieser Methode geben wir die Variable mInstance zurück. Die onCreate-Methode wird beim Start der Anwendung aufgerufen, so dass die Variable mInstance bereits beim ersten Aufruf der getInstance-Methode festgelegt wird.

Teilen Sie anschließend der Datei AndroidManifest.xml mit, dass MarsWeather beim Start der Anwendung geladen werden soll. Fügen Sie im <application>-Tag den Attribut name wie folgt hinzu:

Das ist es. Eine Instanz der Application-Klasse wird erstellt, noch bevor MainActivity erstellt wird. Zusammen mit allen anderen Standardoperationen generiert onCreate eine Instanz von RequestQueue.

Wir müssen drei weitere Methoden implementieren, um die Helper-Klasse abzuschließen. Die erste Methode ersetzt Volley.newRequestQueue, die ich getRequestQueue nennen werde. Wir benötigen auch eine Methode, um eine Anforderung zur Warteschlange hinzuzufügen, add, und eine Methode, die für das Abbrechen von Anforderungen verantwortlich ist, cancel. Der folgende Codeblock zeigt, wie die Implementierung aussieht.

TAG ist ein generisches Token, mit dem Sie die Anforderung identifizieren. In diesem speziellen Fall kann es sein, was Sie wollen:

Schritt 3: Implementieren Sie die benutzerdefinierte Anforderung

Wie Sie bereits wissen, bietet Volley drei Standardanforderungstypen: StringRequest, ImageRequest und JsonRequest. Unsere Anwendung verwendet letztere, um Wetterdaten abzurufen und die Liste der Zufallsbilder abzurufen.

Standardmäßig setzt Volley die Priorität der Anforderung auf NORMAL. Normalerweise wäre das in Ordnung, aber in unserer Anwendung haben wir zwei Anforderungen, die sehr unterschiedlich sind. Daher müssen wir eine andere Priorität in der Warteschlange haben. Das Abrufen der Wetterdaten muss eine höhere Priorität haben als das Abrufen der URL des Zufallsbildes.

Aus diesem Grund müssen wir die JsonRequest-Klasse anpassen. Erstellen Sie eine neue Klasse mit dem Namen CustomJsonRequest.java, und stellen Sie sicher, dass JsonObjectRequest erweitert wird. Als nächstes überschreiben Sie die getPriority-Methode (sehen Sie unten).

Schritt 4: Daten abrufen

Wir sind endlich zu dem interessantesten Teil dieses Tutorials gelangt, in dem wir die Implementierung zum Abrufen der Wetterdaten schreiben. Der Endpunkt der Anfrage ist:

Die APIs können durchsucht werden. Öffnen Sie den Link, um die resultierende JSON zu überprüfen. Die JSON enthält ein einfaches Objekt, result, das eine Reihe von Strings umfasst, die von Temperaturen über Windrichtung und Sonnenuntergangszeit reichen.

Beginnen Sie mit der Deklaration der folgenden Variablen in der MainActivity-Klasse:

Sie können MarsWeather.getInstance außerhalb von onCreate aufrufen. Da die Klasse bereits initialisiert wird, müssen Sie nicht auf den Aufruf der onStart-Methode warten. Natürlich müssen Sie die Referenzen der Benutzeroberflächenansichten in der onCreate-Methode festlegen.

Danach ist es Zeit, die loadWeatherData-Methode zu implementieren. Wir erstellen eine benutzerdefinierte Volley-Anfrage und legen die Priorität auf HIGH fest. Wir rufen dann die add-Methode des Helpers auf, um sie der Anforderungswarteschlange hinzuzufügen. Wichtig ist der Ergebnislistener, da er Auswirkungen auf die Benutzeroberfläche haben wird.

Wie Sie sehen, berechnet die Methode die minimalen und maximalen Temperaturen, berechnet die Durchschnittstemperatur und aktualisiert die Benutzeroberfläche. Ich habe auch eine einfache Methode zur Fehlerbehandlung implementiert.

Wir müssen jetzt nur noch loadWeatherData in onCreate aufrufen und fertig. Die App kann jetzt das Wetter auf dem Mars anzeigen.

3. Bilddaten abrufen

Jetzt, da Sie den Kern der App bereit haben und arbeiten, können wir uns darauf konzentrieren, die App optisch ansprechender zu machen. Wir werden dies tun, indem wir ein zufälliges Mars-Bild abrufen und es dem Benutzer anzeigen.

Schritt 1: Holen Sie ein zufälliges Bild

Sie benötigen einen Flickr-API-Schlüssel, um eine zufällige Liste von kontextualisierten Bildern abzurufen. Der Bildendpunkt ist folgender:

Wie Sie sehen, ist die Anfrage ziemlich einfach. Sie teilen Flickr mit, dass Sie Ergebnisse erhalten, die als JSON (format=json) formatiert sind. Wir geben jedoch keinen JSON-Callback (nojsoncallback=1) an. Sie suchen nach einem Bild (method=flickr.photos.search) und die Tags, an denen Sie interessiert sind, beziehen sich auf Mars (tags=mars, planet, rover). In der Dokumentation finden Sie weitere Informationen zum Format der Anforderungs-URL.

Beginnen Sie mit der Deklaration der folgenden Variablen:

Als nächstes implementieren Sie die searchRandomImage-Methode:

Wie Sie sehen, sendet Flickr ein JSONArray mit den Bildern zurück. Die Methode, die ich zum Abrufen eines Zufallsbildes geschrieben habe, generiert eine Zufallszahl zwischen null und der Größe des Arrays. Es entnimmt das Element, das diesem Index entspricht, aus dem Array der Ergebnisse und erstellt die URL für das Bild gemäß diesen Richtlinien.

Wie zuvor benötigen wir eine Methode zur Fehlerbehandlung:

Rufen Sie schließlich searchRandomImage in der onCreate-Methode auf und vergessen Sie nicht, Ausnahmen abzufangen.

Schritt 2: Zeigen Sie das Bild

Nun, da wir eine URL zum Laden haben, können wir das Bild anzeigen. Sie haben dies bereits im vorherigen Artikel gelernt.

In der onResponse-Methode, die wir im vorherigen Schritt geschrieben haben, können wir das Ergebnis endlich handhaben.

Schritt 3: Jeden Tag ein neues Bild anzeigen

Vielleicht haben Sie bereits bemerkt, dass wir das Zwischenspeichersystem von Volley umgehen, indem Sie bei jedem Start der Anwendung ein zufälliges Bild abrufen. Wir müssen einen Weg finden, um dasselbe Bild an einem bestimmten Tag anzuzeigen.

Das erreichen Sie am einfachsten mit den SharedPreferences von Android. Beginnen Sie mit der Deklaration der Variablen, die wir dazu benötigen.

Initialisieren Sie in der Methode onCreate vor dem Aufruf von searchRandomImage mSharedPref.

Die Idee ist, den aktuellen Tag jedes Mal zu speichern, wenn wir ein neues Zufallsbild abrufen. Natürlich speichern wir die URL des Bildes neben dem Tag. Wenn die Anwendung gestartet wird, prüfen wir, ob wir bereits einen Eintrag in den SharedPreferences für den aktuellen Tag haben. Wenn wir eine Übereinstimmung haben, verwenden wir die gespeicherte URL. Ansonsten holen wir ein zufälliges Bild und speichern seine URL in den SharedPreferences.

Fügen Sie in searchRandomImage nach der Definition von imageUrl die folgenden Codezeilen hinzu:

Die onCreate-Methode wird nach der Definition in mSharedPref jetzt wie folgt:

Das ist es. Ihre Bewerbung ist fertig. Laden Sie die Quelldateien dieses Tutorials auf GitHub herunter, um das abgeschlossene Projekt anzuzeigen. Werfen Sie einen Blick auf das Projekt, wenn Sie Probleme haben.

Bonus-Tipp: Verbesserung der Benutzeroberfläche

Schritt 1: Schriftart

Die in einer Benutzeroberfläche verwendete Schriftart bestimmt häufig das Erscheinungsbild einer Anwendung. Beginnen wir damit, die standardmäßige Roboto-Schriftart mit einer ansprechenderen Schriftart wie Lato light zu ändern.

Erstellen Sie im Assets-Ordner einen neuen Ordner mit dem Namen fonts. Wenn Sie den Assets-Ordner nicht finden können, müssen Sie ihn auf derselben Ebene wie der Java-Ordner erstellen. Die Ordnerstruktur sollte ungefähr wie app\src\main\assets\fonts aussehen.

Kopieren Sie die Datei Lato-light.ttf im Schriftarten-Ordner. In der onCreate-Methode müssen Sie die Standardschriftart der Ansichten überschreiben, in denen Sie die neue Schriftart verwenden möchten.

Schritt 2: Transparente Statusleiste

Den Richtlinien für Android Material Design folgend können wir die Statusleiste transparent machen. Auf diese Weise wird der Hintergrund durch die Statusleiste teilweise sichtbar.

Sie können dies erreichen, indem Sie das Design der Anwendung geringfügig ändern. Bearbeiten Sie die Datei v21\style.xml des Projekts wie folgt:

Stellen Sie sicher, dass AndroidManifest.xml bereits für die Verwendung des Themas eingerichtet ist:

Schlussfolgerung

Wir haben eine lange Reise gemacht. Im ersten Artikel haben wir angefangen, über Volley und seine Anwendungen zu sprechen. In diesem Lernprogramm haben wir einen praktischen Ansatz zur Umsetzung der Konzepte erarbeitet, die wir durch die Erstellung einer Wetteranwendung für Mars erlernt haben. Sie sollten nun die Volley-Bibliothek gut verstehen, wie sie funktioniert und wofür Sie sie verwenden können.

Advertisement
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.