我不确定这是否是 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 居中。

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

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

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

谢谢!

最佳答案

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

引用上图，最左边的框有一行TextView . TextView和 ImageView在框中作为一个组居中。这是通过为 TextView 指定以下内容来完成的.

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

参见 this posting关于 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 测试版 2。查看release update .

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

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

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

这对于单行示例非常有效并且 View 在框中居中，但是当 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);
    }
}

关于android - 如果某些链接 View 约束到另一个链接 View ，则 ConstraintLayout 链不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46537109/