web-dev-qa-db-ja.com

ConstraintLayout-垂直方向または水平方向に隣接するビューの中央揃え

ConstraintLayout を使用して、3つのボタンを垂直方向に並べて中央に揃える方法は？

明確にするために、この単純なレイアウト構造を ConstraintLayout を使用してフラットUIに変換したい

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<LinearLayout
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center"
    Android:orientation="vertical">
    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        />

    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        />

    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        />
</LinearLayout>
</FrameLayout>

私は次のように最も近い解を得ました

<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="match_parent">


<Button
    Android:id="@+id/button"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    />

<Button
    Android:id="@+id/button2"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="259dp"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintTop_toBottomOf="@+id/button"
    app:layout_constraintRight_toRightOf="parent"/>

<Button
    Android:id="@+id/button3"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"

    app:layout_constraintLeft_toLeftOf="parent"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="307dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2"
    app:layout_constraintRight_toRightOf="parent"/>

 </Android.support.constraint.ConstraintLayout>

しかし、明らかに、取得した出力が必要な出力と一致しないことがわかります。 3つのボタンの間に余白やスペースは必要ありません。3つのボタンを垂直方向に並べるLinearLayoutのように、垂直方向に中央に揃えるだけです。

androidandroid-layoutcenteringandroid-constraintlayout
15
Darish

適切なソリューション

これら3つのビューの間にチェーンを作成しておくと便利です。チェーンを使用すると、チェーンの「スタイル」を指定できます。これにより、チェーン軸に沿ったビューの分布方法が影響を受けます。チェーンスタイルは、ビューのすぐ下にある「チェーン」ボタンで制御できます。

enter image description here

それを数回クリックして、3つのモードすべてを切り替えます。

spread（デフォルト）
enter image description here

spread_inside
enter image description here

packed
enter image description here

ご覧のとおり、packedが必要なものです。
チェーンスタイルを設定すると、チェーンの最初の子に次の属性が追加されるため、XMLからも実行できます。

app:layout_constraintVertical_chainStyle="packed"

素朴な解決策

他の回答で提案された解決策は機能しているように見えるかもしれませんが、実際には問題に対する適切な解決策ではありません。異なる高さのビューがある場合を考えてみましょう。下のほうが大きいとしましょう。このソリューションは、中央のビューを中央にロックし、他のビューを上下に配置します。 「中央のグループ」にはなりません（中央のビューのみが中央に配置されます）。以下の画像で比較を確認できます。

enter image description here

33
Maciej Ciemięga

By Android Studioの「レイアウトエディター」

  1. 3つのボタンをAndroid Studioの 'Layout Editor'にドラッグアンドドロップします

  2. マウスをドラッグしてこれらのボタンを一緒に選択します

  3. 「レイアウトエディター」の「パック」ボタンを使用して垂直にパックします

  4. 「Align-Center horizo​​ntal」ボタンを使用して、それらを中央に水平に揃えます

  5. 「垂直方向に中央揃え」ボタンを使用して、垂直方向中央に揃えます

Xmlで

  • これら3つのボタンをすべて 垂直パックチェーン にパックします

     app:layout_constraintVertical_chainStyle="packed"

  • parentとしてこれら3つのボタンすべてに左右の制約を追加します

<?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"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="0dp">


<Button
    Android:id="@+id/button1"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

<Button
    Android:id="@+id/button2"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="259dp"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintTop_toBottomOf="@+id/button1"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

<Button
    Android:id="@+id/button3"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="307dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>
</Android.support.constraint.ConstraintLayout>
9
Darish
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
1
dong sheng