8

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

我有一个布局,我想在屏幕 3 个元素上均匀分布。就像下面这样: 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)使用一个带有复合可绘制对象的 TextView,而不是 ImageView + TextView;
(2)使用一个LinearLayout来包装ImageView和TextView

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

谢谢!

4

4 回答 4

12

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

在此处输入图像描述

参考上图,最左边的框有一行TextView。TheTextView和 theImageView在框中作为一个组居中。这是通过为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"(宽度设置为 0dp)。如果设置,小部件将具有与使用 wrap_content 相同的大小,但会受到约束的限制(即它不会扩展超出它们)

更新:看起来上面的 XML 需要为ConstraintLayout1.1.0 beta2 更改。请参阅发布更新

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

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

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


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

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

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

这是 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);
    }
}
于 2017-10-03T21:13:57.030 回答
2

ConstraintLayout似乎按预期工作。您没有指定元素是哪种视图,因此我采用TextViewandImageView并将它们链接在View. 我还将(match_constraints)的宽度更改TextView为. 结果如下:0dpwrap_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>

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

首先,检查以确保您没有将左/右与开始/结束约束混合。如果您同时提供两者,他们应该同意。过去,设计师在如何应用这些方面存在不一致的情况。

其次,您可以在每个元素的左侧和右侧设置障碍,并在这些障碍之间链接TextView和。ImageView请参阅这篇关于ConstraintLayout.

于 2017-10-03T13:16:17.067 回答
1

我注意到您已将内部视图链设置为与行“打包”

app:layout_constraintHorizontal_chainStyle="packed"

似乎此功能正在扩展到父视图(“您的案例中的元素”)。

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

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

于 2020-02-12T18:25:58.080 回答
0

这可能是您可以在没有任何嵌套布局的情况下将ImageViewand居中的最接近的方法。TextViewConstraintLayout

在此处输入图像描述

这是执行此操作的代码

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

这就是输出的样子

在此处输入图像描述

于 2017-10-03T09:30:21.867 回答