ConstraintLayout 的问题 - 垂直边距不起作用

Posted 2023-03-06

【中文标题】ConstraintLayout 的问题 - 垂直边距不起作用

【英文标题】：Problems with ConstraintLayout - vertical margin doesn't work

【发布时间】：2018-03-16 23:53:34

【问题描述】：

我想使用 ConstraintLayout 构建这个简单的布局：

当 Title 和 Subtle 只是单行文本时，它可以正常工作。问题来自较长的文本。如您所见，Title 和 Subtle 相互重叠：

这是我用于布局的源代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <android.support.constraint.ConstraintLayout
        android:layout_
        android:layout_
        android:layout_gravity="center"
        android:background="#EEEEEE">

        <TextView
            android:id="@+id/textView1"
            android:layout_
            android:layout_
            android:layout_marginTop="24dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_
            android:layout_
            android:layout_marginTop="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="24dp"
            android:text="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            app:layout_constraintTop_toBottomOf="@+id/textView1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

    </android.support.constraint.ConstraintLayout>

</FrameLayout>

那么问题出在哪里？

---

编辑 1 2017 年 10 月 5 日下午 1:19

似乎只能在运行 Android 6.0 (API 23) 的设备/模拟器上重现。在运行 API 21-22、24+ 的设备上按预期工作。

【参考方案1】：

您的 TextView1 没有下限。

只需添加

app:layout_constraintBottom_toTopOf="@+id/textView2"

为你的第一个 textView

【讨论】：

您的解决方案有效，但它仅适用于这种特殊情况，如果我在这些文本视图上方添加 ImageView，我会遇到其他奇怪的布局问题。看看这个问题，例如***.com/questions/46588508/…

【参考方案2】：

我建议您仅使用为您提供chaining option 的 ConstraintLayout。有了它，您可以打包两个 TextView 并将它们垂直居中于 ConstraintLayout 本身，而无需 FrameLayout 和您面临的问题：

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:background="#EEEEEE">

    <TextView
        android:id="@+id/textView1"
        android:layout_
        android:layout_
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="24dp"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/textView2"
        android:layout_
        android:layout_
        android:layout_marginBottom="24dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        android:text="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />

</android.support.constraint.ConstraintLayout>

【讨论】：

是的，“打包”链样式解决了这个问题。谢谢！

【参考方案3】：

在带有ConstraintLayout 版本 1.0.0-beta5 的 API 23 上，看起来顶部边距没有得到尊重，或者顶部 TextView 的高度计算不正确。我确实看到 API 23 与此版本的 ConstraintLayout 重叠，但在 API 24 上没有。

但是，对于 ConstraintLayout 版本 1.1.0-beta2，在 API 23 和 API 24 上一切正常，因此这可能是一个已更正的问题。建议您升级到ConstraintLayout 的更高版本，看看问题是否仍然存在。

【讨论】：

我已经使用 1.1.0-beta2 对其进行了测试，是的，看起来它已在该版本中修复。但由于它仍处于测试阶段，我宁愿到目前为止不使用它。到目前为止，看起来生产最好使用 chain="packed" 。