ConstraintLayout中的ImageView不起作用 [英] ImageView inside ConstraintLayout does not work

问题描述

我对ImageView的正确显示有疑问.我想在ConstraintLayout中显示ImageView.在预览时，它看起来完全符合我的需要，但是当我在设备上启动它时，它看起来完全是脏东西.此布局位于回收视图中.此代码有什么问题?

I have a problem with correct display of ImageView. I want to display ImageView inside ConstraintLayout. On preview it looks exactly as i need, but when i'm starting it on device it looks completly dirrerent. This layout is places inside recycle view. What is wrong with this code?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/promotionRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10dp"
android:background="#fff"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<android.support.constraint.ConstraintLayout
    android:id="@+id/promotionImageLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintHeight_default="spread"
    android:background="@color/colorPrimary">
    <ImageView
        android:id="@+id/promotionImageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_start_promotion"
        android:background="@mipmap/ic_start_promotion"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHeight_min="150dp" />
    <ImageView
        android:id="@+id/fadeGradientImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:background="@drawable/fade_image_background" />
    <TextView
        android:text="Sample title"
        android:textSize="16sp"
        android:textStyle="bold"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="6dp"
        android:textColor="#ffffff"
        android:id="@+id/promotionNameTextView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:paddingBottom="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>
<TextView
    android:id="@+id/promotionDescriptionTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="13sp"
    android:layout_marginTop="12dp"
    android:layout_marginStart="12dp"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    android:layout_marginEnd="12dp"
    android:layout_marginBottom="12dp"
    android:text="Sampe description" />
</LinearLayout>

深入的解释:

我想为RecycleView创建行.每行必须包含图像，标题和描述.标题必须在图片的左下角.说明必须在图片下方.之后，我必须将渐变色(底部的黑色)放入图像中.屏幕上恰好是我需要的预览".

I want to create row for RecycleView. Each row have to contains image, title and description. Title have to be in the left bottom corner of the image. Description have to be below the image. After that i have to put gradient (black in the bottom) into the image. Screen with "Preview" is exactly what i need.

具有这种布局的所有内容都可以.它按预期方式工作，我忘记了对kotlin代码进行了一些更改.很抱歉.

推荐答案

首先，每个视图都应应用其父 ViewGroup 的属性规则.ConstraintLayout不支持 match_parent .它支持 0dp 值，这意味着匹配约束".这样，视图将扩展为填充约束边界空间.

First things first, every view should apply the attribute rules of its parent ViewGroup. ConstraintLayout doesn't support match_parent. It supports the 0dp value which means "match constraint". This way the view will expand to fill the constraint bounded space.

接下来，创建ConstraintLayout以实现平面视图层次结构，以获得更好的布局性能.因此，切勿将其嵌套在LinearLayout内，因为它具有链功能以更灵活的方式获得相同的行为.另外，您可以在顶层使用ConstraintLayout来实现该结构.

Next, ConstraintLayout was created to achieve a flat view hierarchy for better layout performance. So, never nest it inside a LinearLayout as it has the chains feature to get the same behavior in a more flexible way. Plus, you can achieve the structure with a ConstraintLayout at the top level .

另一件事，如果要在所有方向上定义相同的边距，则可以使用 layout_margin .

Another thing, If you are going to define the same margin in all directions, you can just use layout_margin.

最后，您遇到了透支的问题.ConstraintLayout具有足够的灵活性，可以让我们将视图定位为背景，并帮助我们避免背景重叠.

Finally, you have overdraw problems. ConstraintLayout is flexible enough to allow us to position views as backgrounds and help us avoid overlapped backgrounds.

这是一个解决方案:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/promotionRow"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp">

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="@+id/promotion_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/promotion_image"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_start_promotion"
        app:layout_constraintHeight_min="150dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/shadow"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:adjustViewBounds="true"
        android:background="@drawable/fade_image_background"
        app:layout_constraintBottom_toBottomOf="@+id/promotion_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/promotion_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Sample title"
        android:textColor="@android:color/white"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/promotion_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/description"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:padding="12dp"
        android:text="Sampe description"
        android:textSize="13sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/promotion_image" />

</android.support.constraint.ConstraintLayout>

尝试一下.希望这会有所帮助！

Try it. Hope this helps!

这篇关于ConstraintLayout中的ImageView不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！