ConstraintLayout 中的元素叠加答案

【问题标题】：Overlay of the elements in ConstraintLayoutConstraintLayout 中的元素叠加
【发布时间】：2018-02-04 20:44:22
【问题描述】：

我有以下布局：

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:background="#EEEEEE"
    >

    <ImageView
        android:layout_width="4dp"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        />

    <TextView
        android:text="12345678911131517192123252729313335373941434547495153555759616365676971737577798183858789"
        android:id="@+id/title"
        android:textSize="15sp"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="16dp"
        />

    <TextView
        android:text="  text text"
        android:id="@+id/prev"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/title"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="WHY WHY WHY"
        app:layout_constraintTop_toBottomOf="@+id/prev"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        />


</android.support.constraint.ConstraintLayout>

我们有以下结果： image with this issue

另外，如果我们把第一个TextView的文字改成：“1234567891113151719212325272931333537394143454749515355575961636567697173757779818385878991”（也就是再加2个数字），最后一个TextView停止关闭前一个数字。

此外，如果我们在最后一个 TextView 中将 layout_marginBottom 属性更改为 0dp（并且文本将保持与示例中一样），问题也会消失。这个问题的原因是什么？如何解决？

更新：

在左侧添加了一个具有 match_parent 高度的路径。因此不能在 ConstraintLayout 中使用 paddingBottom。 RecyclerView中使用了layout，所以底部元素需要一个layout_marginBottom。

【问题讨论】：

标签： android android-layout android-constraintlayout

【解决方案1】：

我认为删除app:layout_constraintBottom_toBottomOf="parent" 可以解决您的问题

出现这个问题是因为你给了父 ConstraintLayout android:layout_height="wrap_content" 因此它会自动尝试在指定的边界内排列自己

编辑：

我已经尝试和测试了下面的代码，这些代码在我的RecyclerView 中有效，希望它也适用于你。

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:background="#EEEEEE">

<!--Your Test ImageView-->
    <!--<ImageView
        android:layout_width="4dp"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />-->

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="8dp"
        android:text="12345678911131517192123252729313335373941434547495153555759616365676971737577798183858789"
        android:textSize="15sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/prev"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="8dp"
        android:text="  text text"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="8dp"
        android:paddingBottom="32dp"
        android:text="WHY WHY WHY"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/prev" />


</android.support.constraint.ConstraintLayout>

希望对你有帮助！

【讨论】：

它并没有完全解决问题，因为底部边距消失了。
如果它是您 xml 中需要的最后一个小部件，那么您的 layout_marginBottom 将无效
不，这只是一个例子，实际上像这样的布局是有背景的，并且在RecyclerView中使用。
我建议您将其从TextView 中删除并将layout_marginBottom 放入ConstraintLayout，这样应该可以解决您的问题
如果您使用RecyclerView，那么您可以使用DividerItemDecoration 来设置项目之间的间距。查看stackoverflow.com/questions/24618829/…了解更多详情

【解决方案2】：

发生错误是因为最后一个 textview 中的那行 app:layout_constraintBottom_toBottomOf="parent" .. 因为 ConstraintLayout 像 RelativeLayout
只需删除此行

【讨论】：

【解决方案3】：

要么从textview3 中删除app:layout_constraintBottom_toBottomOf="parent"，要么将布局的高度更改为match_parent。

希望这会有所帮助！ :)

【讨论】：

我需要一个 wrap_content。如果删除 app:layout_constraintBottom_toBottomOf="parent"，layout_marginBottom 将停止工作。

【解决方案4】：

像其他人建议的那样从 textview3 中删除 app:layout_constraintBottom_toBottomOf="parent"，并将 android:paddingBottom="8dp" 添加到父约束布局。您还可以向 textview3 添加一个 marginTop 参数，以将其与 textview2 隔开。

【讨论】：

【解决方案5】：

我有一个与Problems with ConstraintLayout - vertical margin doesn't work 非常相似的问题，唯一的解决方案是使用“打包”垂直链。所有这些“...添加/删除 layout_constraintBottom_toBottomOf="parent"...” 只是针对特定情况解决问题的技巧。

这是集成“打包”垂直链的布局：

<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="wrap_content"
    android:background="#EEEEEE" >

    <ImageView
        android:layout_width="4dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="16dp"
        android:textSize="15sp"
        android:text="12345678911131517192123252729313335373941434547495153555759616365676971737577798183858789"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/prev"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:text="  text text"
        android:id="@+id/prev"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toBottomOf="@+id/title"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="WHY WHY WHY"
        app:layout_constraintTop_toBottomOf="@+id/prev"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

它适用于任何文本视图长度，并且 ConstraintLayout 正确包装其内容，看看这个 gif：

您可以在此处https://github.com/eugenebrusov/cards 找到使用 ConstraintLayout 构建的 RecyclerView 项目布局的更复杂实现。

【讨论】：