Wie werden mehrere Ansichten mit ConstraintLayout zusammen zentriert?

Hintergrun

Google hat ein neues Layout mit dem Namen "@" angekündig ConstraintLayout "Das soll das ultimative Layout sein, das alle Layouts ersetzen kann, während es flach bleibt (ohne verschachtelte Layouts) und eine bessere Leistung bietet.

Das Proble

Thing ist, ich sehe kaum Tutorials dafür, die mir in dieser Angelegenheit helfen könnten, außer dem auf Google IO präsentierten Video.

Was ich versuche, ist, da ich ein vertikal zentriertes LinearLayout in einem anderen Layout habe - konvertieren Sie beide in ein einziges ConstraintLayout.

Schließlich ist dies der Zweck dieses neuen Layouts ...

Das Layout, mit dem ich mich befassen möchte, sieht folgendermaßen aus:

Beachten Sie, dass die Ansichten in der Mitte nur vertikal zentriert sind und dass sich die beiden Textansichten rechts von der ImageView befinden, die ebenfalls vertikal zentriert ist.

Dies alles funktioniert gut mit RelativeLayout, das das LinearLayout der 2 TextViews enthält, aber ich möchte wissen, wie man sie in ein einziges ConstraintLayout konvertiert.

Hier ist ein XML-Beispiel dessen, was ich gezeigt habe:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/listPreferredItemHeightSmall">

    <ImageView
        android:id="@+id/appIconImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="2dp"
        android:adjustViewBounds="true"
        android:src="@android:drawable/sym_def_app_icon"
        tools:ignore="ContentDescription"/>

    <LinearLayout
        android:id="@+id/appDetailsContainer"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/appIconImageView"
        android:layout_toLeftOf="@+id/overflowView"
        android:layout_toRightOf="@+id/appIconImageView"
        android:layout_toStartOf="@+id/overflowView"
        android:orientation="vertical">

        <TextView
            android:id="@+id/appLabelTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:text="label"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>

        <TextView
            android:id="@+id/appDescriptionTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:minLines="3"
            android:text="description"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/overflowView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_more_vert_black_24dp"

        tools:src="@drawable/ic_more_vert_black_24dp"
        tools:ignore="ContentDescription"/>

    <ImageView
        android:id="@+id/isSystemAppImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/overflowView"
        android:layout_alignLeft="@+id/overflowView"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/overflowView"
        android:layout_alignStart="@+id/overflowView"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        app:srcCompat="@drawable/ic_warning_black_24dp"
        tools:ignore="ContentDescription"
        tools:src="@drawable/ic_warning_black_24dp"/>

</RelativeLayout>
Was ich versucht habe

Ich habe versucht, einige Artikel zu lesen und einige Videos von Google anzusehen:

https: //codelabs.developers.google.com/codelabs/constraint-layout/index.html#https: //www.youtube.com/watch? v = sO9aX87hq9chttps: //youtu.be/csaXml4xtN8? t = 1693

Das hat nicht geholfen, also habe ich versucht, es zu verwenden, in der Hoffnung, dass ich herausfinden werde, wie ich es selbst verwenden kann. Aber ich kann nicht herausfinden, wie es geht. Ich habe versucht, die Funktion zum Konvertieren der Layouts zu verwenden, aber dies führt zu einer großen Verwirrung der Ansichten und zusätzlichen Rändern, die ich nicht haben möchte.

Die Frag

Wie kann ich die beiden Layouts in ein einziges ConstraintLayout konvertieren?

Antworten auf die Frage(10)

Ihre Antwort auf die Frage