Android | 通过 layer-list 设置默认加载错误图片

背景

在需求开发中,经常会遇到需要展示图片列表的情况。然而,由于网络问题、图片链接失效等原因,某些图片可能无法正常加载。为了优化用户体验,通常会为加载失败的图片提供一个默认的占位图。

在常规的实现方式中,可能会直接使用一张默认图片来作为占位图(如果是个单色图,可以直接用一个drawable文件)。然而,如果图片列表里每个Item宽高比都是变化的时候,默认图片会因为宽高比不同而导致变形,虽然可以通过 ImageView 的 scaleType 设置 CENTER_CROP 以适应不同的图片比例不变形,但如果默认图片本身包含一个居中的小图标,在不同的宽高比下,小图标的显示效果可能会变形或错位。

问题分析

假设我们的默认错误图片是如下所示的样式(背景色 + 一个居中的错误图标):

如果我们将其合成一张完整的 PNG 图片并使用 CENTER_CROP 适配不同的 ImageView 尺寸,可能会遇到两个问题: 1. 小图标会跟随图片裁剪,可能会放大、变形,导致显示不一致。 2. 不同比例的 ImageView 会截取不同区域,导致小图标的位置和大小不可控。

为了解决这个问题,可以换一种思路,利用 layer-list 来动态组合背景和图标,从而确保小图标始终保持固定大小和居中位置。

解决方案:使用 layer-list

在 drawable 资源中,layer-list 允许我们叠加多个图层,可以将背景和图标分开定义,保证不同尺寸的 ImageView 显示时,背景始终铺满,而小图标始终居中,且不会因裁剪而变形。其中小图片的资源如下:

  • 创建 layer-list 资源文件

在 res/drawable/ 目录下创建 drawable_default_error.xml:

kotlin 复制代码
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 背景矩形 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/gray_normal" /> <!-- 设置背景颜色 -->
        </shape>
    </item>

    <!-- 居中的错误图标 -->
    <item
        android:width="60dp"
        android:height="60dp"
        android:gravity="center">
        <bitmap
            android:gravity="center"
            android:src="@drawable/chat_ask_message_error" />
    </item>
</layer-list>
  • 代码中使用 layer-list

在使用 Glide 或其他图片加载框架时,我们可以直接将 drawable_default_error.xml 作为 placeholder 和 error 资源:

kotlin 复制代码
Glide.with(activity)
    .load(url)
    .placeholder(R.drawable.drawable_default_error) // 加载中显示的占位图
    .error(R.drawable.drawable_default_error) // 加载失败时显示的默认图
    .into(imageView)

效果展示

当图片加载失败时,ImageView 会显示 drawable_default_error.xml 组合的背景 + 图标,效果如下:

相比直接使用一张完整的 PNG 图片,layer-list 方案的优点:

  • 保证背景始终填充整个 ImageView,不会因为 scaleType 而变形。
  • 小图标始终保持固定大小,居中不变形,适应不同的 ImageView 尺寸。
  • 支持动态调整背景色或小图标,无需重新制作整张图片,维护更方便。

总结

在 Android 开发中,layer-list 是一个非常实用的 Drawable 资源,它可以将多个层叠的图形、颜色、图片等组合在一起,实现复杂的视觉效果。在需要为加载失败的图片提供占位图时,使用 layer-list 可以保证背景填充、图标居中且不会变形。

相关推荐
程序员江同学1 小时前
Kotlin/Native 编译流程浅析
android·kotlin
移动开发者1号2 小时前
Kotlin协程与响应式编程深度对比
android·kotlin
花花鱼11 小时前
android studio 设置让开发更加的方便,比如可以查看变量的类型,参数的名称等等
android·ide·android studio
alexhilton12 小时前
为什么你的App总是忘记所有事情
android·kotlin·android jetpack
AirDroid_cn16 小时前
OPPO手机怎样被其他手机远程控制?两台OPPO手机如何相互远程控制?
android·windows·ios·智能手机·iphone·远程工作·远程控制
尊治16 小时前
手机电工仿真软件更新了
android
xiangzhihong818 小时前
使用Universal Links与Android App Links实现网页无缝跳转至应用
android·ios
车载应用猿19 小时前
基于Android14的CarService 启动流程分析
android
没有了遇见20 小时前
Android 渐变色实现总结
android