Android ConstraintLayout Beispiel Tutorial

Tutorials

Android

Im diesem Tutorial werden wir uns mit den Feinheiten des Android ConstraintLayouts befassen. Google hat den Android ConstraintLayout-Editor auf der Google I/O-Konferenz 2016 vorgestellt. Der neue Layout-Editor verfügt über eine Reihe leistungsstarker Tools, die es Entwicklern ermöglichen, flache UI-Hierarchien für ihre komplexen Layouts zu erstellen.

Android ConstraintLayout

Um Android ConstraintLayout zu verwenden, stellen Sie sicher, dass Sie die neueste Version von Android Studio verwenden. Ideal wäre Android Studio 2.2 oder höher. Wir müssen die erforderlichen SDK-Tools für ConstraintLayout aus dem SDK Manager herunterladen. Erstellen Sie ein neues leeres Aktivitätsprojekt und fügen Sie die folgende Abhängigkeit in die Datei build.gradle ein. compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4' Erstellen Sie ein neues Layout mit der Wurzelklasse, die auf ConstraintLayout festgelegt ist, wie im Bild unten gezeigt. Um ein altes Layout in ein ConstraintLayout zu konvertieren, öffnen Sie das Designfeld des entsprechenden Layouts, klicken Sie mit der rechten Maustaste auf das Wurzelelement und wählen Sie die entsprechende Option aus, wie im Bild unten gezeigt.

Android Constraint Layout Überblick

Android ConstraintLayout wird verwendet, um ein Layout zu definieren, indem für jedes untergeordnete Ansichtselement/Widget relative Einschränkungen zu anderen vorhandenen Ansichten zugewiesen werden. Ein ConstraintLayout ähnelt einem RelativeLayout, verfügt jedoch über mehr Leistung. Das Ziel von ConstraintLayout besteht darin, die Leistung der Anwendungen zu verbessern, indem verschachtelte Ansichten durch ein flaches und flexibles Design entfernt werden. Eine Ansicht innerhalb des ConstraintLayouts verfügt über Griffe (oder Ankerpunkte) auf jeder Seite, die verwendet werden, um die Einschränkungen zuzuweisen. Ziehen wir also ein TextView in das Layout und weisen ihm die Einschränkungen zu. Das obige TextView hat drei Arten von Griffen:

Griff zum Ändern der Größe – Er befindet sich an den vier Ecken und wird verwendet, um die Ansicht zu vergrößern oder zu verkleinern, wobei die Einschränkungen intakt bleiben. Seiten-Griff – Er ist der kreisförmige Griff in der Mitte jeder Seite. Er wird verwendet, um die oberen, linken, unteren und rechten Einschränkungen der Ansicht festzulegen. Griff für die Baseline – Er wird verwendet, um die Baseline mit einem anderen TextView im Layout auszurichten.

Lassen Sie uns die Beschränkungen für den TextView festlegen und den XML-Code überprüfen. Beachten Sie das Eigenschafteninspektorenfenster auf der rechten Seite: Es zeigt die für jede Seite der Ansicht festgelegten Ränder an. Es ermöglicht auch das Ändern der Größe der Ansicht, indem zwischen den folgenden Modi umgeschaltet wird:

Wrap Content – Dies umschließt die Ansicht, um ihren Inhalt zu füllen.
Any Size – Dies ist ähnlich wie match parent.
Fixed Size – Dies ermöglicht uns, eine konstante Breite und Höhe festzulegen.

Der XML-Code für das oben stehende Layout sieht wie folgt aus: sample.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>

app:layout_constraintLeft_toLeftOf="parent" – constraintLeft ist der Ankerpunkt links von der Ansicht. toLeftOf bedeutet, die Ansicht mit der zugewiesenen Ansicht links auszurichten, die in diesem Fall „parent“ ist.
Wenn die absoluten Positionen auf der Ansicht festgelegt sind, werden die verwendeten XML-Eigenschaften wie folgt festgelegt –

tools:layout_editor_absoluteY="48dp"
tools:layout_editor_absoluteX="40dp"

Lassen Sie uns einen weiteren TextView hinzufügen und ihre Baselines ausrichten. Der XML-Code für das obige Layout lautet:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        app:layout_constraintRight_toLeftOf="@+id/textView"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp" />

</android.support.constraint.ConstraintLayout>

Es gibt zwei weitere Tools namens Auto-Connect und Inference, die verwendet werden, um automatisch Einschränkungen zu erstellen.

Auto-Connect – Diese Funktion kann aktiviert werden, indem man klickt: Wie der Name schon sagt, erstellt Auto-Connect automatisch Einschränkungen zwischen zwei benachbarten Ansichten.
Inference – Diese Funktion wird aktiviert, indem man klickt: Die Inferenz-Engine erstellt Einschränkungen zwischen allen Elementen in einem Layout. Die Inferenz-Engine versucht, optimale Verbindungen basierend auf verschiedenen Faktoren wie den Positionen der Widgets und ihrer Größe zu finden und zu erstellen.

A demo of Auto-Connect layout is given below: As you can see in the above gif, The constraints are animated automatically. Notice the horizontal and vertical sliders in the properties pane. They are called horizontal and vertical bias respectively. They allow us to position a view along the horizontal or vertical axis using a bias value, this will be relative to it’s constrained position. The xml code for the above demo is given below:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView7"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.58000004"
        app:layout_constraintHorizontal_bias="0.47" />
</android.support.constraint.ConstraintLayout>

Demo eines Layouts mit aktivierter Inferenz wird unten gegeben: Der XML-Code für das obige Gif lautet:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView22"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="59dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        android:layout_marginEnd="31dp"
        app:layout_constraintRight_toRightOf="@+id/textView22"
        android:layout_marginTop="178dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="31dp" />
</android.support.constraint.ConstraintLayout>

tools:layout_constraintTop_creator="1": Die Erstellerattribute dienen dazu, den Überblick darüber zu behalten, wer die Einschränkungen erstellt hat, insbesondere wenn sie vom Inferenzmotor erstellt wurden, werden sie als 1 zugewiesen.

Löschen von Einschränkungen

Um eine einzelne Einschränkung zu löschen, fahren Sie mit dem kreisförmigen Griff darüber und klicken Sie darauf, bis er rot wird. Um alle Einschränkungen einer Ansicht zu löschen, klicken Sie auf das Symbol darunter, das aussieht wie: Ein Beispiel-Demogif ist unten gegeben: Damit endet dieses Tutorial. Sie können nun Ihre eigenen Layouts durch ein Constraint-Layout ersetzen.

Source:
https://www.digitalocean.com/community/tutorials/android-constraintlayout