Erste Schritte mit XML-Layouts

In diesem Tutorial lernen Sie die Grundlagen zum Erstellen von Layouts für Android-Schnittstellen mit XML. Weiter lesen!

Wenn Sie mit der Entwicklung von Android-Apps mit Eclipse und dem ADT-Plugin beginnen, ist der leistungsfähige grafische Layout-Editor von Eclipse ein hervorragender Ort, um Ihre Benutzeroberfläche visuell zu gestalten. Allerdings hat dieser Ansatz "was Sie sehen, was Sie bekommen" seine Grenzen, und irgendwann müssen Sie zu XML wechseln.

Einer der wichtigsten Vorteile der Deklaration Ihrer Benutzeroberfläche in XML ist die Möglichkeit, die Benutzeroberfläche und das Verhalten Ihrer App voneinander zu trennen. So haben Sie die Möglichkeit, die Präsentation Ihrer App anzupassen, ohne die zugrunde liegende Funktionalität zu beeinträchtigen.

In diesem Artikel zeige ich Ihnen, wie Sie ein grundlegendes XML-Layout von Grund auf entwerfen, einschließlich der Definition des Stammelements, der Angabe von Parametern für Höhe und Breite sowie dem Hinzufügen einiger grundlegender Elemente der Benutzeroberfläche. Abschließend verwende ich dieses grundlegende Layout, um einige erweiterte XML-Optionen zu demonstrieren, z. B. das Zuweisen von unterschiedlichem Speicherplatz zu verschiedenen Objekten und die ersten Schritte mit String-Ressourcen.

Hinweis: In Android sollten XML-Layouts im Verzeichnis res / layout mit der Erweiterung .xml gespeichert werden.

Teil 1: Grundlagen zum XML-Layout

Zunächst werden wir uns an XML gewöhnen, indem wir eine sehr einfache Android-Benutzeroberfläche erstellen, die die Ansichtsgruppe LinearLayout verwendet, um ein Kontrollkästchenelement aufzunehmen. Öffnen Sie die Datei res / layouts / activity_main.xml und lassen Sie uns loslegen.

Schritt 1: Geben Sie Ihr Wurzelelement an

Die Benutzeroberfläche muss ein einziges Stammelement enthalten, das als visueller Container für alle Ihre anderen Elemente dient. Das Stammelement kann entweder eine ViewGroup (d. H. LinearLayout, ListView, GridView), ein Zusammenführungselement oder eine View sein, es muss jedoch den XML-Namespace enthalten. In diesem Beispiel verwende ich LinearLayout, eine ViewGroup, die alle untergeordneten Elemente in einer angegebenen Richtung ausrichtet.

Ein LinearLayout besteht aus dem Öffnen und Schließen von XML-Tags:

 < LinearLayout… >

Auf der sich öffnenden Registerkarte müssen Sie den XML-Namespace definieren. Dies ist ein vom W3C empfohlener Standard. Das Definieren des XML-Namensraums in Android ist einfach. Geben Sie einfach den folgenden Code und die folgende URL als Teil des öffnenden LinearLayout-Tags ein:

 xmlns: android = "http://schemas.android.com/apk/res/android"

Schritt 2: Breite und Höhe

Geben Sie als Nächstes die Parameter width und height für Ihr Stammelement an. In den meisten Fällen verwenden Sie den Wert "fill_parent" für das Wurzelelement, da dieses die gesamte Bildschirmanzeige des Geräts übernimmt.

Geben Sie das folgende XML für die Parameter Höhe / Breite ein:

 android: layout_width = "fill_parent" android: layout_height = "fill_parent">

Ihr XML sollte jetzt so aussehen:

Schritt 3: Ein Kontrollkästchen erstellen

Es ist Zeit, dieser leeren Leinwand etwas hinzuzufügen! Geben Sie das Anfangs-Tag für Ihr Kontrollkästchen ein. Da es sich um ein UI-Element handelt, ist einige zusätzliche XML erforderlich:

1) Identifizieren Sie Ihren Artikel

Eclipse verwendet eine Ganzzahl-ID, um verschiedene Oberflächenelemente innerhalb einer Baumstruktur zu identifizieren. Dies sollte als Zeichenfolge mit dem Attribut 'id' und der folgenden Syntax referenziert werden:

android: id = "@ + id / name"

In diesem Beispiel beziehen wir uns auf dieses UI-Element als 'CheckBox:'.

 android: id = "@ + id / CheckBox"

2) Width / Height-Parameter: wrap_content

Wieder müssen Sie die Parameter für Höhe / Breite eingeben. Wenn Sie dieses Attribut auf 'wrap_content' setzen, wird das entsprechende Element groß genug angezeigt, um die Inhaltsgröße zu berücksichtigen. Wir können die Höhe / Breite-Syntaxstruktur von früher wiederverwenden und 'fill_parent' durch 'wrap_content:' ersetzen.

 android: layout_width = "wrap_content" android: layout_height = "wrap_content"

3) Stellen Sie Ihren Text ein

Schließlich müssen Sie den Text angeben, der neben dem Kontrollkästchen angezeigt werden soll. Wir setzen das Kontrollkästchen auf "Ja":

 android: text = "yes" />

Ihr XML sollte jetzt so aussehen:

Führen Sie Ihren Code im Android-Emulator aus, um Ihr XML in Aktion zu sehen!

Teil 2: Erstellen Sie Ihre zweite Benutzeroberfläche mit XML

Im zweiten Teil dieses Tutorials werden wir uns mit etwas weiterem XML befassen, um Ihre Benutzeroberfläche zu optimieren. Wir erstellen ein Layout, das aus zwei Schaltflächen besteht, und verwenden dann das Attribut 'weight', um den Prozentsatz des Layoutbereichs zu ändern, der jedem zugewiesen ist, bevor kurz auf die Grundlagen der String-Ressourcen eingegangen wird.

Schritt 1: Erstellen Sie Ihr Layout

Der erste Schritt besteht darin, die Barebones Ihres Layouts zu erstellen. Wir werden das LinearLayout-Wurzelelement aus dem vorherigen Beispiel zusammen mit den width / height-Parametern und natürlich dem XML-Namespace wiederverwenden:

Schritt 2: Erstellen Sie Ihre Schaltflächen

Um die erste Schaltfläche zu erstellen, fügen Sie das Anfangs-Tag 'Button' und die Ganzzahl-ID mit dem Elementnamen 'button1' hinzu.

Schritt 3: Überprüfen Sie den Emulator

Um zu sehen, wie dies auf einem echten Android-Gerät aussehen wird, starten Sie den Emulator und werfen Sie einen Blick darauf!

Teil 3: Erweiterte XML-Optionen

Jetzt haben Sie Ihre grundlegende Benutzeroberfläche. Wir verwenden ein erweitertes XML-Format, um dieses einfache Layout zu verfeinern.

Setze Layout_Gewicht

Mit dem Attribut 'android: layout_weight' können Sie das Größenverhältnis zwischen mehreren Oberflächenelementen angeben. Vereinfacht gesagt gilt: Je höher der Gewichtungswert, desto größer der zugewiesene Speicherplatz und desto größer wird das UI-Element. Wenn Sie keine Gewichtung angeben, geht Eclipse davon aus, dass die Gewichtung für alle Elemente Null ist, und teilt den verfügbaren Speicherplatz gleichmäßig auf. Das Raumverhältnis kann mit folgendem XML eingestellt werden:

 android: layout_weight = "?"

In diesem Beispiel weisen wir 'button1' mit dem Wert 1 und 'button2' mit dem Wert 2 zu.

Hinweis, Dies ist eine reine Ergänzung. Sie müssen den vorhandenen Code nicht ändern.

Die obige XML-Datei erstellt zwei Schaltflächen unterschiedlicher Größe:

Eine Einführung in die String-Ressourcen

Eine Zeichenfolgenressource kann Textzeichenfolgen für Ihre Anwendungs- und Ressourcendateien bereitstellen. In den meisten Fällen empfiehlt es sich, alle Zeichenfolgen im dedizierten Ordner 'strings.xml' zu speichern, den Sie finden können:

1) Öffnen Sie den Ordner "Res" im Projektexplorer von Eclipse.

2) Ordner "Werte" öffnen.

3) Öffnen der Datei 'strings.xml'.

So erstellen Sie eine neue Zeichenfolge in Ihrem Android-Projekt:

1) Öffnen Sie die Datei 'strings.xml' und wählen Sie 'Hinzufügen'.

2)Wählen Sie "String" aus der Liste aus und klicken Sie auf "OK".

3) Wählen Sie die neu erstellte Zeichenfolge aus dem Menü "Ressourcenelemente" aus.

4) Geben Sie im rechten Menü 'Attribute for string' einen Namen für den String und einen Wert ein. (Das Attribut 'name' wird für den String-Wert verwendet. Der String-Wert sind die Daten, die angezeigt werden. )

In diesem Beispiel geben wir der Zeichenfolge den Namen 'agree' und geben den Wert 'Ich stimme den Bedingungen zu.'

5) Speichern Sie diese neue String-Ressource.

6) Öffnen Sie Ihre Datei 'activity_main.xml'. Suchen Sie den Codeabschnitt, der 'button1' definiert, und ändern Sie das Attribut 'android: text', um diese neue Zeichenfolgenressource aufzurufen. Beim Aufruf einer Zeichenfolgenressource wird folgende Syntax verwendet:

android: text = "@ string / name-of-resource"

In diesem Beispiel lautet der Code also:

 android: text = "@ string / agree"

Um die Ausgabe zu erleichtern, löschen Sie 'button2'. Ihr Code sollte jetzt so aussehen:

Überprüfen Sie die visuelle Ausgabe Ihres Codes. Der Text sollte durch den Wert Ihrer Zeichenfolge 'agree' ersetzt werden.

Dies ist eine sehr einfache Zeichenfolge ohne zusätzliche Formatierungs- oder Formatierungsattribute. Wenn Sie mehr über String-Ressourcen erfahren möchten, sind die offiziellen Android-Dokumente eine gute Quelle für weitere Informationen.

Fazit

In diesem Artikel haben wir uns mit den XML-Grundlagen der Erstellung eines Stammelements für Ihr Layout befasst und einige grundlegende Elemente der Benutzeroberfläche codiert, bevor Sie sich mit fortschrittlicheren XML-Elementen befassen, die Ihnen mehr Kontrolle über Ihre Benutzeroberfläche bieten. Sie sollten jetzt bereit sein, Ihre eigenen einfachen Benutzeroberflächen mit XML zu erstellen!

Code