ConstraintLayoutを使用して、複数のViewを一緒にセンタリングするには？

質問

背景

Googleは、新しいレイアウト「"」を発表しました。 ConstraintLayout これは究極のレイアウトで、すべてのレイアウトを置き換えることができ、フラットで（ネストされたレイアウトがない）、より良いパフォーマンスを維持することができると考えられています。

問題点

問題は、Google IO で紹介されたビデオ以外に、この問題に関して私を助けてくれるようなチュートリアルをほとんど見かけないということです。

私がしようとしていることは、別のレイアウト内に垂直方向に中心を持つ LinearLayout がある場合、それらを 1 つの ConstraintLayout に変換することです。

結局のところ、これがこの新しいレイアウトの目的です...。

私が扱いたいレイアウトは、以下のようなものです。

中央のビューは垂直方向にのみセンタリングされており、2つのtextViewはImageViewの右側にあり、これも垂直方向にセンタリングされていることに注意してください。

これはすべて2つのTextViewsのLinearLayoutを持つRelativeLayoutでうまく動作しますが、私はそれらを単一の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#0
• https://www.youtube.com/watch?v=sO9aX87hq9c
• https://youtu.be/csaXml4xtN8?t=1693

それでもダメだったので、自分で使い方を調べてみようと思い、使ってみました。 しかし、その方法がわかりません。レイアウトを変換する機能を使ってみましたが、これはビューを非常に混乱させ、必要のない余白を追加してしまいます。

質問

2つのレイアウトを1つのConstraintLayoutに変換するにはどうしたらよいでしょうか。

どのように解決するのですか？

私の答えを見てみましょう ここで .

ContraintLayout は機能を含んでいます。 Chains - という機能があり、この機能によってあなたが求めているものを実装することが可能になります。

チェーンは、1つの軸（水平方向または垂直方向）でグループのような動作を提供します。 垂直方向)にグループのような動作を提供します。

ウィジェットのセットは、それらが 双方向の接続

チェーンが作成されると、2つの可能性があります。

• 利用可能なスペースに要素を広げる
• チェーンは "packed"にすることもでき、その場合、要素は一緒にグループ化されます。

あなたの場合ですが、梱包の際に label と description TextViews を作成し、それらを親の中で縦方向にセンタリングします。

(必ず ConstraintLayout を使用してください)

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


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"/>

    <TextView
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button\nMkay"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/textView"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>
</android.support.constraint.ConstraintLayout>

2019年6月25日更新 ( サイード Z ):

さて、制約レイアウト1.1.3において、私たちは app:layout_constraintHorizontal_chainStyle="packed" の代わりに app:layout_constraintVertical_chainPacked="true"