android - ConstraintLayout - 垂直或水平居中 View

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

Answer 1

正确的解决方案

很高兴您在这 3 个 View 之间创建了链。有了一条链，您可以指定链的“样式”，它将影响 View 沿链轴的分布方式。链样式可以通过 View 正下方的“链”按钮控制:

点击它几次以在所有 3 种模式之间切换:

传播(默认传播)

spread_inside

打包

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

app:layout_constraintVertical_chainStyle="packed"

天真的解决方案

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