堆栈内存溢出
  简体   繁体   English

ConstraintLayout：将TextView放在ImageView下面

[英]ConstraintLayout: place TextView below ImageView

 原文  2017-11-08 11:52:25  7   4    android/ android-layout/ android-constraintlayout

问题描述

I'm faced with the seemingly simple task of having a layout with: 我面临着一个看似简单的任务：布局：

  • An ImageView taking the full width, height according to image's aspect ratio ImageView根据图像的纵横比获取全宽，高度
  • a TextView below that 下面的TextView

This is what I have 这就是我所拥有的 

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

And this is what it looks like: 这就是它的样子：

在此输入图像描述

As you can see, the ImageView has a margin to the top which I do not want. 正如您所看到的， ImageView有一个我不想要的顶部边距。

If I change the ImageView's constraints from 如果我改变了ImageView's约束 

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

to 至 

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

(removing the bottom constraint), the result looks like this: （删除底部约束），结果如下所示：

在此输入图像描述

Now the ImageView is at the very top of my layout, but the TextView has gone. 现在， ImageView位于我的布局的最顶端，但TextView已经消失了。 Mind you, for the second variant, Android Studio 3's layout preview shows the layout exactly as I would want it: 请注意，对于第二个版本，Android Studio 3的布局预览显示了我想要的布局：

在此输入图像描述

What am I doing wrong and how can I fix it? 我做错了什么，我该如何解决？

Note: The layout needs to be ConstraintLayout and the layout's height has to be wrap_content . 注意：布局需要是ConstraintLayout ，布局的高度必须是wrap_content 。

You can find my test project here . 你可以在这里找到我的测试项目。

EDIT: The problem seems to occur only on larger devices. 编辑：问题似乎只发生在较大的设备上。 I'm using the Nexus 9 emulator. 我正在使用Nexus 9仿真器。

4 个解决方案

解决方案1
 3 已采纳  2017-11-08 12:01:05

Yes as Akash Amin said add this two line in your ImageView 是的，因为Akash Amin说你在ImageView中添加了这两行 

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

解决方案2
 0  2017-11-08 12:02:42

Try this it was helpful for you 试试这个对你有帮助 

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

在此输入图像描述

解决方案3
 0  2017-11-08 12:05:12

Try this.. 尝试这个.. 

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

Delete bootom contraint of imageview and set textview top constraint to bottom of imageview 删除imageview的bootom约束并将textview顶部约束设置为imageview的底部

解决方案4
 0  2017-11-08 12:43:15

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Constraintlayout-将textview放在imageview下方，导致意外增长 - Constraintlayout - place textview beneath imageview causing unexpected grows 在 ConstraintLayout 中将 ImageView 与 TextView 对齐 - Align ImageView with TextView in a ConstraintLayout ImageView与ConstraintLayout中的TextView重叠 - ImageView overlaps with TextView in ConstraintLayout ConstraintLayout：将 textview 的顶部与 imageview 对齐 - ConstraintLayout: align top of textview with imageview 在TextView（ConstraintLayout）的顶部添加ImageView - Add ImageView on top of TextView (ConstraintLayout) 使用 ConstraintLayout 将 ImageView 与 TextView 基线对齐 - Align ImageView to TextView baseline with ConstraintLayout 将 ImageView 放在 ConstraintLayout 中的按钮顶部 - Place ImageView on top of button in ConstraintLayout ImageView下面的TextView - TextView below ImageView 将ImageView放在TextView下面 - Placing an ImageView below a TextView 在TextView下方将TextView居中 - Center TextView below ImageView
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM