ConstraintLayout:将TextView放在ImageView下面

时间:2017-11-08 11:52:25

标签: android android-layout android-constraintlayout

我面临着看似简单的布局:

  • 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>

这就是它的样子:

enter image description here

正如您所看到的,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"

(删除底部约束),结果如下所示:

enter image description here

现在ImageView位于我的布局的最顶端,但TextView已经消失。请注意,对于第二个版本,Android Studio 3的布局预览显示了我想要的布局:

enter image description here

我做错了什么,我该如何解决?

注意:布局必须为ConstraintLayout,布局的高度必须为wrap_content

您可以找到我的测试项目here

编辑:问题似乎只发生在较大的设备上。我使用的是Nexus 9仿真器。

4 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:0)

试试这对你有帮助

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

enter image description here

答案 2 :(得分:0)

试试这个..

<?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 constraint设置为imageview的底部

答案 3 :(得分:0)

<?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>
相关问题