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 可以保证背景填充、图标居中且不会变形。

相关推荐
柿蒂10 分钟前
Android图片批量添加处理优化:从「30」秒缩短至「4.4」秒
android·android jetpack
拓端研究室1 小时前
专题:2025医药生物行业趋势与投融资研究报告|附90+份报告PDF、原数据表汇总下载
android·开发语言·kotlin
小鱼人爱编程1 小时前
当上组长一年里,我保住了俩下属
android·前端·后端
2501_916013741 小时前
移动端 WebView 调试实战,多平台行为差异排查与统一调试流程
android·ios·小程序·https·uni-app·iphone·webview
liosen5 小时前
【安卓笔记】OOM与内存优化
android·oom·内存优化·内存分析命令·内存分析工具
猿小蔡-Cool10 小时前
Android ADB命令之内存统计与分析
android·adb
Monkey-旭10 小时前
Android Handler 完全指南
android·java·handler
從南走到北11 小时前
JAVA东郊到家按摩服务同款同城家政服务按摩私教茶艺师服务系统小程序+公众号+APP+H5
android·java·开发语言·微信小程序·小程序
alexhilton12 小时前
学会用最优雅的姿式在Compose中显示富文本
android·kotlin·android jetpack
阿华的代码王国14 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器