使用ConstraintLayout实现双按钮居中及代码失效原因排查

问题1：使用ConstraintLayout时，如何让两个按钮居中显示？ #

有两种常用的实现思路，你可以按需选择：

• 容器包裹法：把两个按钮放进一个LinearLayout（或其他ViewGroup）里，给这个容器设置以下约束：app:layout_constraintStart_toStartOf="parent"、app:layout_constraintEnd_toEndOf="parent"、app:layout_constraintTop_toTopOf="parent"、app:layout_constraintBottom_toBottomOf="parent"，让容器整体在屏幕居中，按钮在容器内按你想要的方向（横向/纵向）排列即可。
• 直接约束法：不借助容器的话，先给第一个按钮设置垂直居中约束（和父布局的top、bottom对齐），然后给两个按钮建立水平约束链：让第一个按钮的start对齐父布局的start，第二个按钮的end对齐父布局的end，同时让第二个按钮的start对齐第一个按钮的end，再把水平链的样式设为packed，这样两个按钮就会紧挨着且整体水平居中，垂直方向保持居中。

问题2：Code A的错误分析及原因 #

你的Code A大概率存在这个问题：你只给按钮设置了垂直方向的居中约束（比如layout_constraintTop_toTopOf="parent"和layout_constraintBottom_toBottomOf="parent"），但水平方向没有和父布局的左右边界建立约束，只是设置了两个按钮之间的横向关联（比如第二个按钮的start对齐第一个的end）。

为什么这样会导致按钮靠左？因为ConstraintLayout的布局规则是：如果某个方向没有足够的约束，控件会默认往该方向的起始位置（水平方向就是左边缘）排列。你只约束了垂直方向，水平方向没有把两个按钮的整体和父布局的左右绑定，所以它们就会靠左对齐，也就是你看到的Image B效果。

举个和你的Code A逻辑类似的错误示例：

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

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintStart_toEndOf="@id/btn1"
        app:layout_constraintTop_toTopOf="@id/btn1"/>

</android.support.constraint.ConstraintLayout>

修正后的代码（实现两个按钮水平+垂直居中）：

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

    <Button
        android:id="@+id/btn_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btn_right"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"/>

    <Button
        android:id="@+id/btn_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintTop_toTopOf="@id/btn_left"
        app:layout_constraintStart_toEndOf="@+id/btn_left"
        app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.ConstraintLayout>

这里通过水平链把两个按钮和父布局的左右边界绑定，packed样式让它们紧挨着，同时保持垂直居中，就能实现Image A的效果了。

内容的提问来源于stack exchange，提问作者HelloCW