ConstraintLayout 的问题 - ImageView 16:9 不适当的上边距答案

【问题标题】：Problems with ConstraintLayout - ImageView 16:9 inappropriate top marginConstraintLayout 的问题 - ImageView 16:9 不适当的上边距
【发布时间】：2018-03-17 05:49:59
【问题描述】：

我想使用 ConstraintLayout 构建以下布局：

我使用这个来源进行布局：

<?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_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@color/colorAccent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintDimensionRatio="h,16:9"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/textView1" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:text="Title"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_constraintTop_toBottomOf="@+id/imageView"
            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_marginTop="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="24dp"
            android:text="Subtle"
            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>

不幸的是得到了这个结果：

如您所见，ImageView 顶部有一个不必要的边距，尽管布局指示 marginTop=0。

【问题讨论】：

你的 layout_gravity 是中心。删除它，你应该很高兴
@NSimon 不，它没有帮助...看这个截图dropbox.com/s/rftoxtk76jg3r6i/Screenshot_1507214820.png?dl=0
删除这个：app:layout_constraintBottom_toTopOf="@+id/textView1"
@SuhaylSH 如果app:layout_constraintBottom_toTopOf="@+id/textView1" 被移除，那么我会以某种方式在 textView1 和 imageView 之间获得 40dp 的垂直距离。看这个截图dropbox.com/s/tjw1raf224aaq6l/…

标签： android android-imageview margin android-constraintlayout constraint-layout-chains

【解决方案1】：

它的要点是使用一个打包的链，垂直偏移为0，这样链的内容就会在顶部。另外，我不确定你为什么使用 FrameLayout——你可能不需要。

使用 1.1.0-beta2：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toTopOf="@+id/textView1"
        app:layout_constraintDimensionRatio="h,16:9"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        app:srcCompat="@android:color/darker_gray" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:text="Title"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        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_marginTop="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="24dp"
        android:text="Subtle"
        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>

【讨论】：

感谢您的回答！是的，打包链修复了请求布局中的所有垂直边距，即使使用约束布局 v1.0.2。我将 FrameLayout 仅用于测试目的作为根布局，因为我想了解 ConstraintLayout 包装内容的方式。我可以将 ConstraintLayout 与 layout_height="wrap_content" 一起使用，例如作为 RecyclerView 项。

【解决方案2】：

前两个答案会起作用。如果你想保持你的垂直链，你也可以将app:layout_constraintVertical_chainStyle="spread_inside"添加到顶部ImageView。

这是添加此语句后的图像（但没有更改其他任何内容。）

这是 XML：

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

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@color/colorAccent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintDimensionRatio="h,16:9"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintVertical_chainStyle="spread_inside"
            app:layout_constraintBottom_toTopOf="@+id/textView1" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:text="Title"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_constraintTop_toBottomOf="@+id/imageView"
            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_marginTop="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="24dp"
            android:text="Subtle"
            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>

更新：因此上述内容不适用于ConstraintLayout 1.0.2 版的 API 23。请尝试以下方法：

从textView2 中删除android:layout_marginTop="16dp" 并将android:layout_marginBottom="16dp" 添加到textView1。这会有所不同。

【讨论】：

前两个答案不起作用，我在 textView1 和 imageView dropbox.com/s/tjw1raf224aaq6l/… 之间得到大约 40dp 的距离。使用“spread_inside”，我在 textView1 和 textView2 之间没有垂直边距。请参阅此屏幕截图dropbox.com/s/59nixtlhnah44j7/device-2017-10-05-190906.png?dl=0。
刚刚复制/粘贴了您的源代码，并在 API 23 上运行的 Nexus 5 模拟器上获得这些结果，在 API 23 dropbox.com/s/x48wk7sgk4ma6d5/Screenshot_1507223903.png?dl=0 上运行的真实 Nexus 5 上获得相同的结果。如您所见，textView1 和 textView2 之间没有空格。
请告诉我，@Cheticamp 使用什么约束布局版本？
@EugeneBrusov 我想我们之前就你的另一个问题进行了这次对话。我使用最新的 beta 版本：1.1.0-beta2。如果您不想运行 beta 版本（可以理解），如果您尚未运行 1.0.1，则可能需要将其视为最新的生产版本。
啊，我现在明白了……是的，1.1.0-beta2 解决了许多问题，只是它仍处于测试阶段。无论如何，感谢您为我测试这个！

【解决方案3】：

根据在回复此问题时发布的答案和 cmets，并考虑到约束布局 v1.1.0 仍处于测试阶段这一事实，目前最好的解决方案是使用 app:layout_constraintVertical_chainStyle="packed"：

<?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_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintDimensionRatio="h,16:9"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/textView1"
            app:layout_constraintVertical_chainStyle="packed"/>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:text="Title"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_constraintTop_toBottomOf="@+id/imageView"
            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_marginTop="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="24dp"
            android:text="Subtle"
            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>

【讨论】：

【解决方案4】：

我需要去掉这个上边距

为此，只需删除此行

app:layout_constraintBottom_toTopOf="@+id/textView1"

来自您的ImageView

【讨论】：

查看结果dropbox.com/s/tjw1raf224aaq6l/…。现在 textView1 和 imageView 之间的垂直距离约为 40dp。

【解决方案5】：

试试这个 -> 我在ImageView 中删除了app:layout_constraintBottom_toTopOf="@+id/textView1"，它工作正常。

<?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_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@color/colorAccent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintDimensionRatio="h,16:9"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:text="Title"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_constraintTop_toBottomOf="@+id/imageView"
            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_marginTop="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="24dp"
            android:text="Subtle"
            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>

【讨论】：

查看结果 dropbox.com/s/tjw1raf224aaq6l/...。现在 textView1 和 imageView 之间的垂直距离约为 40dp。