ConstraintLayout

ConstraintLayout - 将视图垂直或水平放置在彼此相邻的位置(ConstraintLayout - centering views with next to each other vertically or horizontally)

如何使用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中一样。

How to center align 3 buttons with next to each other vertically using ConstraintLayout?

To be clear, i want to convert this simple layout structure into flat UI using ConstraintLayout

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

I have obtained a nearest solution as follows

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

But clearly, you can see that the obtained output does not match to the required one. i don't want any margin or space in between the 3 buttons, all i want is to center align those 3 buttons next to each other vertically just like they are in a LinearLayout which has a vertical orientation.

最满意答案

适当的解决方案

你在这三种观点之间创造了链条是很好的。 有一个链可以指定链的“样式”，它会影响视图如何沿链轴分布。 链式可以通过视图下方的“链”按钮进行控制：

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

传播 （默认）

spread_inside

打包

正如你所看到的 - packed是你想要的。 设置链式将导致为链中的第一个子添加以下属性，因此您也可以使用XML：

app:layout_constraintVertical_chainStyle="packed"

天真的解决方案

在其他答案中提出的解决方案可能看起来像是有效的，但实际上它不是解决您的问题的适当解决方案。 考虑这种情况，当你有不同高度的视图，可以说底部较大。 该解决方案将锁定中间的视图并放置其他视图的上下。 它不会导致一个“中心组”（只有中间视图会居中）。 你可以在下面的图片中看到比较结果：

Proper solution

It is good that you have created the chain between those 3 views. Having a chain you can specify the chain "style" and it will affect how views are distributed along the chain axis. The chain style can be controlled by "chain" button right below the view:

Click on it few times to toggle between all 3 modes:

spread (the default one)

spread_inside

packed

As you can see - packed is the one that you want. Setting the chain style will result in adding following attribute to the first child in the chain, so you can do it also from XML:

app:layout_constraintVertical_chainStyle="packed"

Naive solution

Solution proposed in the other answer may look like it works, but in reality it is not a proper solution for your problem. Consider the case when you have views with different heights, lets say the bottom one is larger. That solution will lock the middle view in center and position other views above and below. It will not result in a "centered group" (only the middle view would be centered). You can see the comparison in the image below: