如何在 Android 中设置背景图像并将该图像适合整个卡片以用于卡片视图？

Posted 2023-04-18

【中文标题】如何在 Android 中设置背景图像并将该图像适合整个卡片以用于卡片视图？

【英文标题】：How set background image and fit that image entire card for card view in Android?

【发布时间】：2020-10-19 05:43:36

【问题描述】：

在这里，我试图将整个图像作为卡片视图的背景。但它需要一些空间，如图所示。我尝试了android:scaleType="centerCrop" 和fitXY 以及其他人，但它没有响应。在附图中，紫色代表占用的空白空间。我需要空间需要被背景图像占据。这是我的代码。

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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_
    android:layout_
    app:cardBackgroundColor="@color/voilet">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_>

        <ImageView
            android:id="@+id/application_ads_image"
            android:layout_
            android:layout_
            android:scaleType="centerInside"
            android:src="@drawable/app_ads_background"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="1.0" />

        <Button
            android:id="@+id/application_ads_install_button"
            android:layout_
            android:layout_
            android:layout_marginEnd="48dp"
            android:background="@color/voilet"
            android:text="@string/application_ads_install"
            android:textColor="@color/white"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/application_ads_image"
            app:layout_constraintTop_toTopOf="@+id/application_ads_image"
            app:layout_constraintVertical_bias="0.674" />

        <TextView
            android:id="@+id/application_ads_review"
            android:layout_
            android:layout_
            android:text="@string/application_ads_review"
            android:textColor="@color/white"
            app:layout_constraintBottom_toBottomOf="@+id/application_ads_image"
            app:layout_constraintEnd_toStartOf="@+id/application_ads_install_button"
            app:layout_constraintHorizontal_bias="0.27"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/application_ads_name"
            app:layout_constraintVertical_bias="0.567" />

        <TextView
            android:id="@+id/application_ads_name"
            android:layout_
            android:layout_
            android:layout_marginTop="40dp"
            android:text="Zira"
            android:textColor="@color/white"
            app:layout_constraintEnd_toEndOf="@+id/application_ads_image"
            app:layout_constraintHorizontal_bias="0.176"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

This is Image of my output as per my code

【问题讨论】：

你可以用android:background="@drawable/app_ads_background"设置cardview背景图片

感谢您的回复。图片不能设置为卡片视图的背景图片。即使我按照您所说的进行了更改，但它不起作用。

【参考方案1】：

在ConstraintLayout，如果你想让宽度和高度适合父母，有两种选择。

1.在layout_constraint attrs内，需要在layout_width和layout_height上设置0dp

<ImageView
        android:id="@+id/application_ads_image"
        android:layout_
        android:layout_
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

2.如果设置match_parent，则不需要设置layout_constraint。如果设置，效果就像wrap_content

<ImageView
        android:id="@+id/application_ads_image"
        android:layout_
        android:layout_
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher"/>

---

更新

我给你写了一个样本，你可以这样查看结果

<androidx.cardview.widget.CardView 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_
    android:layout_
    app:cardBackgroundColor="@color/voilet">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_>

        <ImageView
            android:id="@+id/application_ads_image"
            android:layout_
            android:layout_
            android:src="@drawable/app_ads_background"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <Button
            android:id="@+id/application_ads_install_button"
            android:layout_
            android:layout_
            android:layout_margin="4dp"
            android:background="@color/voilet"
            android:text="INSTALL"
            android:textColor="#FFF"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <TextView
            android:id="@+id/application_ads_review"
            android:layout_
            android:layout_
            android:layout_marginBottom="4dp"
            android:layout_marginStart="16dp"
            android:text="5/5"
            android:textColor="#FFF"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <TextView
            android:id="@+id/application_ads_name"
            android:layout_
            android:layout_
            android:layout_margin="4dp"
            android:text="Zira"
            android:textColor="#FFF"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

【讨论】：

感谢您的回复，您能解释一下吗？解释有点混乱。

在ConstraintLayout，如果你想要一个宽度（或高度）wrap_content的视图，你需要用layout_constraint约束位置，或者如果用@987654337 @，你不需要约束任何东西。这些功能依赖于ConstraintLayout

仅供参考，我通常添加layout_constraintStart & layout_constraintEnd 并将0dp 设置为layout_width 以水平匹配父级。

谢谢回复，layout_constraintStart和layout_constraintEnd要加什么值？

对不起，layout_constraintStart/End 不是真正的属性，它只是缩短，表示 StartToStartOf、StartToEndOf、EndToStartOf、EndToEndOf .. 等，我们约束的值是 parent

【参考方案2】：

我尝试使用带有 ImageView fitXY 或矩阵 scaleType 的本地资源可绘制图像来处理您的布局文件，ImageView 图片完全适合卡片视图。类似于以下内容

<ImageView
        android:id="@+id/application_ads_image"
        android:layout_
        android:layout_
        android:scaleType="fitXY"
        android:src="@drawable/a1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />

a1 是我的本地可绘制图像文件，@drawable/a1。 如果您仍然有问题，我建议您检查图像/图标尺寸或检查您使用此布局卡的父视图。