Как совместить несколько видов с помощью ConstraintLayout?

Фон

Google анонсировал новый макет под названием «ConstraintLayout«Это должен быть окончательный макет, который может заменить все макеты, оставаясь плоским (без вложенных макетов) и иметь лучшую производительность.

Эта проблема

Дело в том, что я едва вижу какие-либо учебники для него, которые могли бы помочь мне в этом вопросе, кроме видео, представленного в Google IO.

То, что я пытаюсь сделать, это, учитывая, что у меня есть LinearLayout с вертикальным центром в другом макете - преобразовать их оба в один ConstraintLayout.

В конце концов, это цель этого нового макета ...

Макет, с которым я хочу иметь дело, выглядит следующим образом:

Обратите внимание, что представления в центре расположены только по центру по вертикали, и что 2 текстовых вида расположены справа от ImageView, который также центрирован по вертикали.

Все это хорошо работает с RelativeLayout, который имеет LinearLayout из 2 TextView, но я хотел бы знать, как преобразовать их в один ConstraintLayout.

Вот пример XML того, что я показал:

<?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>
Что я пробовал

Я попытался прочитать несколько статей и посмотреть видео Google:

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

Это не помогло, поэтому я попытался использовать его, надеясь, что сам найду способ его использовать. Но я не могу понять, как это сделать. Я попытался использовать эту функцию для преобразования макетов, но это создает огромный беспорядок в представлениях и добавляет дополнительные поля, которые я не хочу иметь.

Вопрос

Как я могу преобразовать 2 макета в один ConstraintLayout?

Ответы на вопрос(5)

Ваш ответ на вопрос