如果某些链接视图受限于另一个链接视图，则ConstraintLayout链不起作用

Question

我不确定它是否是ConstraintLayout的错误，所以我试着询问是否有人知道我犯了任何错误。

我有一个布局，我想在屏幕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"/>

可悲的是，它似乎“打破”了3个元素的链条。 3个元素现在不会水平扩散，但包裹到非常小的尺寸：

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

有没有人遇到过这样的事情？你是如何解决的？

现在，我知道我至少有两种方法可以解决这个问题：
（1）使用一个带有复合drawable的TextView，而不是ImageView + TextView;
（2）使用LinearLayout包装ImageView和TextView

但我想知道为什么它不起作用（这样我们可以更好地理解ConstraintLayout），而不是找到替代方案。

谢谢！

Answer 1

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

参考上图，最左边的框有一行TextView。 TextView和ImageView在框中以组的形式居中。这是通过为TextView指定以下内容来完成的。

<TextView
    android:layout_width="0dp"
    app:layout_constraintWidth_default="wrap" 
    .. the rest of it .../>

有关app:layout_constraintWidth_default="wrap"的使用情况，请参阅this posting。

  

app:layout_constraintWidth_default="wrap"（宽度设置为0dp）。如果设置，小部件将具有与使用wrap_content相同的大小，但将受到约束的限制（即它不会扩展超出它们）

更新：ConstraintLayout 1.1.0 beta2看起来需要更改上面的XML。请参阅release update。

我认为我们现在在XML中寻找的内容如下：

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

我使用1.1.0之前的Beta2布局离开了此帖的其余部分。要进行更新，只需进行上述更改即可。中心问题仍然存在。

这对于单行示例很有用，并且视图在框中居中，但是当TextView跨越多行时我们遇到困难，就像在上面的图像中间框中一样。虽然TextView中的文字已被包装且未超出其约束范围，但ImageView和TextView并未像我们预期的那样居中。实际上，TextView的边界延伸到蓝框的右侧。

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

Space窗口小部件现在可以展开，就像垫片一样，将ImageView向右移动将链条居中的数量。 （请参见上图中的右侧框。）getExcessWidth() MainActivity方法计算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);
    }
}

Answer 2

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.text.*?> <?import java.lang.*?> <?import java.util.*?> <?import javafx.scene.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <AnchorPane id="AnchorPane" prefHeight="654.0" prefWidth="747.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="sudokusolver.FXMLDocumentController"> <children> <BorderPane prefHeight="654.0" prefWidth="747.0"> <center> <GridPane fx:id="gridPane" gridLinesVisible="true" prefHeight="198.0" prefWidth="200.0" BorderPane.alignment="CENTER"> <columnConstraints> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> </columnConstraints> <rowConstraints> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> </rowConstraints> </GridPane> </center> <bottom> <HBox alignment="CENTER" prefHeight="40.0" prefWidth="747.0" BorderPane.alignment="CENTER"> <children> <FlowPane prefHeight="200.0" prefWidth="200.0"> <children> <Button fx:id="loadButton" alignment="CENTER" contentDisplay="CENTER" minHeight="-Infinity" minWidth="-Infinity" onAction="#setGrid" prefHeight="35.0" prefWidth="100.0" text="Load Board" /> <Button fx:id="solveButton" alignment="CENTER" contentDisplay="CENTER" minHeight="-Infinity" minWidth="-Infinity" onAction="#sudokuSolve" prefHeight="35.0" prefWidth="100.0" text="Solve" /> </children> </FlowPane> </children> </HBox> </bottom> </BorderPane> </children> </AnchorPane> 似乎按预期工作。您没有指定元素的视图类型，因此我采用了ConstraintLayout和TextView并将其链接到ImageView内。我还将View的宽度从TextView（match_constraints）更改为0dp。结果如下：

..和XML。

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> 和TextView链接在这些障碍之间。请参阅ImageView中有关障碍的this writeup。

Answer 3

这可能是您可以将ImageView和TextView置于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">


    <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"，则布局将正确定位

这是输出的样子

Answer 4

我注意到您已将内部视图链设置为“挤满了”行

df<-data%>%dplyr::filter(!Date %in% DateFilter)

几乎这个功能似乎扩展到了父视图（“您的情况下的元素”）。

您应该尝试在标记中暂时删除此行，以查看问题是否消失。

如果是这样，修复应该很容易。有很多方法可以在不嵌套布局的情况下达到相同的效果。