如果某些链接视图约束到另一个链接视图,则 ConstraintLayout 链不起作用

ConstraintLayout chain does not work if some chained views constrained to another chained view

不知道是不是ConstraintLayout的bug,想问一下有没有人知道我弄错了

我有一个布局,我想在屏幕上均匀分布 3 个元素。 就像下面这样:

我在它们之间形成了水平链,如您所见,它们分布均匀并且运行良好。

现在我想在每个元素内放置一个图像和一个居中的 TextView,如下所示:

所以这就是我尝试做的,以元素 1 为例:

        <ImageView
            android:id="@+id/image1"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:src="@drawable/image1"
            app:layout_constraintBottom_toBottomOf="@id/element_1"
            app:layout_constraintLeft_toLeftOf="@id/element_1"
            app:layout_constraintTop_toTopOf="@id/element_1"
            app:layout_constraintRight_toLeftOf="@+id/text1"
            app:layout_constraintHorizontal_chainStyle="packed"/>

        <TextView
            android:id="@+id/text1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginLeft="2dp"
            android:text="@string/text1"
            app:layout_constraintBottom_toBottomOf="@id/element_1"
            app:layout_constraintLeft_toRightOf="@id/image1"
            app:layout_constraintRight_toRightOf="@id/element_1"
            app:layout_constraintTop_toTopOf="@id/element_1"
            app:layout_constraintHorizontal_chainStyle="packed"
            android:gravity="center_vertical"/>

可悲的是,似乎"break" 3元素链。这 3 个元素现在不再水平展开,而是包裹成一个非常小的尺寸:

如果我删除了 ImageView 和 TextView 之间的链,它就可以正常工作。但是后来我无法将 ImageView 和 TextView 置于元素内。

有没有人遇到过这样的事情?你是怎么解决的?

现在,我知道我至少有 2 个替代方案来解决这个问题:
(1) 使用一个带有复合可绘制对象的 TextView,而不是 ImageView + TextView;
(2) 用一个LinearLayout包裹ImageView和TextView

但我想知道为什么它不起作用(以便我们更好地理解ConstraintLayout),而不是寻找替代方案

谢谢!

这可能是最接近 ImageViewTextViewConstraintLayout 中居中的方法,无需任何类型的嵌套布局。

这是执行此操作的代码

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


    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="110dp"
        android:background="@drawable/border_normal"
        app:layout_constraintRight_toLeftOf="@+id/frameLayout"
        app:layout_constraintLeft_toLeftOf="parent"
        android:id="@+id/frameLayout2"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp">

    </FrameLayout>

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="110dp"
        android:id="@+id/frameLayout"
        android:background="@drawable/border_normal"
        app:layout_constraintRight_toLeftOf="@+id/frameLayout3"
        app:layout_constraintLeft_toRightOf="@+id/frameLayout2"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp">

    </FrameLayout>

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="110dp"
        app:layout_constraintRight_toRightOf="parent"
        android:background="@drawable/border_normal"
        app:layout_constraintLeft_toRightOf="@+id/frameLayout"
        android:id="@+id/frameLayout3"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp">

    </FrameLayout>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher_round"
        android:layout_marginLeft="16dp"
        app:layout_constraintLeft_toLeftOf="@+id/frameLayout2"
        app:layout_constraintBottom_toBottomOf="@+id/frameLayout2"
        app:layout_constraintTop_toTopOf="@+id/frameLayout2"
        android:layout_marginStart="24dp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="@+id/frameLayout2"
        app:layout_constraintTop_toTopOf="@+id/frameLayout2"
        app:layout_constraintBottom_toBottomOf="@+id/frameLayout2"
        android:layout_marginRight="16dp"
        app:layout_constraintLeft_toRightOf="@+id/imageView"
        android:text="TextView"
        android:layout_marginEnd="8dp" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher_round"
        android:layout_marginLeft="16dp"
        app:layout_constraintLeft_toLeftOf="@+id/frameLayout"
        app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
        app:layout_constraintTop_toTopOf="@+id/frameLayout"
        android:layout_marginStart="24dp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="@+id/frameLayout"
        app:layout_constraintTop_toTopOf="@+id/frameLayout"
        app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
        android:layout_marginRight="16dp"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        android:text="TextView"
        android:layout_marginEnd="8dp" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher_round"
        android:layout_marginLeft="16dp"
        app:layout_constraintLeft_toLeftOf="@+id/frameLayout3"
        app:layout_constraintBottom_toBottomOf="@+id/frameLayout3"
        app:layout_constraintTop_toTopOf="@+id/frameLayout3"
        android:layout_marginStart="24dp" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="@+id/frameLayout3"
        app:layout_constraintTop_toTopOf="@+id/frameLayout3"
        app:layout_constraintBottom_toBottomOf="@+id/frameLayout3"
        android:layout_marginRight="16dp"
        app:layout_constraintLeft_toRightOf="@+id/imageView3"
        android:text="TextView"
        android:layout_marginEnd="8dp" />

</android.support.constraint.ConstraintLayout>

备用解决方案

更好的解决方案是将图像视图和文本视图包装在 ConstraintLayout

<android.support.constraint.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintRight_toRightOf="@+id/frameLayout"
    app:layout_constraintLeft_toLeftOf="@+id/frameLayout"
    app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
    app:layout_constraintTop_toTopOf="@+id/frameLayout"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp">


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher_round"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/textView2"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageView2" />

</android.support.constraint.ConstraintLayout>

编辑

<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"
    tools:layout_editor_absoluteY="73dp"
    tools:layout_editor_absoluteX="0dp">


    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="0dp"
        android:layout_height="110dp"
        android:background="@drawable/border_normal"
        app:layout_constraintRight_toLeftOf="@+id/frameLayout3"
        app:layout_constraintLeft_toRightOf="@+id/frameLayout2"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp">

    </FrameLayout>

    <FrameLayout
        android:id="@+id/frameLayout3"
        android:layout_width="0dp"
        android:layout_height="110dp"
        android:background="@drawable/border_normal"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/frameLayout"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp">

    </FrameLayout>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher_round"
        app:layout_constraintLeft_toLeftOf="@id/frameLayout2"
        app:layout_constraintRight_toLeftOf="@+id/textView2"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintTop_toTopOf="@+id/frameLayout2"
        app:layout_constraintBottom_toBottomOf="@id/frameLayout2"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="24dp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintRight_toRightOf="@id/frameLayout2"
        app:layout_constraintLeft_toRightOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/frameLayout2"
        app:layout_constraintBottom_toBottomOf="@id/frameLayout2"
        android:layout_marginTop="8dp"
        android:layout_marginRight="24dp" />

    <FrameLayout
        android:id="@+id/frameLayout2"
        android:layout_width="0dp"
        android:layout_height="110dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/border_normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/frameLayout"
        app:layout_constraintTop_toTopOf="parent">

    </FrameLayout>

</android.support.constraint.ConstraintLayout>

如果链样式设置为app:layout_constraintHorizontal_chainStyle="spread_inside"

,布局将正确定位

这是输出的样子

ConstraintLayout 似乎按预期工作。您没有指定元素的视图类型,因此我采用 TextViewImageView 并将它们链接在 View 中。我还将 TextView 的宽度从 0dp (match_constraints) 更改为 wrap_content。这是结果:

..和 XML.

 <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/element_1"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:background="@color/colorPrimary"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/element_2"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image1"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@id/element_1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="@id/element_1"
        app:layout_constraintRight_toLeftOf="@+id/text1"
        app:layout_constraintTop_toTopOf="@id/element_1" />

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:gravity="center_vertical"
        android:text="A string"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="@id/element_1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@id/image1"
        app:layout_constraintRight_toRightOf="@id/element_1"
        app:layout_constraintTop_toTopOf="@id/element_1" />

    <View
        android:id="@+id/element_2"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="16dp"
        android:background="@color/colorPrimary"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toRightOf="@+id/element_1"
        app:layout_constraintRight_toLeftOf="@+id/element_3"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image2"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@id/element_2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="@id/element_2"
        app:layout_constraintRight_toLeftOf="@+id/text2"
        app:layout_constraintTop_toTopOf="@id/element_2" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:gravity="center_vertical"
        android:text="A longer string"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="@id/element_2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@id/image2"
        app:layout_constraintRight_toRightOf="@id/element_2"
        app:layout_constraintTop_toTopOf="@id/element_2" />

    <View
        android:id="@+id/element_3"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        android:background="@color/colorPrimary"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toRightOf="@+id/element_2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image3"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@id/element_3"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="@id/element_3"
        app:layout_constraintRight_toLeftOf="@+id/text3"
        app:layout_constraintTop_toTopOf="@id/element_3" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:gravity="center_vertical"
        android:text="A still longer string"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="@id/element_3"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@id/image3"
        app:layout_constraintRight_toRightOf="@id/element_3"
        app:layout_constraintTop_toTopOf="@id/element_3" />
</android.support.constraint.ConstraintLayout>

如果这对您来说仍然是个问题,如果您可以 post 更多 XML 包括元素,那将会很有帮助。与此同时,有几点想法。

首先,检查以确保您没有将 left/right 与 start/end 约束混用。如果您同时提供两者,他们应该同意。过去设计师在应用这些方面存在不一致。

其次,您可以在每个元素的左侧和右侧设置障碍物,并在这些障碍物之间链接 TextViewImageView。请参阅 this writeup 关于 ConstraintLayout 中的障碍。

在发布我对这个问题的其他答案后,我意识到它没有解决如何将多行居中的问题 TextView

参照上图,最左边的方框只有一行TextViewTextViewImageView 在框中作为一个组居中。这是通过为 TextView.

指定以下内容来完成的
<TextView
    android:layout_width="0dp"
    app:layout_constraintWidth_default="wrap" 
    .. the rest of it .../>

参见 关于 app:layout_constraintWidth_default="wrap" 的使用。

app:layout_constraintWidth_default="wrap" (with width set to 0dp). If set, the widget will have the same size as if using wrap_content, but will be limited by constraints (i.e. it won't expand beyond them)

更新: 上面的 XML 似乎需要针对 ConstraintLayout 1.1.0 beta2 进行更改。见 release update.

我认为我们现在在 XML 中寻找的是以下内容:

<TextView
    android:layout_width="wrap_content"
   app:layout_constrainedWidth="true"
    .. the rest of it .../>

我已使用 1.1.0 之前的 beta2 布局保留了这篇文章的其余部分。要更新,只需进行上述更改即可。居中问题仍然存在。


这对于单行示例非常有用,视图在框中居中,但是当 TextView 跨越多行时,我们 运行 遇到了困难,就像在图像的中间框中一样多于。尽管 TextView 中的文本被换行并且不会超出其限制,但 ImageViewTextView 并不像我们预期的那样居中。事实上,TextView 的边界延伸到蓝色框的右侧。

我的快速解决方法是在最右边的框中 ImageView 的左侧插入一个零宽度 Space 小部件。链条是该框现在锚定在 Space 小部件和框的右侧之间。 ImageViewSpace.

限制在左侧

现在可以扩展 Space 小部件,使其像垫片一样将 ImageView 向右移动一定量,使链居中。 (参见上图中的右框。)MainActivitygetExcessWidth() 方法计算 Space 小部件需要的宽度。

这是 XML:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/element_1"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:background="@color/colorPrimary"
        app:layout_constraintEnd_toStartOf="@+id/element_2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/element_2"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:background="@color/colorPrimary"
        app:layout_constraintEnd_toStartOf="@+id/element_3"
        app:layout_constraintStart_toEndOf="@+id/element_1"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/element_3"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:background="@color/colorPrimary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/element_2"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image1"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginLeft="8dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@id/element_1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="@id/element_1"
        app:layout_constraintRight_toLeftOf="@+id/text1"
        app:layout_constraintTop_toTopOf="@id/element_1" />

    <ImageView
        android:id="@+id/image2"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginLeft="8dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@id/element_2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="@id/element_2"
        app:layout_constraintRight_toLeftOf="@+id/text2"
        app:layout_constraintTop_toTopOf="@id/element_2" />

    <android.support.v4.widget.Space
        android:id="@+id/spacer3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@id/element_3"
        app:layout_constraintLeft_toLeftOf="@id/element_3"
        app:layout_constraintTop_toTopOf="@id/element_3" />

    <ImageView
        android:id="@+id/image3"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginLeft="8dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@id/element_3"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@id/spacer3"
        app:layout_constraintRight_toLeftOf="@id/text3"
        app:layout_constraintTop_toTopOf="@id/element_3" />

    <TextView
        android:id="@+id/text1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="8dp"
        android:gravity="center_vertical"
        android:text="String"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="@id/element_1"
        app:layout_constraintLeft_toRightOf="@id/image1"
        app:layout_constraintRight_toRightOf="@id/element_1"
        app:layout_constraintTop_toTopOf="@id/element_1"
        app:layout_constraintWidth_default="wrap" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="8dp"
        android:gravity="center_vertical"
        android:text="A 2-line string"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="@id/element_2"
        app:layout_constraintLeft_toRightOf="@id/image2"
        app:layout_constraintRight_toRightOf="@id/element_2"
        app:layout_constraintTop_toTopOf="@id/element_2"
        app:layout_constraintWidth_default="wrap" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginRight="8dp"
        android:gravity="center_vertical"
        android:text="A 2-line string"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="@id/element_3"
        app:layout_constraintLeft_toRightOf="@id/image3"
        app:layout_constraintRight_toRightOf="@id/element_3"
        app:layout_constraintTop_toTopOf="@id/element_3"
        app:layout_constraintWidth_default="wrap" />

</android.support.constraint.ConstraintLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chained_chains);
        ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.constraintLayout);

        layout.post(new Runnable() {
            @Override
            public void run() {
                final TextView textView = (TextView) findViewById(R.id.text3);
                int excessWidth = getExcessWidth(textView);

                if (excessWidth > 0) {
                    Space spacer = (Space) findViewById(R.id.spacer3);
                    ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) spacer.getLayoutParams();
                    lp.width = getExcessWidth(textView) / 2;
                    spacer.setLayoutParams(lp);
                }
            }
        });
    }

    private int getExcessWidth(TextView textView) {

        if (textView.getLineCount() <= 1) {
            return 0;
        }

        Layout layout = textView.getLayout();
        int maxWidth = 0;

        for (int i = 0; i < textView.getLineCount(); i++) {
            maxWidth = Math.max(maxWidth, (int) layout.getLineWidth(i));
        }

        return Math.max(textView.getWidth() - maxWidth, 0);
    }
}

我注意到您将内部视图链设置为 'packed' 并使用

app:layout_constraintHorizontal_chainStyle="packed"

似乎此功能正在扩展到父视图('elements in your case')。

您应该尝试暂时删除标记中的这一行,看看问题是否消失。

如果是这样,修复应该很容易。有很多方法可以在不使用嵌套布局的情况下实现同样的效果。