Layouts in Ansichten

Schreiben Sie jetzt
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfahren Sie, wie Sie in „Compose“ mit Layouts arbeiten.
<ph type="x-smartling-placeholder"></ph> Grundlagen des Layouts „Schreiben“ →

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.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 1: Abbildung einer Ansichtshierarchie, die ein UI-Layout.

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- und ViewGroup-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:

  1. 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"/>
  2. 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.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 2: Visualisierung einer Ansichtshierarchie mit Layout Parameter für die einzelnen Datenansichten.

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.

<ph type="x-smartling-placeholder">

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">
Lineares Layout erstellen

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.

Web-Apps in WebView erstellen

Zeigt Webseiten an.

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:

Liste

Zeigt eine scrollbare Liste mit einer einzelnen Spalte an.

Raster

Zeigt ein Scrollraster mit Spalten und Zeilen an.

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 von toString() und platzieren Sie den Inhalt in einem TextView.

Wenn Sie z. B. ein String-Array haben, das in einem ListView, initialisieren Sie eine neue ArrayAdapter 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 deinem ListView:

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 nicht TextView, z. B. wenn Sie eine ImageView für jedes Array-Element: Erweitern Sie die ArrayAdapter-Klasse und überschreiben getView() um den gewünschten Ansichtstyp für jedes Element zurückzugeben.

SimpleCursorAdapter
Verwenden Sie diesen Adapter, wenn Ihre Daten von einem Cursor. Wenn Sie SimpleCursorAdapter verwenden, geben Sie ein Layout an, das für jede Zeile in der Cursor und welche Spalten im Cursor, 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 ein Cursor-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 der Cursor, 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 die Cursor 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 die Cursor mit dem bereitgestellten Layout, indem Sie fromColumns Element in den entsprechenden toViews 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.