将所有子宽度匹配到 ConstraintLayout 中最宽的子宽度，width = wrap content答案

【问题标题】：Match all children width to widest child width in ConstraintLayout with width = wrap content将所有子宽度匹配到 ConstraintLayout 中最宽的子宽度，width = wrap content
【发布时间】：2018-08-18 17:45:48
【问题描述】：

ConstraintLayout 很强大，但有时也很棘手。

我想用ConstraintLayout 实现一个布局，这可以用LinearLayout 轻松实现。

蓝色区域是父约束布局。红色部分是LinearLayout。我想通过保持以下条件将此 LinearLayout 转换为 ConstraintLayout
1. 所有子项（按钮）的宽度应与最宽的子项相匹配。
2. 最宽的孩子不固定。它将在运行时更改。
3. 红框应保持wrap_content。

我尝试过使用约束布局的屏障、指南和其他属性，但没有成功。

这是带有LinearLayout的代码：

<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"
android:background="#476dce"
android:padding="16dp">

  <LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="#f5aaaa">


    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:text="Small" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:text="Bigggggeer" />


    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:text="Even Bigggggggggeer" />

  </LinearLayout>
</android.support.constraint.ConstraintLayout>

【问题讨论】：

为什么要替换线性布局？
是的。我想放置 ConstraintLayout 而不是 LinearLayout。
如果您知道哪个子宽度最大，您可以这样做。将该子宽度设置为 wrap_content 并设置剩余的子宽度以匹配约束。
这是最终答案：stackoverflow.com/a/59061950/646002

标签： android android-layout android-constraintlayout

【解决方案1】：

当前的 1.1 稳定版本允许基于障碍和不同背景的棘手解决方案。

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

    <View
        android:id="@+id/background"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#f5aaaa"
        app:layout_constraintBottom_toBottomOf="@+id/button3_txt"
        app:layout_constraintLeft_toLeftOf="@+id/left_barrier"
        app:layout_constraintRight_toRightOf="@+id/right_barrier"
        app:layout_constraintTop_toTopOf="@+id/button1_txt" />

    <TextView
        android:id="@+id/button1_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="8dp"
        android:padding="16dp"
        android:text="small"
        app:layout_constraintBottom_toTopOf="@+id/button2_txt"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/button2_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="8dp"
        android:padding="16dp"
        android:text="Bigggggeer"
        app:layout_constraintBottom_toTopOf="@+id/button3_txt"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1_txt" />

    <TextView
        android:id="@+id/button3_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="8dp"
        android:padding="16dp"
        android:text="Even Bigggggggggeer"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2_txt" />

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/button1_txt"
        app:layout_constraintLeft_toLeftOf="@+id/left_barrier"
        app:layout_constraintRight_toRightOf="@+id/right_barrier"
        app:layout_constraintTop_toTopOf="@+id/button1_txt" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/button2_txt"
        app:layout_constraintLeft_toLeftOf="@+id/left_barrier"
        app:layout_constraintRight_toRightOf="@+id/right_barrier"
        app:layout_constraintTop_toTopOf="@+id/button2_txt" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/button3_txt"
        app:layout_constraintLeft_toLeftOf="@+id/left_barrier"
        app:layout_constraintRight_toRightOf="@+id/right_barrier"
        app:layout_constraintTop_toTopOf="@+id/button3_txt" />

    <android.support.constraint.Barrier
        android:id="@+id/right_barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="button1_txt, button2_txt, button3_txt" />

    <android.support.constraint.Barrier
        android:id="@+id/left_barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="start"
        app:constraint_referenced_ids="button1_txt, button2_txt, button3_txt" />

</android.support.constraint.ConstraintLayout>

我们可以将文本与按钮分开，并在每一端设置两个屏障来跟踪三个 TextView 之间的最大文本。
所以现在，按钮只充当背景和点击区域，并且，它们被设置为匹配两个障碍之间的约束。
您可能需要小心与文本相关的高度，因为按钮默认具有高度。当然，如果您不喜欢 Button 的动画高度，请将它们更改为视图。
最后，ConstraintLayout 具有链功能，可以更灵活地模仿 LinearLayout 的行为。

希望这会有所帮助！

【讨论】：

请不要对可行的解决方案投反对票。这对其他开发者没有帮助。
恐怕我听不懂。为什么将文本与按钮分开？你能进一步解释障碍和链条是如何运作的吗？我也对这种新的强大布局感到困惑。
@ScottBiggs 按钮在视觉上等同于带背景的文本。我不得不分开以获得所需的行为。即使它有效，它也不是理想的解决方案。这是我写的一篇文章，详细解释了 ConstraintLayout。 (android.jlelse.eu/…) 希望这会有所帮助！

【解决方案2】：

这是使用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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#476dce"
    android:padding="16dp">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f5aaaa"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button"
            tools:text="Small" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button"
            app:layout_constraintTop_toBottomOf="@id/button1"
            tools:text="Bigggggeer" />


        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button"
            app:layout_constraintTop_toBottomOf="@id/button2"
            tools:text="Even Bigggggggggeer" />

    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

【讨论】：

投反对票的人，我可以知道投反对票的原因吗？它将帮助我相应地改进
将 LinearLayout 更改为 ConstraintLayout 并不能成为 ConstraintLayout 的方式。它仍然是嵌套的，它违背了库的创建目的。另外，匹配父级将不起作用。 CL 支持匹配约束 (0dp)。