ConstraintLayout：将TextView放在ImageView下面

Question

我面临着一个看似简单的布局任务：

一个ImageView根据图像的纵横比取全宽、高
一个TextView低于那个

这就是我的

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

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/hamster"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText "
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image_view"/>

</android.support.constraint.ConstraintLayout>

这就是它的样子：

如您所见，ImageView 顶部有一个我不想要的边距。

如果我将 ImageView's 约束从

更改为

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

到

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

（移除底部约束），结果如下所示：

现在 ImageView 在我布局的最顶部，但是 TextView 已经消失了。请注意，对于第二种变体，Android Studio 3 的布局预览显示的布局与我想要的完全一样：

我做错了什么，我该如何解决？

注意：布局需要为 ConstraintLayout，布局的高度必须为 wrap_content。

你可以找到我的测试项目here。

编辑：问题似乎只发生在较大的设备上。我正在使用 Nexus 9 模拟器。

Answer 1

是的，正如 Akash Amin 所说，在您的 ImageView 中添加这两行

    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintVertical_bias="0.0"

Answer 2

试试这个对你有帮助

<?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="match_parent">


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@color/colorAccent"
        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:layout_marginRight="8dp"
        android:layout_marginTop="0dp"
        android:text="MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText "
        android:textAlignment="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp" />
</android.support.constraint.ConstraintLayout>

Answer 3

试试这个..

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

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText "
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image_view" />

</android.support.constraint.ConstraintLayout>

删除imageview的bootom约束，将textview的top约束设置为imageview的bottom

Answer 4

<?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="match_parent">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="0dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/guideline" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="MyText MyText MyText MyText MyText MyText MyText 
        MyText MyText MyText MyText MyText MyText MyText MyText MyText 
        MyText 
        MyText MText MyText MyText MyText MyText MyText MyText MyText 
        MyText 
        MyText MyText MyText MyText MyText MyText MText MyText MyText 
        MyText 
        MyText MyText MyText MyText MyText MyText MyText MyText MyText t 
        MyText MyText MyText MyText "
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.45" />

</android.support.constraint.ConstraintLayout>

ConstraintLayout：将TextView放在ImageView下面

ConstraintLayout: place TextView below ImageView

android

android-layout

android-constraintlayout

试试这个对你有帮助