Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Android User Interface Design: Arbeiten mit Fragmenten

Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Android User Interface Design.
Android User Interface Design: Building a ListView Application
Android User Interface Design: Building Application Preference Screens

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Die neue Android-Fragment-API, die in Android 3.0 eingeführt wurde, ermöglicht einfachere dynamische Benutzeroberflächen. In diesem Lernprogramm erfahren Sie, wie Sie einen ListView-WebView-Workflow mit zwei Bildschirmen in einen Workflow mit einem einzigen Bildschirm konvertieren, der für große Bildschirme wie auf Tablets entwickelt wurde.

Nachträgliche Änderungen an Techniken und Software

Bestimmte Aspekte von Anwendungen oder Techniken, die in diesem Lernprogramm verwendet werden, haben sich seit der ursprünglichen Veröffentlichung geändert. Dies könnte es etwas schwierig machen, mitzukommen. Wir empfehlen, diese neueren Tutorials zum selben Thema zu lesen:

Das Tempo dieses Tutorials wird schneller sein als bei einigen unserer Anfänger-Tutorials; Möglicherweise müssen Sie einige der anderen Android-Lernprogramme auf dieser Website oder sogar in der Android SDK-Referenz lesen, wenn Sie mit den grundlegenden Android-Konzepten und -Klassen, die in diesem Lernprogramm behandelt werden, nicht vertraut sind. Der abschließende Beispielcode, der diesem Tutorial beiliegt, steht als Open-Source-Version im Google-Code-Hosting zur Verfügung.

Einführung von Fragmenten

Bevor wir beginnen, wollen wir auf hoher Ebene definieren, was ein Fragment ist. Ein Fragment ist im Allgemeinen ein Stück Benutzerschnittstelle mit einem eigenen Lebenszyklus. Wenn das wie eine Aktivität klingt, liegt das daran, dass es viel wie eine Aktivität ist. Ein Fragment unterscheidet sich jedoch von einer Aktivität darin, dass ein Fragment innerhalb einer Aktivität vorhanden sein muss. Ein Fragment muss nicht jedes Mal mit der gleichen Aktivität gepaart werden, wenn es instanziiert wird, wodurch es eine gewisse Flexibilität erhält. Ebenso wie eine Aktivität muss ein Fragment keine Benutzeroberfläche enthalten.

Schritt 0: Erste Schritte

In diesem Lernprogramm wird davon ausgegangen, dass Sie an der Stelle beginnen, an der unser ListView-Lernprogramm beendet wurde. Sie können diesen Code herunterladen und von dort erstellen, obwohl Sie einige Aufgaben haben, die Sie ohne Hilfe erledigen müssen, oder Sie können den Code für dieses Tutorial herunterladen und folgen.

Schritt 1: Redesign der Bildschirme

Die folgende Abbildung zeigt den bestehenden Workflow unserer Mobiletuts + -Artikelleser-App (das ListView-Lernprogramm), bevor ein Fragmententwurf berücksichtigt und angewendet wurde:

Android SDK Fragments - Figure 1

Dieser Workflow funktioniert auf einem relativ kleinen Bildschirm. Allerdings auf einem großen Bildschirm, wie der 10 "Bildschirm des Motorola Xoom, und es gibt eine Menge verschwendeten Platz auf dem ListView-Bildschirm. Der WebView-Bildschirm sieht gut aus, wenn auch ein bisschen langweilig.

Hier kommen Fragmente ins Spiel: Auf größeren Bildschirmen könnten wir eine effektivere Benutzeroberfläche bereitstellen, wenn wir ListView auf demselben Bildschirm wie das WebView anzeigen könnten. Wenn der Benutzer im linken Bereich auf ein bestimmtes ListView-Element klickt, wird das WebView auf der rechten Seite aktualisiert, um den entsprechenden Inhalt anzuzeigen. Diese Art von Workflow wird häufig in E-Mail- oder Dokumentenfeed-Lesern verwendet. Die folgende Abbildung zeigt ein solches Redesign:

Android SDK Fragments - Figure 2

Schritt 2: Konvertieren in ein Fragment-basiertes Design

Jetzt, wo wir wissen, wie der neue Bildschirm-Workflow gestaltet wird, wissen wir auch, dass die beiden aktuellen Aktivitäten in Fragmente konvertiert werden müssen. Wir machen die Konvertierung in mehreren Schritten. Der erste Schritt besteht darin, die Bildschirme optisch unverändert zu lassen, jedoch jeden Bildschirm so zu modifizieren, dass ein Fragment verwendet wird. Ein Fragment enthält das aktuelle ListView und ein anderes das WebView. Dann wechseln wir zu einer einzelnen Bildschirmimplementierung, bei der die Nachrichten zwischen den Aktivitäten ListView und WebView geändert werden.

Ändern Sie jedoch zunächst das Projekt-Build-Ziel Ihrer Anwendung auf Android 3.0. Klicken Sie hierzu mit der rechten Maustaste auf das Projekt und wählen Sie Eigenschaften. Navigieren Sie zum Android-Bereich und aktivieren Sie das Kontrollkästchen neben Android 3.0. Wir verwenden keine Google APIs, daher ist die Android Open Source-Projektversion ausreichend. Klicken Sie dann auf die Schaltfläche OK.

Jetzt haben Sie Zugriff auf die neuen APIs, einschließlich der Fragment-API.

Hinweis: In einem zukünftigen Lernprogramm werden wir über die Verwendung der neuen Kompatibilitätsebene sprechen, um Technologien wie die Fragment-API für die Arbeit mit früheren Versionen von Android zu aktivieren. Fürs Erste benötigen sie jedoch ein Gerät mit Android 3.0, Honeycomb.

Schritt 3: Erstellen der Fragmentklassen

Erstellen Sie zwei neue Java-Klassen, um die zwei Fragmente darzustellen: die ListView- und die WebView-Bildschirme. Benenne sie TutListFragment und TutViewerFragment. TutListFragment erweitert die ListFragment-Klasse und TutViewerFragment erweitert nur die Fragment-Klasse.

Innerhalb der TutListFragment-Klasse müssen wir zwei Methoden überschreiben: onListItemClick() und onCreate(). Der Inhalt dieser Methoden sollte vertraut sein; Sie entsprechen dem, was wir zuvor in der TutListActivity-Klasse hatten. Das wird sich in Kürze ändern, aber noch nicht. Hier ist eine Auflistung der TutListFragment-Klasse:

Die TutViewerFragment-Klasse ist etwas einfacher. Wir verwenden die Tatsache, dass wir (vorerst) wissen, dass das Fragment unter der gleichen Aktivität läuft, die es gewohnt war, und greifen die Intent-Daten direkt aus der Fragment-Klasse heraus. Fügen Sie eine Überschreibungsmethode für die onCreateView() -Methode hinzu. Diese Methode sollte jetzt so aussehen:

Die Möglichkeit, direkt auf die Aktivitätsinstanz zuzugreifen, ist nützlich, verursacht jedoch später ein Problem. Was ist, wenn dieses Fragment mit dem Listenfragment auf dem Bildschirm angezeigt wird? In diesem Szenario wird kein Intent zum Abrufen der URL gestartet. In TutListFragment starten wir eine neue Aktivität direkt, wenn der Benutzer auf ein Element in der Liste klickt. Was, wenn das TutViewFragment innerhalb der gleichen Aktivität existiert? Wenn dies der Fall ist, würde das Starten einer neuen Aktivität keinen Sinn ergeben. Wir werden diese Probleme später in diesem Lernprogramm beheben.

Schritt 4: Hinzufügen der Fragmentlayout-Ressourcen

Erstellen Sie nun eine neue Layout-Datei mit dem Namen tutlist_fragment.xml, um das Fragment darzustellen, das die Liste der Artikel enthält. Eine Fragmentlayout-Ressource verwendet das Tag und verweist auf die von Ihnen erstellte Fragmentklasse.

Erstellen Sie als Nächstes eine ähnliche Layoutdatei namens tutview_fragment.xml:

Schritt 5: Aktualisieren der Aktivitätsklassen

Die TutListActivity- und TutViewerActivity-Klassen müssen jetzt aktualisiert werden. Die TutListActivity-Klasse verfügt über eine einzige Methode, onCreate(), die jetzt aktualisiert werden sollte, um die entsprechende Fragment-Layout-Ressource zu laden, die Sie im vorherigen Schritt erstellt haben:

Beachten Sie auch, dass die TutListActivity von der Activity-Klasse und nicht von ListActivity erben sollte.

Die TutViewerActivity-Klasse erfordert eine ähnliche Änderung. Die onCreate() Methode sollte jetzt so aussehen

Schritt 6: Überprüfen Sie Ihren Fortschritt

Versuchen Sie, die Anwendung jetzt auszuführen. Sie werden bemerken, dass es genau das tut, was es früher getan hat. Noch nicht sehr aufregend, oder? Die gesamte Benutzeroberfläche wird jedoch jetzt mit Fragmenten ausgeführt. Dies ermöglicht die nächsten Änderungen, die Sie vornehmen müssen, um reibungslos ablaufen zu können, da wir ein neues Layout hinzufügen, um die beiden Fragmente für größere Displays zu kombinieren, die dem Benutzer auf einem einzigen Bildschirm angezeigt werden. Wie Sie jedoch vielleicht bemerkt haben, wird die Kommunikation zwischen Fragmenten genau so gehandhabt, wie wir zwischen Aktivitäten kommunizieren. Tatsächlich verwendeten wir das Wissen, dass die Aktivität, mit der jedes Fragment gepaart wurde, unverändert blieb. Dies ist nicht der Fall, wenn wir eine einzelne Aktivität haben, die beide Fragmente enthält und verwaltet. Lasst uns das zuerst beheben.

Schritt 7: Ändern der Kommunikation für TutListFragment

Wie Sie in Schritt 3 gelernt haben, macht das Starten einer Aktivität direkt aus dem TutListFragment-Objekt keinen Sinn mehr. Die WebView-Benutzeroberfläche kann tatsächlich Teil derselben Aktivität wie die Liste sein - das ist unser Plan für größere Bildschirme. In diesem Fall möchten wir nur die URL des WebView im zweiten Fragment aktualisieren.

Um dies zu ändern, müssen wir verschiedene Dinge tun. Lassen Sie uns zuerst die Fragmente unabhängig von der Aktivität machen, in der sie sich befinden. Fügen Sie dazu der TutListFragment-Klasse eine Listener-Schnittstelle hinzu:

Und dann triggern Sie es, indem Sie die Methode onListItemClickListener() wie folgt aktualisieren

Als nächstes muss die TutListActivity-Klasse die Schnittstelle OnTutSelectedListener wie folgt implementieren:

Jetzt haben wir die Funktionalität zwischen dem Fragment, das die Benutzeroberflächenaktionen handhabt, und der Aktivität, die ein Controller sein kann, aufgeteilt und leiten die Daten an die nächste Aktivität weiter. Wir werden die Methode onTutSelected() später ändern, um zu entscheiden, ob eine neue Activity-Instanz gestartet oder die vorhandene Fragmentinstanz aktualisiert werden soll.

Schritt 8: Ändern der Kommunikation für TutViewerFragment

Nun wollen wir uns der TutViewerFragment-Klasse zuwenden, die ebenfalls aktualisiert werden muss. Anstatt die Startabsicht abzufragen, um herauszufinden, welche URL geladen werden soll, wartet das Fragment darauf, welche URL geladen wird. Auf diese Weise können wir das WebView direkt aktualisieren und das Fragment nicht mit jedem Laden neu erstellen.

Ändern Sie zuerst die TutViewerFragment-Klasse so, dass sie eine neue Methode namens updateUrl() enthält:

Als Nächstes entfernen Sie alle Funktionen von der onCreateView() -Methode mit Ausnahme des Aufrufs von inflate (). In der TutViewerActivity-Klasse fügen Sie die Funktionalität zurück, um den Intent abzurufen, und rufen Sie dann die updateUrl() -Methode auf:

An diesem Punkt bleibt das Anwendungsverhalten unverändert. Die Fragmente können jetzt jedoch innerhalb derselben Aktivität oder getrennt ohne weitere Codeänderungen existieren.

Schritt 9: Hinzufügen eines Dual-Fragment-Layouts

Jetzt erstellen wir ein Layout mit beiden Fragmenten für bestimmte Situationen. Fügen Sie im Ordner "layout land" (den Sie möglicherweise erstellen müssen) eine Kopie von "tutlist_fragment.xml" hinzu. Wir werden ein anderes Layout für die Querformatausgabe auf jedem Querformatbildschirm bereit stellen. Der Hochformatmodus bleibt unverändert. Bearbeiten Sie die Datei so, dass Sie wie folgt aussehen Layout mit beiden Fragmenten aussieht:

Dadurch wird der Bildschirm horizontal auf beide Fragmente aufgeteilt.

Schritt 10: Hinzufügen einer dynamischen Auswahl

Jetzt können wir der Anwendung eine einfache Logik hinzufügen, um zwischen dem Start einer neuen Aktivität (dem Zwei-Bildschirm-Workflow) und dem Aktualisieren eines vorhandenen Fragments (des Ein-Bildschirm-Workflows) zu wählen.

Aktualisieren Sie dazu die onTutSelected() - Methode der TutListActivity-Klasse wie folgt:

Alles was Sie tun müssen, ist das Fragment zu erfassen und zu überprüfen, ob es Teil des vorhandenen Layouts für die Aktivität ist. Ist dies nicht der Fall, wird die Viewer-Aktivität gestartet, andernfalls wird das vorhandene Fragment aktualisiert.

Schritt 11: Ausführen der neu fragmentbasierten App

Zu diesem Zeitpunkt wird die Anwendung nun in zwei verschiedenen Modi funktionieren: Hochformat ist unverändert, während Querformat das ListView auf der linken Seite des WebView anzeigt. Es gibt einige Verbesserungen, die an dieser Stelle gemacht werden könnten, aber sie sind von der Feinabstimmung, der Optimierung und der nick-pickenden Vielzahl und meistens für Polnisch. Wenn Sie sich beispielsweise im WebView-Modus im Hochformat befinden und den Bildschirm drehen, ist das Ergebnis immer noch nur der WebView-Bildschirm. Sie müssen zurück drücken, um zur Doppelansicht zu gelangen. Das Polieren geht über den Rahmen dieses Tutorials hinaus, aber Sie können sehen, wie Sie mit der juristischen Verwendung von Layouts und ein wenig Aktivitätslogik leistungsstarke, aber flexible Bildschirm-Workflows für eine Vielzahl von Bildschirmen und Geräten erzielen können.

Android SDK Fragments - Tutorial 3

Fazit

Die Fragment-API hilft dabei, Benutzeroberflächenkomponenten so zu organisieren, dass sie über Aktivitäten hinweg wiederverwendet werden können. Auf diese Weise kann eine Anwendung ihren Workflow und ihre Benutzeroberflächen mit relativ geringem Programmieraufwand dynamisch anpassen. Sie haben auch gesehen, dass eine Anwendung, die auf Fragmenten basiert, einfacher zu reorganisieren ist. Noch besser: Fast jede Anwendung kann Fragmente nutzen, sobald sie über eine Kompatibilitätsbibliothek von Google verfügbar sind, die bis zu Android 1.6 kompatibel ist.
Jetzt gehen Sie los und fragmen Sie die Benutzeroberfläche Ihrer Apps und erstellen Sie tolle Benutzeroberflächen für jede Bildschirmgröße und -form!

Über die Autoren

Die mobilen Entwickler Lauren Darcey und Shane Conder haben gemeinsam mehrere Bücher zur Android-Entwicklung geschrieben: ein ausführliches Programmierbuch mit dem Titel Android Wireless Application Development und Sams Teach Yourself Android Application Development in 24 Stunden. Wenn sie nicht schreiben, verbringen sie ihre Zeit damit, mobile Software in ihrem Unternehmen zu entwickeln und Beratungsdienste anzubieten. Sie können per E-Mail an androidwirelessdev+mt@gmail.com, über ihren Blog unter androidbook.blogspot.com und über Twitter @androidwireless erreicht werden.

Benötigen Sie mehr Hilfe beim Schreiben von Android Apps? Sehen Sie sich unsere neuesten Bücher und Ressourcen an!

Buy Android Wireless Application Development, 2nd Edition Buy Sam's Teach Yourself Android Application Development in 24 Hours Mamlambo code at Code Canyon

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