Werbung

Android App Entwicklung: ESP Controller ansprechen #4 Fragmente für Seiten erstellen

Im letzten Kapitel zur Reihe „ESP Controller ansprechen“ haben wir die Android App „ESPTutorialApp“ umgeschrieben so das wir eine Seitennavigation mit Icons haben.

Seitennavigation für die AndroidApp "ESPTutorialApp"
Seitennavigation für die AndroidApp „ESPTutorialApp“

Nun möchten wir für die kommenden Seiten das Layout vorbereiten, das heißt das wir im Backend die Fragmente erstellen und die Layouts festlegen.

Was sind Fragmente?

Mit Fragmenten können wir eine Seite in unser Android App gliedern. Vorallem können wir diese Fragmente wiederverwenden und haben somit einen größeren Benefit unser Arbeit.

Werbung

Wie bindet man Fragmente ein?

Für das einbinden von Fragmenten benötigt man in der View einen Platzhalter. Dieses ist das FrameLayout. Initial wird dem FrameLayout ein Fragment übergeben welches beim starten der App angezeigt werden soll.

Schritt 1 – erzeugen eines Fragments für die Startseite

Zunächst erzeugen wir uns ein neues Fragment, hierzu navigieren wir über das Kontextmenü des Projektes „New“ > „Fragment“ > „Fragment (Blank)“.

neues Fragment "HauptseiteFragment" erzeugen
neues Fragment „HauptseiteFragment“ erzeugen

Dieses Fragment soll beim starten der App angezeigt werden und allgemeine Informationen zu der App und der Benutzung anzeigen.

Nun werden wir dieses Fragment in der View „content_navigation.xml“ definieren.

Damit dieses Fragment jedoch beim starten angezeigt wird, müssen wir dieses in der Methode „onCreate“ definieren.

Dazu legen wir uns ein neues Feld in der Klasse „NavigationActivity“ an.

Zusätzlich benötigen wir eine Methode um das Fragment auf der View zu wechseln, da wir diese Methode jedoch für jede Aktion in dem NavigationsMenü benötigen werden wir den Code in eine extra Methode auslagern.

Schritt 2 – Interface auslagern

Als nächstes muss man das interne Interface „OnFragmentInteractionListener“ aus der Klasse „HauptseiteFragment“ auslagern denn dieses wird für jedes Fragment welches wir für unsere App erzeugen benötigt.

Warum die Anwendung AndroidStudio dieses Interface für jedes Fragment neu erstellt ist mir unklar.

Des Weiteren werden wir in diesem Zuge die Klasse etwas aufräumen. Die Kommentare, Felder  und einige Methoden in der Klasse werden wir für dieses Tutorial nicht benötigen.

Zusätzlich müssen wir unser Klasse „NavigationActivity“ dieses neue Interface implementieren lassen.

Durch dieses einbinden des Interfaces müssen wir die Methode „onFragmentInteraction“ einbinden.

Wenn wir diesen Schritt erledigt haben können wir nun unsere Anwendung bauen und installieren. Nun sollten Wir auf unser App den Text „Hello blank fragment“ sehen.

ESPTutorialApp erstes Fragment
ESPTutorialApp erstes Fragment

Schritt 3 – weitere Fragmente für die Seiten erstellen

Nun nachdem wir unser erstes Fragment für die Startseite eingebaut haben, wollen wir für jeden unserer Menüpunkte ein Fragment erstellen. (Hier verfahren wir wie bei der Hauptseite.)

D.h. wir erstellen für den Menüpunkt „fotoresistor“, „imprint“ und „privacy notice“.

Aus diesen neuen Klassen entfernen wir mindestens das Interface „OnFragmentInteractionListener“ denn wir haben dieses ja bereits ausgelagert.

Schritt 4 – Seitenwechsel implementieren

Wir haben nun für jeden unserer Menüpunkte und für die Hauptseite ein Fragment erzeugt. Um den Seitenwechsel zu vollziehen müssen wir die Methode „onNavigationItemSelected“ in der Klasse „NavigationActivity“ wiefolgt anpassen.

Wenn wir (bzw. der Benutzer der App) auf einen Menüpunkt klicken dann wird die Methode ausgeführt und wir erhalten zusätzlich das MenuItem welches ausgewählt wurde. Als erstes lesen wir von diesem MenuItem die ID, wenn zbsp. die ID gleich „R.id,nav_fotoresistor“ ist dann aktualisieren wir das FrameLayout und setzen das Fragment für den Fotowiderstand. Zum Schluss wird noch das Menü geschlossen. Wenn auf kein Menüpunkt geklickt wird (quasi auf eine freie Fläche) so passiert nichts.

Menüführung in der AndroidApp ESPTutorialApp
Menüführung in der AndroidApp ESPTutorialApp

Menüführung in der AndroidApp ESPTutorialApp

Zum starten des animierten GIF’s bitte auf das Bild klicken.

Download

Fazit & Ausblick

Wir haben nun in diesem Tutorial die Seiten für den Fotowiderstand, das Impressum sowie für die Datenschutzerklärung angelegt. Als nächstes werden wir nun die Seite für den Fotowiderstand mit leben befüllen und uns die Daten auf einem Liniendiagramm anzeigen lassen.

Werbung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Werbung