ConstraintLayout - 垂直或水平居中视图

Question

如何使用 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 个按钮之间有任何边距或 space，我只想将这 3 个按钮垂直居中对齐，就像它们在具有垂直方向的 LinearLayout 中一样.

Answer 1

来自 Android 工作室的 'Layout Editor'

将三个按钮拖放到 Android Studio 的 'Layout Editor'
Select 鼠标拖动这些按钮在一起
使用 'Layout Editor'
中的 'pack' 按钮将它们垂直打包
使用 'Align-Center horizontally' 按钮将它们水平居中对齐
使用 'Align-Center vertically' 按钮将它们垂直居中对齐

来自 xml

使用
将所有这三个按钮打包成一个vertically packed chain
```
 app:layout_constraintVertical_chainStyle="packed"
```
为所有这三个按钮添加左右约束，如 parent

<?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>

Answer 2

正确的解决方案

很高兴您在这 3 个视图之间创建了链。有了链，您可以指定链 "style" ，它将影响视图沿链轴的分布方式。链样式可以通过视图正下方的 "chain" 按钮控制：

点击几次可在所有 3 种模式之间切换：

spread（默认）

spread_inside

打包

如您所见 - packed 是您想要的。
设置链样式将导致将以下属性添加到链中的第一个子项，因此您也可以从 XML:

app:layout_constraintVertical_chainStyle="packed"

天真的解决方案

其他答案中提出的解决方案可能看起来可行，但实际上它不是解决您的问题的合适方案。考虑一下当您有不同高度的视图时的情况，假设底部的视图更大。该解决方案会将中间视图锁定在中心并将其他视图定位在上方和下方。它不会导致 "centered group" （只有中间视图会居中）。您可以在下图中看到比较：

Answer 3

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"

ConstraintLayout - 垂直或水平居中视图

ConstraintLayout - centering views with next to each other vertically or horizontally

android

centering

android-layout

android-constraintlayout

来自 Android 工作室的 'Layout Editor'

来自 xml

正确的解决方案

天真的解决方案