7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Android SDK

Erstellen der Zusammengesetzten Ansichten unter Android

Scroll to top
Read Time: 11 mins

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Wenn Sie komplexe Anwendungen erstellen, möchten Sie häufig dieselbe Gruppe von Ansichten an verschiedenen Stellen der Anwendung wiederverwenden. Eine Möglichkeit, dieses Problem zu lösen, besteht darin, eine Ansicht zu erstellen, die die Logik und das Layout einer Gruppe von Ansichten kapselt, sodass Sie sie wiederverwenden können, ohne Code an verschiedenen Stellen des Projekts zu duplizieren. In diesem Tutorial erfahren Sie, wie Sie zusammengesetzte Ansichten verwenden, um benutzerdefinierte Ansichten zu erstellen, die leicht wiederverwendbar sind.

1. Einleitung

Unter Android wird eine Ansicht, die aus einer Gruppe von Ansichten besteht, als zusammengesetzte Ansicht oder zusammengesetzte Komponente bezeichnet. In diesem Tutorial erstellen Sie ein Steuerelement, mit dem Sie einen Wert aus einer Liste auswählen können, die von einer Seite zur anderen verschoben wird. Wir werden die Verbindung als Side-Spinner bezeichnen, da die Standardansicht des Android SDK zum Auswählen eines Werts aus einer Liste als Spinner bezeichnet wird. Der folgende Screenshot zeigt, was wir in diesem Tutorial erstellen werden.

2. Projekt-Einrichtung

Um zu beginnen, müssen Sie ein neues Android-Projekt mit Android 4.0 als minimalem SDK-Stufe erstellen. Dieses Projekt sollte nur eine leere Aktivität namens MainActivity enthalten. Die Activity initialisiert lediglich das Layout, wie Sie im folgenden Codeausschnitt sehen können.

Das Layout für MainActivity befindet sich in der Datei /res/layout/activity_main.xml und sollte nur ein leeres RelativeLayout enthalten, in dem die zusammengesetzte Ansicht später angezeigt wird.

3. Erstellen einer zusammengesetzten Ansicht

Um eine zusammengesetzte Ansicht zu erstellen, müssen Sie eine neue Klasse erstellen, die die Ansichten in der zusammengesetzten Ansicht verwaltet. Für den Side Spinner benötigen Sie zwei Schaltflächenansichten für die Button und eine TextView ansicht, um den ausgewählten Wert anzuzeigen.

Erstellen Sie zunächst die Layoutdatei /res/layout/sidespinner_view.xml, die wir für die Side-Spinner-Klasse verwenden, und verpacken Sie die drei Ansichten in ein <merge>-Tag.

Als Nächstes müssen wir die SideSpinner-Klasse erstellen, die dieses Layout aufbläst und die Pfeile als Hintergrundbilder für die Schaltflächen festlegt. Zu diesem Zeitpunkt führt die zusammengesetzte Ansicht nichts aus, da noch nichts angezeigt werden kann.

Sie werden feststellen, dass die zusammengesetzte Ansicht die LinearLayout-Ansichtsgruppe erweitert. Dies bedeutet, dass jedes Layout, das die zusammengesetzte Ansicht verwendet, Zugriff auf die Attribute des linearen Layouts hat. Infolgedessen unterscheidet sich das Layout für die zusammengesetzte Ansicht etwas von der üblichen. Das Root-Tag ist ein <merge> -Tag anstelle des Tags für eine Ansichtsgruppe wie <LinearLayout> oder <RelativeLayout>.

Wenn Sie die zusammengesetzte Ansicht zum Layout von MainActivity hinzufügen, fungiert das Tag für die zusammengesetzte Ansicht als <LinearLayout>-Tag. Eine zusammengesetzte Ansichtsklasse kann von jeder Klasse abgeleitet werden, die von ViewGroup abgeleitet ist. In diesem Fall ist das lineare Layout jedoch am besten geeignet, da die Ansichten horizontal angeordnet sind.

4. Fügen Sie die zusammengesetzte Ansicht einem Layout hinzu

Zu diesem Zeitpunkt wird das Projekt kompiliert, es ist jedoch nichts sichtbar, da sich die zusammengesetzte Ansicht nicht im Layout von MainActivity befindet. Die  Side Spinner-Ansicht muss wie jede andere Ansicht zum Layout der Aktivität hinzugefügt werden. Der Name des Tags ist der vollständige Name der SideSpinner-Klasse, einschließlich des Namespace.

Fügen Sie dem relativen Layout in der Datei /res/layout/activity_main.xml Folgendes hinzu, um den Side-Spinner zu MainActivity hinzuzufügen.

Die im <SideSpinner>-Tag verfügbaren Attribute sind Attribute des linearen Layouts, da die von uns erstellte SideSpinner-Klasse die LinearLayout-Klasse erweitert. Wenn Sie das Projekt starten, sollte der Side Spinner sichtbar sein, enthält jedoch noch keine Werte.

5. Fügen der zusammengesetzten Ansicht Methoden hinzu

Es fehlen noch ein paar Dinge, wenn wir den Side Spinner tatsächlich verwenden wollen. Wir sollten in der Lage sein, dem Spinner neue Werte hinzuzufügen, einen Wert auszuwählen und den ausgewählten Wert zu erhalten.

Der einfachste Weg, einer zusammengesetzten Ansicht neue Verhaltensweisen hinzuzufügen, besteht darin, der SideSpinner-Klasse neue öffentliche Methoden hinzuzufügen. Diese Methoden können von jeder Activity verwendet werden, die auf die Ansicht verweist.

Die onFinishInflate-Methode der zusammengesetzten Ansicht wird aufgerufen, wenn alle Ansichten im Layout aufgeblasen und einsatzbereit sind. Hier können Sie Ihren Code hinzufügen, wenn Sie Ansichten in der zusammengesetzten Ansicht ändern müssen.

Mit den Methoden, die Sie gerade zur SideSpinner-Klasse hinzugefügt haben, kann das Verhalten der Schaltflächen, die den vorherigen und nächsten Wert auswählen, jetzt hinzugefügt werden. Ersetzen Sie den vorhandenen Code in der onFinishInflate-Methode durch Folgendes:

Mit den neu erstellten Methoden setValues und setSelectedIndex können wir jetzt den Side Spinner aus unserem Code initialisieren. Wie bei jeder anderen Ansicht müssen Sie die Side Spinner-Ansicht im Layout mit der findViewById-Methode finden. Wir können dann jede öffentliche Methode für die Ansicht des zurückgegebenen Objekts aufrufen, einschließlich der gerade erstellten.

Das folgende Codefragment zeigt, wie Sie die onCreate-Methode der MainActivity-Klasse aktualisieren, um mithilfe der setValues-Methode eine Liste der Werte im Side-Spinner anzuzeigen. Sie können auch standardmäßig den zweiten Wert in der Liste auswählen, indem Sie die setSelectedIndex-Methode aufrufen.

Wenn Sie die Anwendung starten, sollte der Side Spinner wie erwartet funktionieren. Die Liste der Werte wird angezeigt und der Wert Orange ist standardmäßig ausgewählt.

6. Fügen Sie der zusammengesetzten Ansicht Layoutattribute hinzu

Die im Android SDK verfügbaren Ansichten können über Code geändert werden. Einige Attribute können jedoch auch direkt im entsprechenden Layout festgelegt werden. Fügen wir dem Side Spinner ein Attribut hinzu, das die Werte festlegt, die der Side Spinner anzeigen muss.

Um ein benutzerdefiniertes Attribut für die zusammengesetzte Ansicht zu erstellen, müssen Sie zuerst das Attribut in der Datei /res/values/attr.xml definieren. Jedes Attribut der zusammengesetzten Ansicht sollte in einem Stil mit einem <declare-styleable>-Tag gruppiert werden. Für den Side-Spinner wird der Name der Klasse wie unten gezeigt verwendet.

Im <attr>-Tag enthält das Attribut name den Bezeichner, mit dem auf das neue Attribut im Layout verwiesen wird, und das format attribut enthält den Typ des neuen Attributs.

Für die Werteliste wird der reference typ verwendet, da sich das Attribut auf eine Liste von Zeichenfolgen bezieht, die als Ressource definiert sind. Die Werttypen, die normalerweise in Layouts verwendet werden, können für Ihre benutzerdefinierten Attribute verwendet werden, einschließlich booleancolordimensionenumintegerfloat und string.

Hier erfahren Sie, wie Sie die Ressource für eine Liste von values definieren, auf die sich das Wertattribut des Side Spinners bezieht. Es muss wie unten gezeigt zur Datei /res/values/strings.xml hinzugefügt werden.

Um das neue values attribut zu testen, erstellen Sie eine Side-Spinner-Ansicht im MainActivity-Layout unter dem vorhandenen Side-Spinner. Dem Attribut muss ein dem RelativeLayout hinzugefügter Namespace vorangestellt werden, z. B. xmlns:sidespinner="http://schemas.android.com/apk/res-auto". So sollte das endgültige Layout in /res/layout/activity_main.xml aussehen.

Schließlich muss die SideSpinner-Klasse geändert werden, um das Attribut values zu lesen. Der Wert jedes Attributs der Ansicht ist im AttributeSet-Objekt verfügbar, das als Parameter des Konstruktors der Ansicht übergeben wird.

Um den values Ihres Attributs für benutzerdefinierte Werte abzurufen, rufen Sie zuerst die Methode obtainStyledAttributes des AttributeSet-Objekts mit dem Namen des Stils auf, der das Attribut enthält. Dies gibt die Liste der Attribute zurück, die als TypedArray-Objekt formatiert werden können.

Anschließend rufen wir die Getter-Methode des TypedArray-Objekts auf, die den richtigen Typ für das gewünschte Attribut hat, und übergeben den Bezeichner des Attributs als Parameter. Der folgende Codeblock zeigt, wie Sie den Konstruktor des Seitenspinners ändern, um die Liste der Werte abzurufen und sie im Side Spinner festzulegen.

Wenn Sie die Anwendung starten, sollten Sie zwei Side-Spinner sehen, die unabhängig voneinander arbeiten.

7. Status speichern und wiederherstellen

Der letzte Schritt, den wir ausführen müssen, ist das Speichern und Wiederherstellen des Status der zusammengesetzten Ansicht. Wenn eine Aktivität zerstört und neu erstellt wird, z. B. wenn das Gerät gedreht wird, werden die Werte nativer Ansichten mit einer eindeutigen Kennung automatisch gespeichert und wiederhergestellt. Dies gilt derzeit nicht für den Side Spinner.

Der Status der Ansichten wird nicht gespeichert. Die Bezeichner der Ansichten in der SideSpinner-Klasse sind nicht eindeutig, da sie viele Male wiederverwendet werden können. Dies bedeutet, dass wir für das Speichern und Wiederherstellen der Werte der Ansichten in der zusammengesetzten Ansicht verantwortlich sind. Dazu implementieren wir die Methoden onSaveInstanceState, onRestoreInstanceState und dispatchSaveInstanceState. Der folgende Codeblock zeigt, wie dies für den Side Spinner gemacht wird.

Abschluss

Der Seitenspinner ist jetzt fertig. Beide Side Spinners arbeiten wie erwartet und ihre Werte werden wiederhergestellt, wenn die Aktivität zerstört und neu erstellt wird. Sie können jetzt das Gelernte anwenden, um eine beliebige Gruppe von Ansichten in einer Android-Anwendung mithilfe zusammengesetzter Ansichten wiederzuverwenden.

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.