web-dev-qa-db-ja.com

制約レイアウトの垂直方向の中央揃え

制約レイアウトでオブジェクトを垂直方向に揃えて中央に配置する方法は？垂直または水平に整列することは可能ですが、2つのグリッド線の間でビューを制約する以外に、同時に中央に配置する方法は見つかりませんでした。

垂直中央揃え： enter image description here

センタリングは制約レイアウトの大きな問題であり、「centerInParent」、「centerVertical」、および「centerHorizo​​ntal」の相対的なレイアウトに戻ることを余儀なくされているようです。

制約レイアウトを使用して赤で囲まれたレイアウトを作成したいと思います： enter image description here

残念ながら、2つのグリッド線を使用せずに見つけた唯一の方法は、ネストされたRelativeおよびLinearLayouts（Constraint Layoutがこの正確なシナリオを解決するはずだった！）を使用することです。

相対レイアウトと線形レイアウトを使用したレイアウト：

<RelativeLayout
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    Android:layout_marginTop="12dp"
    app:layout_constraintTop_toBottomOf="@id/user_points"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <LinearLayout
        Android:id="@+id/stat_1_layout"
        Android:layout_width="60dp"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="12dp"
        Android:layout_marginRight="12dp"
        Android:layout_centerVertical="true"
        Android:layout_toLeftOf="@+id/divider_1"
        Android:orientation="vertical">

        <TextView
            Android:id="@+id/stat_1"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center_horizontal"
            Android:gravity="center_horizontal"
            Android:text="10"
            Android:textSize="16dp"
            Android:textColor="@color/textSecondaryDark"
            Android:maxLines="1"/>

        <TextView
            Android:id="@+id/stat_detail_1"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center_horizontal"
            Android:gravity="center"
            Android:text="Streak"
            Android:textSize="8sp"
            Android:textColor="@color/textSecondary"
            Android:maxLines="1"/>
    </LinearLayout>

    <View
        Android:id="@+id/divider_1"
        Android:layout_width="1dp"
        Android:layout_height="38dp"
        Android:layout_toLeftOf="@+id/stat_2_layout"
        Android:background="@drawable/linedivider"/>

    <LinearLayout
        Android:id="@+id/stat_2_layout"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="18dp"
        Android:layout_marginRight="18dp"
        Android:layout_centerInParent="true"
        Android:orientation="vertical">

        <TextView
            Android:id="@+id/stat_2"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center_horizontal"
            Android:gravity="center_horizontal"
            Android:text="243"
            Android:textSize="16dp"
            Android:textColor="@color/textSecondaryDark"
            Android:maxLines="1"/>

        <TextView
            Android:id="@+id/stat_detail_2"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center_horizontal"
            Android:gravity="center"
            Android:text="Calories Burned"
            Android:textSize="8sp"
            Android:textColor="@color/textSecondary"
            Android:maxLines="1"/>
    </LinearLayout>

    <View
        Android:id="@+id/divider_2"
        Android:layout_width="1dp"
        Android:layout_height="38dp"
        Android:layout_toRightOf="@+id/stat_2_layout"
        Android:background="@drawable/linedivider"/>

    <LinearLayout
        Android:id="@+id/stat_3_layout"
        Android:layout_width="60dp"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="12dp"
        Android:layout_marginRight="12dp"
        Android:layout_toRightOf="@+id/divider_2"
        Android:layout_centerVertical="true"
        Android:orientation="vertical">

        <TextView
            Android:id="@+id/stat_3"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center_horizontal"
            Android:gravity="center_horizontal"
            Android:text="3200"
            Android:textSize="16dp"
            Android:textColor="@color/textSecondaryDark"
            Android:maxLines="1"/>

        <TextView
            Android:id="@+id/stat_detail_3"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center_horizontal"
            Android:gravity="center"
            Android:text="Steps"
            Android:textSize="8sp"
            Android:textColor="@color/textSecondary"
            Android:maxLines="1"/>
    </LinearLayout>
</RelativeLayout>
androidandroid-constraintlayoutconstraint-layout-chains
50
Ray Li

中央揃えのビューを他のビューのアンカーとして設定できます。以下の例では、親の水平方向の中央に「@ + id/stat_2」があり、このレイアウトの他のビューのアンカーとして機能します。

<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/stat_1"
        Android:layout_width="80dp"
        Android:layout_height="wrap_content"
        Android:layout_marginEnd="8dp"
        Android:gravity="center"
        Android:maxLines="1"
        Android:text="10"
        Android:textColor="#777"
        Android:textSize="22sp"
        app:layout_constraintTop_toTopOf="@+id/stat_2"
        app:layout_constraintEnd_toStartOf="@+id/divider_1" />

    <TextView
        Android:id="@+id/stat_detail_1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Streak"
        Android:textColor="#777"
        Android:textSize="12sp"
        app:layout_constraintTop_toBottomOf="@+id/stat_1"
        app:layout_constraintStart_toStartOf="@+id/stat_1"
        app:layout_constraintEnd_toEndOf="@+id/stat_1" />

    <View
        Android:id="@+id/divider_1"
        Android:layout_width="1dp"
        Android:layout_height="0dp"
        Android:layout_marginEnd="16dp"
        Android:background="#ccc"
        app:layout_constraintTop_toTopOf="@+id/stat_2"
        app:layout_constraintEnd_toStartOf="@+id/stat_2"
        app:layout_constraintBottom_toBottomOf="@+id/stat_detail_2" />

    <TextView
        Android:id="@+id/stat_2"
        Android:layout_width="80dp"
        Android:layout_height="wrap_content"
        Android:gravity="center"
        Android:maxLines="1"
        Android:text="243"
        Android:textColor="#777"
        Android:textSize="22sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        Android:id="@+id/stat_detail_2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:maxLines="1"
        Android:text="Calories Burned"
        Android:textColor="#777"
        Android:textSize="12sp"
        app:layout_constraintTop_toBottomOf="@+id/stat_2"
        app:layout_constraintStart_toStartOf="@+id/stat_2"
        app:layout_constraintEnd_toEndOf="@+id/stat_2" />

    <View
        Android:id="@+id/divider_2"
        Android:layout_width="1dp"
        Android:layout_height="0dp"
        Android:layout_marginStart="16dp"
        Android:background="#ccc"
        app:layout_constraintBottom_toBottomOf="@+id/stat_detail_2"
        app:layout_constraintStart_toEndOf="@+id/stat_2"
        app:layout_constraintTop_toTopOf="@+id/stat_2" />

    <TextView
        Android:id="@+id/stat_3"
        Android:layout_width="80dp"
        Android:layout_height="wrap_content"
        Android:layout_marginStart="8dp"
        Android:gravity="center"
        Android:maxLines="1"
        Android:text="3200"
        Android:textColor="#777"
        Android:textSize="22sp"
        app:layout_constraintTop_toTopOf="@+id/stat_2"
        app:layout_constraintStart_toEndOf="@+id/divider_2" />

    <TextView
        Android:id="@+id/stat_detail_3"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:maxLines="1"
        Android:text="Steps"
        Android:textColor="#777"
        Android:textSize="12sp"
        app:layout_constraintTop_toBottomOf="@+id/stat_3"
        app:layout_constraintStart_toStartOf="@+id/stat_3"
        app:layout_constraintEnd_toEndOf="@+id/stat_3" />

</Android.support.constraint.ConstraintLayout>

最小のスマートフォン（3.7 480x800 Nexus One）と最大のスマートフォン（5.5 1440x2560 Pixel XL）での動作を次に示します

Result view

52
Eugene Brusov

サイズのあるConstraintLayoutとサイズの小さいViewがある場合、子の2つのエッジを親の同じ2つのエッジに制約することでセンタリングを実現できます。つまり、次のように記述できます。

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

または

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

ビューが小さいため、これらの制約は不可能です。しかし、ConstraintLayoutはできる限り最善を尽くし、各制約は子ビューを均等に「プル」し、それによって中央に配置します。

この概念は、親だけでなく、どのターゲットビューでも機能します。

更新

以下は、ビューのネストやGuidelinesなしで目的のUIを実現するXMLです（ただし、ガイドラインは本質的に悪ではありません）。

<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="wrap_content"
    Android:background="#eee">

    <TextView
        Android:id="@+id/title1"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="12dp"
        Android:gravity="center"
        Android:textColor="#777"
        Android:textSize="22sp"
        Android:text="10"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/divider1"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        Android:id="@+id/label1"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:gravity="center"
        Android:textColor="#777"
        Android:textSize="12sp"
        Android:text="Streak"
        app:layout_constraintTop_toBottomOf="@+id/title1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/divider1"/>

    <View
        Android:id="@+id/divider1"
        Android:layout_width="1dp"
        Android:layout_height="55dp"
        Android:layout_marginTop="12dp"
        Android:layout_marginBottom="12dp"
        Android:background="#ccc"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/title1"
        app:layout_constraintRight_toLeftOf="@+id/title2"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        Android:id="@+id/title2"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="12dp"
        Android:gravity="center"
        Android:textColor="#777"
        Android:textSize="22sp"
        Android:text="243"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/divider1"
        app:layout_constraintRight_toLeftOf="@+id/divider2"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        Android:id="@+id/label2"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:gravity="center"
        Android:textColor="#777"
        Android:textSize="12sp"
        Android:text="Calories Burned"
        app:layout_constraintTop_toBottomOf="@+id/title2"
        app:layout_constraintLeft_toRightOf="@+id/divider1"
        app:layout_constraintRight_toLeftOf="@+id/divider2"/>

    <View
        Android:id="@+id/divider2"
        Android:layout_width="1dp"
        Android:layout_height="55dp"
        Android:layout_marginTop="12dp"
        Android:layout_marginBottom="12dp"
        Android:background="#ccc"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/title2"
        app:layout_constraintRight_toLeftOf="@+id/title3"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        Android:id="@+id/title3"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="12dp"
        Android:gravity="center"
        Android:textColor="#777"
        Android:textSize="22sp"
        Android:text="3200"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/divider2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        Android:id="@+id/label3"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:gravity="center"
        Android:textColor="#777"
        Android:textSize="12sp"
        Android:text="Steps"
        app:layout_constraintTop_toBottomOf="@+id/title3"
        app:layout_constraintLeft_toRightOf="@+id/divider2"
        app:layout_constraintRight_toRightOf="parent"/>

</Android.support.constraint.ConstraintLayout>

enter image description here

40
Ben P.
 <TextView
        Android:id="@+id/tvName"
        style="@style/textViewBoldLarge"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="10dp"
        Android:text="Welcome"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
10
Dilip

私は問題を完全に理解していなかったかもしれませんが、ConstraintLayout内のすべてのビューを中央に配置することは非常に簡単に思えます。これは私が使用したものです：

<Android.support.constraint.ConstraintLayout 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:layout_gravity="center">

enter image description here

最後の2行でうまくいきました！

7
Hossein Moghimi

チェーンを作成することにより、複数のものを簡単に中央に配置できます。垂直と水平の両方で動作します

チェーンに関する公式ドキュメントへのリンク

コメントに答えるために編集：

<?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/first_score"
        Android:layout_width="60dp"
        Android:layout_height="wrap_content"
        Android:text="10"
        app:layout_constraintEnd_toStartOf="@+id/second_score"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/second_score"
        app:layout_constraintBottom_toTopOf="@+id/subtitle"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintVertical_chainStyle="packed"
        Android:gravity="center"
        />
    <TextView
        Android:id="@+id/subtitle"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Subtitle"
        app:layout_constraintTop_toBottomOf="@+id/first_score"
        app:layout_constraintBottom_toBottomOf="@+id/second_score"
        app:layout_constraintStart_toStartOf="@id/first_score"
        app:layout_constraintEnd_toEndOf="@id/first_score"
        />
    <TextView
        Android:id="@+id/second_score"
        Android:layout_width="60dp"
        Android:layout_height="120sp"
        Android:text="243"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/thrid_score"
        app:layout_constraintStart_toEndOf="@id/first_score"
        app:layout_constraintTop_toTopOf="parent"
        Android:gravity="center"
        />
    <TextView
        Android:id="@+id/thrid_score"
        Android:layout_width="60dp"
        Android:layout_height="wrap_content"
        Android:text="3200"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/second_score"
        app:layout_constraintTop_toTopOf="@id/second_score"
        app:layout_constraintBottom_toBottomOf="@id/second_score"
        Android:gravity="center"
        />
</Android.support.constraint.ConstraintLayout>

This code gives this result

水平チェーンがあります：first_score <=> second_score <=> third_score。 second_scoreは垂直方向の中央に配置されます。他のスコアは、それに応じて垂直方向に中央揃えされます。

垂直チェーンfirst_score <=> subtitleを間違いなく作成し、second_scoreに従って中央揃えにすることができます

5
Kélian

Two buttons one centered one below to the left of it

グラフィカルに表示します。

親を中心にするには、両側を親に拘束します。中央のオブジェクトから追加のオブジェクトを制限できます。

注意。各矢印は、「app：layout_constraintXXX_toYYY =」属性を表します。 （写真の6）

4
hoford