Layouts in Ansichten
Ein Layout definiert die Struktur einer Benutzeroberfläche in Ihrer App, z. B.
eine
activity sein. Alle Elemente im
werden mithilfe einer Hierarchie
View
und
ViewGroup
Objekte. Ein View
zeichnet in der Regel etwas, das der Nutzer sehen kann, und
mit denen Sie interagieren können. Ein ViewGroup
ist ein unsichtbarer Container, der
Layoutstruktur für View
und andere ViewGroup
wie in Abbildung 1 dargestellt.
![](https://developer.android.com/static/images/viewgroup_2x.png?hl=de)
View
-Objekte werden oft als Widgets bezeichnet und können eines der folgenden sein:
viele Unterklassen wie
Button
oder
TextView
Die
ViewGroup
-Objekte werden normalerweise als Layouts bezeichnet und können
die eine andere Layoutstruktur bieten, wie z. B.
LinearLayout
oder
ConstraintLayout
Es gibt zwei Möglichkeiten, ein Layout zu deklarieren:
- Deklarieren Sie UI-Elemente in XML. Android bietet eine einfache XML-Datei,
Vokabular, das den
View
-Klassen und abgeleiteten Klassen entspricht, z. B. für Widgets und Layouts. Sie können auch die Layout-Editor zum Erstellen von XML mithilfe von Drag-and-drop. - Instanziieren Sie Layoutelemente zur Laufzeit. Ihre App kann Folgendes erstellen:
View
- undViewGroup
-Objekte und bearbeiten deren automatisch verwalten.
Durch die Deklaration deiner Benutzeroberfläche in XML kannst du die Darstellung deiner App von Code, der sein Verhalten steuert. Die Verwendung von XML-Dateien erleichtert außerdem verschiedene Layouts für unterschiedliche Bildschirmgrößen und -ausrichtungen bereitstellen. Dies ist in diesem Kurs Unterstützung für andere Bildschirme Größen.
Das Android-Framework bietet Ihnen die Flexibilität, eines oder beide Methoden, um die UI Ihrer App zu erstellen. So können Sie beispielsweise Standardlayouts in XML und ändern das Layout dann zur Laufzeit.
<ph type="x-smartling-placeholder">XML schreiben
Mit dem XML-Vokabular von Android können Sie schnell UI-Layouts und die Bildschirmelemente enthalten, so wie Sie Webseiten in HTML erstellen. mit einer Reihe von verschachtelten Elementen.
Jede Layoutdatei muss genau ein Stammelement enthalten, das ein
View
- oder ViewGroup
-Objekt. Nach der Definition des Stamms
können Sie zusätzliche Layout-Objekte oder Widgets als untergeordnete Elemente
erstelle nach und nach eine View
-Hierarchie, die dein Layout definiert. Für
Hier ist ein Beispiel für ein XML-Layout,
in dem eine vertikale LinearLayout
verwendet wird,
TextView
und Button
:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /> </LinearLayout>
Nachdem Sie Ihr Layout in XML deklariert haben, speichern Sie die Datei mit dem
Erweiterung .xml
in der res/layout/
Ihres Android-Projekts
damit es ordnungsgemäß kompiliert wird.
Weitere Informationen zur Syntax für Layout-XML-Dateien finden Sie unter Layoutressource:
XML-Ressource laden
Beim Kompilieren Ihrer App wird jede XML-Layoutdatei in ein
View
. Laden Sie die Layoutressource in das
Activity.onCreate()
Callback-Implementierung implementieren. Rufen Sie dazu
setContentView()
,
und übergeben Sie den Verweis auf Ihre Layout-Ressource im Formular:
R.layout.layout_file_name
. Wenn Ihre XML-Datei
Layout wurde als main_layout.xml
gespeichert. Laden Sie es für Ihren
Activity
so:
Kotlin
fun onCreate(savedInstanceState: Bundle) { super.onCreate(savedInstanceState) setContentView(R.layout.main_layout) }
Java
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_layout); }
Das Android-Framework ruft die Callback-Methode onCreate()
in
Deine Activity
, wenn Activity
startet. Weitere Informationen
Informationen zu den Lebenszyklen von Aktivitäten finden Sie unter
Einführung in die
Aktivitäten
Attribute
Jedes View
- und ViewGroup
-Objekt unterstützt ein eigenes
einer Vielzahl von XML-Attributen. Einige Attribute gelten nur für View
-Objekt enthält. TextView
unterstützt beispielsweise textSize
. Diese Attribute werden jedoch auch von allen View
übernommen.
-Objekte, die diese Klasse erweitern. Einige sind allen View
gleich
-Objekte, da sie von der Stammklasse View
übernommen werden, z. B.
Das Attribut id
Andere Attribute werden als Layout
Parameter – Attribute, die bestimmte Layoutausrichtungen beschreiben.
des View
-Objekts gemäß der Definition des übergeordneten Objekts dieses Objekts
ViewGroup
-Objekt.
ID
Jedem View
-Objekt kann eine ganzzahlige ID zugeordnet werden,
identifiziert die View
innerhalb des Baums eindeutig. Wenn die App
kompiliert wurde, wird diese ID als Ganzzahl referenziert, aber die ID wird in der Regel
in der Layout-XML-Datei als String im Attribut id
. Dies ist ein
XML-Attribut, das für alle View
-Objekte verwendet wird und durch das
Klasse View
. Sie verwenden es sehr oft. Die Syntax für eine ID innerhalb eines
Das XML-Tag lautet:
android:id="@+id/my_button"
Das at-Symbol (@) am Anfang des Strings gibt an, dass
Der XML-Parser parst und erweitert den Rest des ID-Strings und identifiziert ihn als
ID-Ressource. Das Plus-Symbol (+) bedeutet, dass dies ein neuer Ressourcenname ist
die im R.java
erstellt und Ihren Ressourcen hinzugefügt werden müssen
-Datei.
Das Android-Framework bietet viele weitere ID-Ressourcen. Wenn auf eine
Android-Ressourcen-ID haben, benötigen Sie das Plus-Symbol nicht, aber Sie müssen den
android
-Paket-Namespace so:
android:id="@android:id/empty"
Der Paket-Namespace android
gibt an, dass Sie auf
eine ID aus der Ressourcenklasse android.R
und nicht aus der lokalen
Ressourcenklasse.
Um Ansichten zu erstellen und in Ihrer App darauf zu verweisen, können Sie eine gängige Muster so an:
- Definieren Sie eine Ansicht in der Layoutdatei und weisen Sie ihr eine eindeutige ID zu, wie in der
folgendes Beispiel:
<Button android:id="@+id/my_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/my_button_text"/>
- Erstellen Sie eine Instanz des Ansichtsobjekts und erfassen Sie es aus dem Layout,
in der Regel im
onCreate()
hinzu, wie im folgenden Beispiel gezeigt:Kotlin
val myButton: Button = findViewById(R.id.my_button)
Java
Button myButton = (Button) findViewById(R.id.my_button);
Das Definieren von IDs für Ansichtsobjekte ist beim Erstellen einer
RelativeLayout
In einem relativen Layout können gleichgeordnete Ansichten ihr Layout relativ zu anderen
gleichgeordnete Ansicht, auf die durch die eindeutige ID verwiesen wird.
Eine ID muss nicht im gesamten Baum eindeutig sein, in dem Teil des Baums, den Sie durchsuchen, eindeutig. Oft ist es der gesamte Es ist daher empfehlenswert, ihn nach Möglichkeit einzigartig zu machen.
Layoutparameter
XML-Layoutattribute namens layout_something
definieren
Layoutparameter für das View
, die für die
ViewGroup
, in dem sie sich befindet.
Jede ViewGroup
-Klasse implementiert eine verschachtelte Klasse, die
ViewGroup.LayoutParams
.
Diese Unterklasse enthält Property-Typen, die die Größe und Position der einzelnen
untergeordneten Ansicht entsprechend der Ansichtsgruppe. Wie in Abbildung 2 zu sehen ist,
view group definiert Layoutparameter für jede untergeordnete Ansicht, einschließlich der untergeordneten
Gruppe anzeigen.
![](https://developer.android.com/static/images/layoutparams.png?hl=de)
Jede abgeleitete LayoutParams
-Klasse hat ihre eigene Syntax zum Festlegen
Werte. Für jedes untergeordnete Element muss ein LayoutParams
definiert werden, der
für das übergeordnete Element geeignet, obwohl es auch eine andere
LayoutParams
für seine eigenen untergeordneten Elemente.
Alle Ansichtsgruppen enthalten Angaben zu Breite und Höhe mithilfe von layout_width
und layout_height
, und diese müssen in jeder Ansicht definiert werden. Viele
LayoutParams
enthalten optionale Ränder und Rahmen.
Sie können Breite und Höhe mit genauen Maßen angeben, möglicherweise jedoch nicht dies häufig machen. Häufig wird eine dieser Konstanten verwendet, um die Breite oder Höhe:
wrap_content
: Die Ansicht wird an die Größe Abmessungen, die für seinen Inhalt erforderlich sind.match_parent
: Weist deine Ansicht an, damit die Größe des übergeordneten Elements übernommen wird Ansichtsgruppe zulässt.
Im Allgemeinen ist es nicht empfehlenswert, Breite und Höhe für das Layout mit
absolute Einheiten wie Pixel. Ein besserer Ansatz ist die
Verwendung relativer Messungen,
wie dichteunabhängige Pixeleinheiten (dp), wrap_content
oder
match_parent
, da sie dabei hilft, dass deine App auf
Bildschirmgrößen verschiedener Geräte. Die zulässigen Messtypen sind definiert in
Layoutressource:
Layout position
Eine Ansicht weist eine rechteckige Geometrie auf. Sie hat einen Standort, ausgedrückt als Paar left und top sowie zwei Dimensionen als Breite und Höhe festlegen. Die Einheit für Standort und Abmessungen ist Pixel.
Sie können den Standort einer Ansicht abrufen, indem Sie die Methoden aufrufen.
getLeft()
und
getTop()
.
Ersteres gibt die linke Koordinate (x) des Rechtecks zurück, das die
für die Ansicht auswählen. Letzteres gibt die obere (y)-Koordinate des Rechtecks zurück.
die die Ansicht darstellt. Diese Methoden geben die Position der Ansicht relativ zu
in das übergeordnete Element ein. Wenn getLeft()
beispielsweise 20 zurückgibt, bedeutet dies, dass
Die Ansicht befindet sich 20 Pixel rechts vom linken Rand ihrer direkten
Parent.
Darüber hinaus gibt es einfache Methoden, um unnötige Berechnungen zu vermeiden:
nämlich
getRight()
und
getBottom()
.
Diese Methoden geben die Koordinaten der rechten und unteren Kanten des
Rechteck, das die Ansicht darstellt. Beispielsweise wird getRight()
aufgerufen
ähnlich wie die folgende Berechnung: getLeft() + getWidth()
.
Größe, Abstand und Ränder
Die Größe einer Ansicht wird mit Breite und Höhe ausgedrückt. Eine Ansicht besteht aus zwei Paaren. für Breite und Höhe.
Das erste Paar wird als gemessene Breite bezeichnet.
gemessene Höhe. Mit diesen Dimensionen wird festgelegt, wie groß
ein Aufruf sein soll,
in seinem übergeordneten Element enthalten. Sie können die gemessenen Abmessungen abrufen, indem Sie
getMeasuredWidth()
und
getMeasuredHeight()
.
Das zweite Paar wird als width und height bezeichnet.
drawing width und drawingheight. Diese Dimensionen definieren die
die tatsächliche Größe der Ansicht auf dem Bildschirm, zum Zeitpunkt des Zeichnens und nach dem Layout. Diese
können von der gemessenen Breite und Höhe abweichen. Ich
können Sie die Breite und Höhe ermitteln,
getWidth()
und
getHeight()
.
Bei der Messung der Abmessungen wird der Abstand einer Ansicht berücksichtigt. Der Abstand
wird in Pixeln für den linken, oberen, rechten und unteren Teil der Ansicht ausgedrückt.
Mithilfe des Innenrands können Sie den Inhalt der Ansicht um eine bestimmte Anzahl von
Pixel. Zum Beispiel verschiebt ein Abstand von zwei links den Inhalt der Ansicht um zwei Pixel.
rechts vom linken Rand. Sie können den Abstand mithilfe der
setPadding(int, int, int, int)
und fragen Sie sie ab, indem Sie
getPaddingLeft()
,
getPaddingTop()
,
getPaddingRight()
,
und
getPaddingBottom()
Obwohl bei einer Ansicht ein Abstand definiert werden kann, werden Ränder nicht unterstützt. Sie können jedoch
Ansichtsgruppen unterstützen Ränder. Weitere Informationen finden Sie unter
ViewGroup
und
ViewGroup.MarginLayoutParams
.
Weitere Informationen zu Dimensionen finden Sie unter Dimension:
Sie können Ränder und Abstände nicht nur programmatisch festlegen, sondern auch festlegen, in Ihren XML-Layouts verwenden, wie im folgenden Beispiel gezeigt:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:padding="8dp" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:paddingBottom="4dp" android:paddingEnd="8dp" android:paddingStart="8dp" android:paddingTop="4dp" android:text="Hello, I am a Button" /> </LinearLayout>
Das vorherige Beispiel zeigt, wie der Rand und die Abstände angewendet werden. Die
Die Ränder und der Abstand von TextView
sind einheitlich.
Button
zeigt, wie Sie sie unabhängig auf verschiedene
Kanten.
Gängige Layouts
Jede abgeleitete Klasse der ViewGroup
-Klasse bietet eine einzigartige Möglichkeit,
die darin verschachtelten Ansichten anzuzeigen. Der flexibelste Layouttyp,
die besten Tools bietet, um Ihre Layouthierarchie flach zu halten.
ConstraintLayout
Im Folgenden finden Sie einige der gängigsten Layouttypen, die in Android integriert sind. Plattform.
<ph type="x-smartling-placeholder">![](https://developer.android.com/static/images/ui/linearlayout-small.png?hl=de)
Ordnet seine untergeordneten Elemente in einer einzelnen horizontalen oder vertikalen Zeile an und erstellt eine Bildlaufleiste, wenn die Länge des Fensters die Länge des Bildschirms überschreitet.
Dynamische Listen erstellen
Wenn der Inhalt für Ihr Layout dynamisch oder nicht vorbestimmt ist, können Sie
nutzen
RecyclerView
oder
eine abgeleitete Klasse von
AdapterView
.
RecyclerView
ist in der Regel die bessere Option, weil Arbeitsspeicher verbraucht wird
effizienter als AdapterView
.
Gängige Layouts, die mit RecyclerView
und
AdapterView
enthalten Folgendes:
RecyclerView
bietet mehr Möglichkeiten und
die Option,
Erstellen Sie ein benutzerdefiniertes
Layout-Manager.
Adapteransicht mit Daten füllen
Sie können ein
AdapterView
z. B. ListView
oder
GridView
von
Bindung der Instanz AdapterView
an ein
Adapter
,
das Daten aus einer externen Quelle abruft und ein View
-Objekt erstellt.
die jeden Dateneintrag darstellt.
Android bietet mehrere nützliche abgeleitete Klassen von Adapter
.
zum Abrufen verschiedener Arten von Daten und zum Erstellen von Ansichten für eine
AdapterView
. Die beiden gängigsten Adapter sind:
ArrayAdapter
- Verwenden Sie diesen Adapter, wenn Ihre Datenquelle ein Array ist. Standardmäßig
ArrayAdapter
erstellt durch Aufrufen vontoString()
und platzieren Sie den Inhalt in einemTextView
.Wenn Sie z. B. ein String-Array haben, das in einem
ListView
, initialisieren Sie eine neueArrayAdapter
mit einem , um das Layout für jeden String und das String-Array anzugeben:Kotlin
val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray)
Java
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray);
Die Argumente für diesen Konstruktor sind folgende:
- Ihre App
Context
- Das Layout, das ein
TextView
für jeden String im Array - String-Array
Rufen Sie dann
setAdapter()
auf deinemListView
:Kotlin
val listView: ListView = findViewById(R.id.listview) listView.adapter = adapter
Java
ListView listView = (ListView) findViewById(R.id.listview); listView.setAdapter(adapter);
Wenn Sie die Darstellung der einzelnen Elemente anpassen möchten, können Sie den
toString()
-Methode für die Objekte im Array. Oder erstellen Sie eine Ansicht für jedes Element, das nichtTextView
, z. B. wenn Sie eineImageView
für jedes Array-Element: Erweitern Sie dieArrayAdapter
-Klasse und überschreibengetView()
um den gewünschten Ansichtstyp für jedes Element zurückzugeben. - Ihre App
SimpleCursorAdapter
- Verwenden Sie diesen Adapter, wenn Ihre Daten von einem
Cursor
. Wenn SieSimpleCursorAdapter
verwenden, geben Sie ein Layout an, das für jede Zeile in derCursor
und welche Spalten imCursor
, die in die Ansichten des gewünschten Layouts eingefügt werden sollen. Wenn Sie beispielsweise eine Liste mit den Namen und Telefonnummern von Personen erstellen möchten, können Sie eine Abfrage durchführen, die einCursor
-Objekt zurückgibt eine Zeile für jede Person und Spalten für die Namen und Zahlen enthält. Ich Erstellen Sie dann ein Zeichenfolgenarray, das angibt, welche Spalten aus derCursor
, die im Layout für jedes Ergebnis angezeigt werden sollen, sowie eine Ganzzahl Array mit den entsprechenden Ansichten, die jede Spalte sein müssen. platziert:Kotlin
val fromColumns = arrayOf(ContactsContract.Data.DISPLAY_NAME, ContactsContract.CommonDataKinds.Phone.NUMBER) val toViews = intArrayOf(R.id.display_name, R.id.phone_number)
Java
String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME, ContactsContract.CommonDataKinds.Phone.NUMBER}; int[] toViews = {R.id.display_name, R.id.phone_number};
Wenn Sie die
SimpleCursorAdapter
instanziieren, übergeben Sie den Layout, das für jedes Ergebnis verwendet werden soll, wobei dieCursor
mit den und diese beiden Arrays:Kotlin
val adapter = SimpleCursorAdapter(this, R.layout.person_name_and_number, cursor, fromColumns, toViews, 0) val listView = getListView() listView.adapter = adapter
Java
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this, R.layout.person_name_and_number, cursor, fromColumns, toViews, 0); ListView listView = getListView(); listView.setAdapter(adapter);
Der
SimpleCursorAdapter
erstellt dann eine Ansicht für jede Zeile in dieCursor
mit dem bereitgestellten Layout, indem SiefromColumns
Element in den entsprechendentoViews
Ansicht.
Wenn Sie im Laufe der Lebensdauer Ihrer App die zugrunde liegenden Daten ändern,
von Ihrem Adapter gelesen wird, rufen Sie
notifyDataSetChanged()
Dadurch wird die angehängte Datenansicht darüber informiert, dass die Daten geändert wurden, und wird aktualisiert.
selbst.
Click-Events verarbeiten
Du kannst auf Click-Events für jedes Element in einem AdapterView
reagieren
indem Sie die
AdapterView.OnItemClickListener
. Beispiel:
Kotlin
listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id -> // Do something in response to the click. }
Java
// Create a message handling object as an anonymous class. private OnItemClickListener messageClickedHandler = new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { // Do something in response to the click. } }; listView.setOnItemClickListener(messageClickedHandler);
Weitere Informationen
Informationen zur Verwendung von Layouts finden Sie in der Sonnenblume Demo-App auf GitHub.