🍪 Privacy & Transparency

We and our partners use cookies to Store and/or access information on a device. We and our partners use data for Personalised ads and content, ad and content measurement, audience insights and product development. An example of data being processed may be a unique identifier stored in a cookie. Some of our partners may process your data as a part of their legitimate business interest without asking for consent. To view the purposes they believe they have legitimate interest for, or to object to this data processing use the vendor list link below. The consent submitted will only be used for data processing originating from this website. If you would like to change your settings or withdraw consent at any time, the link to do so is in our privacy policy accessible from our home page..

Vendor List | Privacy Policy
Skip to content

Technik Blog

Programmieren | Arduino | ESP32 | MicroPython | Python | Raspberry PI

Menu
  • Projekte
    • LED’s
    • Servo & Schrittmotoren
    • Sound
    • LCD’s
    • Kommunikation
    • Sicherheit
    • Weekend Project
  • Arduino
    • Tutorials
    • ProMini
      • Anschließen & Programmieren
    • Nano
      • Arduino Nano – Übersicht
    • UNO
      • Übersicht
    • MEGA 2560
      • Übersicht
    • Leonardo
      • Übersicht
    • NodeMCU
      • NodeMCU – “Einer für (fast) Alles!”
    • Lilypad
      • Arduino: Lilypad “Jetzt Geht’s Rund!”
    • WEMOS
      • WEMOS D1 – Arduino UNO kompatibles Board mit ESP8266 Chip
      • WEMOS D1 Mini – Übersicht
      • Wemos D1 mini Shields
    • STM32x
      • STM32F103C8T6 – Übersicht
    • Maker UNO
      • Maker UNO – Überblick und Test
    • ATTiny85
      • Mini Arduino mit ATTiny85 Chip
      • ATtiny85 mit dem Arduino UNO beschreiben
  • Android
  • Über mich
  • DeutschDeutsch
  • EnglishEnglish
Menu

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

Veröffentlicht am 18. Februar 20193. Mai 2023 von Stefan Draeger

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?
  • Wie bindet man Fragmente ein?
    • Schritt 1 – erzeugen eines Fragments für die Startseite
    • Schritt 2 – Interface auslagern
    • Schritt 3 – weitere Fragmente für die Seiten erstellen
    • Schritt 4 – Seitenwechsel implementieren
  • Download
  • Fazit & Ausblick

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.

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.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".NavigationActivity"
    tools:showIn="@layout/app_bar_navigation">

    <FrameLayout
        android:id="@+id/container"
        android:name="de.draegerit.esptutorialapp.HauptseiteFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

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.

Fragment hauptseiteFragment;

@Override
protected void onCreate(Bundle savedInstanceState) {
   ...
   hauptseiteFragment = new HauptseiteFragment();
   updateFragment(hauptseiteFragment);
   ...
}

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.

private void updateFragment(Fragment fragment) {
   FragmentManager fragmentManager = getSupportFragmentManager();
   fragmentManager.beginTransaction()
      .replace(R.id.container, fragment)
      .addToBackStack(null)
      .commit();
}

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.

/**
* This interface must be implemented by activities that contain this
* fragment to allow an interaction in this fragment to be communicated
* to the activity and potentially other fragments contained in that
* activity.
* <p>
* See the Android Training lesson <a href=
* "http://developer.android.com/training/basics/fragments/communicating.html"
* >Communicating with Other Fragments</a> for more information.
*/
public interface OnFragmentInteractionListener {
   // TODO: Update argument type and name
   void onFragmentInteraction(Uri uri);
}

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.

package de.draegerit.esptutorialapp;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class HauptseiteFragment extends Fragment {

    private OnFragmentInteractionListener mListener;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_hauptseite, container, false);
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        if (context instanceof OnFragmentInteractionListener) {
            mListener = (OnFragmentInteractionListener) context;
        } else {
            throw new RuntimeException(context.toString()
                    + " must implement OnFragmentInteractionListener");
        }
    }

    @Override
    public void onDetach() {
        super.onDetach();
        mListener = null;
    }
}

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

...
public class NavigationActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener, OnFragmentInteractionListener {
...

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

@Override
public void onFragmentInteraction(Uri uri) {}

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.

@Override
public boolean onNavigationItemSelected(MenuItem item) {
  int id = item.getItemId();
  if (id == R.id.nav_fotoresistor) {
     updateFragment(fotoresistorFragment);
  } else if (id == R.id.nav_imprint) {
     updateFragment(imprintFragment);
  } else if (id == R.id.nav_privacynotice) {
     updateFragment(privacyNoticeFragment);
  }

  DrawerLayout drawer = findViewById(R.id.drawer_layout);
  drawer.closeDrawer(GravityCompat.START);
  return true;
}

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

Android App Entwicklung: ESP Controller ansprechen, Ausbaustufe 4Herunterladen

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.

2 thoughts on “Android App Entwicklung: ESP Controller ansprechen #4 Fragmente für Seiten erstellen”

  1. Jörg Boge sagt:
    3. Februar 2020 um 17:20 Uhr

    Echt tolle Tutorial!
    Wann kommt der nächste Teil?

    Antworten
    1. Stefan Draeger sagt:
      3. Februar 2020 um 19:38 Uhr

      Hi,

      der 5. Teil ist in arbeit jedoch sind mir so einige andere Beiträge dazwischen gekommen.
      Aber ich werde demnächst auch dort weiter machen.

      Gruß,

      Stefan Draeger

      Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Kategorien

Tools

  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix – Generator
  • Widerstandsrechner
  • Rechner für Strom & Widerstände
  • ASCII Tabelle

Meta

  • Videothek
  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Kontakt
  • Cookie-Richtlinie (EU)

Links

Blogverzeichnis Bloggerei.de Blogverzeichnis TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com
©2023 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb
x
x