为什么链元素之间的空间如此之大？
Why are spaces between elements of chain so large?
我需要像这样将一行三个按钮与背景视图对齐：
为此，我创建了一个背景视图 (@drawable/background) 和一个链 (@id/button1、@id/button2、@id/button3)
activity_main.xml:
<?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">
<View
android:id="@+id/background"
android:layout_width="0dp"
android:layout_height="32dp"
android:layout_marginEnd="48dp"
android:layout_marginStart="48dp"
android:layout_marginTop="16dp"
android:background="@drawable/background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="24dp"
android:layout_marginStart="4dp"
android:background="@drawable/button_background"
android:gravity="center"
android:text="Button1"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toStartOf="@id/button2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="@id/background"
app:layout_constraintTop_toTopOf="@id/background" />
<TextView
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="24dp"
android:background="@drawable/button_background"
android:gravity="center"
android:text="Button2"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toStartOf="@id/button3"
app:layout_constraintStart_toEndOf="@id/button1"
app:layout_constraintTop_toTopOf="@id/background" />
<TextView
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="24dp"
android:layout_marginEnd="4dp"
android:background="@drawable/button_background"
android:gravity="center"
android:text="Button3"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toEndOf="@id/background"
app:layout_constraintStart_toEndOf="@id/button2"
app:layout_constraintTop_toTopOf="@id/background" />
</android.support.constraint.ConstraintLayout>
background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="16dp" />
<solid android:color="#11000000" />
</shape>
button_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="12dp" />
<stroke android:width="2dp" android:color="@color/colorPrimary" />
<solid android:color="#ffffff" />
</shape>
但是我得到以下结果：
我不明白，为什么视图之间的空间如此之大。链的权重如 documentation 中所述。第一个视图之前和最后一个视图之后应该有 4dp 的边距，并且按钮之间没有任何空格。
更新
我已经尝试了 1.0.2 版和约束布局的所有 beta 版，但我只能在 constraint-layout:1.1.0-beta5 中重现该问题。是不是这个版本的constraint-layout有bug，还是我用错了？
更新 2
这实际上是 beta 5 中的一个错误，它是 beta 6 中的 fixed。
我不知道为什么会发生这种情况，也许这确实是 1.1.0-beta5 中的一个错误，但是...
您应用到 background 视图的 start/end 边距被三个按钮的链继承，因为该链被限制在 background 的开始和结束.如果删除这些边距，"gaps" 突然消失：
<View
android:id="@+id/background"
android:layout_width="0dp"
android:layout_height="32dp"
android:layout_marginTop="16dp"
android:background="@drawable/background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
当然，您的设计可能需要这些边距。您可以通过将原始边距恢复到 background 视图并将您的链锚定到父级而不是背景来解决此问题。即把button1上的app:layout_constraintStart_toStartOf属性改成"parent"，把button3上的app:layout_constraintEnd_toEndOf属性改成"parent"：
拼图的最后一块是更改 链 的 start/end 边距以模仿旧行为。以前，您的 background 视图具有 48dp 个边距，链条具有 4dp 个边距。因此，将链边距设置为 52dp 而不是 4dp 以包括背景的 48dp:
我满XML:
<?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">
<View
android:id="@+id/background"
android:layout_width="0dp"
android:layout_height="32dp"
android:layout_marginTop="16dp"
android:layout_marginStart="48dp"
android:layout_marginEnd="48dp"
android:background="@drawable/background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="24dp"
android:layout_marginStart="52dp"
android:gravity="center"
android:text="Button1"
android:background="@drawable/button_background"
app:layout_constraintTop_toTopOf="@id/background"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toStartOf="@id/button2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="24dp"
android:gravity="center"
android:text="Button2"
android:background="@drawable/button_background"
app:layout_constraintTop_toTopOf="@id/background"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toStartOf="@id/button3"
app:layout_constraintStart_toEndOf="@id/button1"/>
<TextView
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="24dp"
android:layout_marginEnd="52dp"
android:gravity="center"
android:text="Button3"
android:background="@drawable/button_background"
app:layout_constraintTop_toTopOf="@id/background"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/button2"/>
</android.support.constraint.ConstraintLayout>
我需要像这样将一行三个按钮与背景视图对齐：
为此，我创建了一个背景视图 (@drawable/background) 和一个链 (@id/button1、@id/button2、@id/button3)
activity_main.xml:
<?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">
<View
android:id="@+id/background"
android:layout_width="0dp"
android:layout_height="32dp"
android:layout_marginEnd="48dp"
android:layout_marginStart="48dp"
android:layout_marginTop="16dp"
android:background="@drawable/background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="24dp"
android:layout_marginStart="4dp"
android:background="@drawable/button_background"
android:gravity="center"
android:text="Button1"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toStartOf="@id/button2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="@id/background"
app:layout_constraintTop_toTopOf="@id/background" />
<TextView
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="24dp"
android:background="@drawable/button_background"
android:gravity="center"
android:text="Button2"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toStartOf="@id/button3"
app:layout_constraintStart_toEndOf="@id/button1"
app:layout_constraintTop_toTopOf="@id/background" />
<TextView
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="24dp"
android:layout_marginEnd="4dp"
android:background="@drawable/button_background"
android:gravity="center"
android:text="Button3"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toEndOf="@id/background"
app:layout_constraintStart_toEndOf="@id/button2"
app:layout_constraintTop_toTopOf="@id/background" />
</android.support.constraint.ConstraintLayout>
background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="16dp" />
<solid android:color="#11000000" />
</shape>
button_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="12dp" />
<stroke android:width="2dp" android:color="@color/colorPrimary" />
<solid android:color="#ffffff" />
</shape>
但是我得到以下结果：
我不明白，为什么视图之间的空间如此之大。链的权重如 documentation 中所述。第一个视图之前和最后一个视图之后应该有 4dp 的边距，并且按钮之间没有任何空格。
更新
我已经尝试了 1.0.2 版和约束布局的所有 beta 版，但我只能在 constraint-layout:1.1.0-beta5 中重现该问题。是不是这个版本的constraint-layout有bug，还是我用错了？
更新 2
这实际上是 beta 5 中的一个错误，它是 beta 6 中的 fixed。
我不知道为什么会发生这种情况，也许这确实是 1.1.0-beta5 中的一个错误，但是...
您应用到 background 视图的 start/end 边距被三个按钮的链继承，因为该链被限制在 background 的开始和结束.如果删除这些边距，"gaps" 突然消失：
<View
android:id="@+id/background"
android:layout_width="0dp"
android:layout_height="32dp"
android:layout_marginTop="16dp"
android:background="@drawable/background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
当然，您的设计可能需要这些边距。您可以通过将原始边距恢复到 background 视图并将您的链锚定到父级而不是背景来解决此问题。即把button1上的app:layout_constraintStart_toStartOf属性改成"parent"，把button3上的app:layout_constraintEnd_toEndOf属性改成"parent"：
拼图的最后一块是更改 链 的 start/end 边距以模仿旧行为。以前，您的 background 视图具有 48dp 个边距，链条具有 4dp 个边距。因此，将链边距设置为 52dp 而不是 4dp 以包括背景的 48dp:
我满XML:
<?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">
<View
android:id="@+id/background"
android:layout_width="0dp"
android:layout_height="32dp"
android:layout_marginTop="16dp"
android:layout_marginStart="48dp"
android:layout_marginEnd="48dp"
android:background="@drawable/background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="24dp"
android:layout_marginStart="52dp"
android:gravity="center"
android:text="Button1"
android:background="@drawable/button_background"
app:layout_constraintTop_toTopOf="@id/background"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toStartOf="@id/button2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="24dp"
android:gravity="center"
android:text="Button2"
android:background="@drawable/button_background"
app:layout_constraintTop_toTopOf="@id/background"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toStartOf="@id/button3"
app:layout_constraintStart_toEndOf="@id/button1"/>
<TextView
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="24dp"
android:layout_marginEnd="52dp"
android:gravity="center"
android:text="Button3"
android:background="@drawable/button_background"
app:layout_constraintTop_toTopOf="@id/background"
app:layout_constraintBottom_toBottomOf="@id/background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/button2"/>
</android.support.constraint.ConstraintLayout>