快捷導(dǎo)航

Android通過layer-list設(shè)置默認(rèn)加載錯(cuò)誤圖片的實(shí)現(xiàn)方案

更新時(shí)間：2025年04月27日 08:46:32 作者：_小馬快跑_

在需求開發(fā)中,經(jīng)常會(huì)遇到需要展示圖片列表的情況,然而,由于網(wǎng)絡(luò)問題、圖片鏈接失效等原因,某些圖片可能無法正常加載,為了優(yōu)化用戶體驗(yàn),通常會(huì)為加載失敗的圖片提供一個(gè)默認(rèn)的占位圖,所以本文給大家介紹了Android通過layer-list設(shè)置默認(rèn)加載錯(cuò)誤圖片的實(shí)現(xiàn)方案

背景

在需求開發(fā)中，經(jīng)常會(huì)遇到需要展示圖片列表的情況。然而，由于網(wǎng)絡(luò)問題、圖片鏈接失效等原因，某些圖片可能無法正常加載。為了優(yōu)化用戶體驗(yàn)，通常會(huì)為加載失敗的圖片提供一個(gè)默認(rèn)的占位圖。

在常規(guī)的實(shí)現(xiàn)方式中，可能會(huì)直接使用一張默認(rèn)圖片來作為占位圖（如果是個(gè)單色圖，可以直接用一個(gè)drawable文件）。然而，如果圖片列表里每個(gè)Item寬高比都是變化的時(shí)候，默認(rèn)圖片會(huì)因?yàn)閷捀弑炔煌鴮?dǎo)致變形，雖然可以通過 ImageView 的 scaleType 設(shè)置 CENTER_CROP 以適應(yīng)不同的圖片比例不變形，但如果默認(rèn)圖片本身包含一個(gè)居中的小圖標(biāo)，在不同的寬高比下，小圖標(biāo)的顯示效果可能會(huì)變形或錯(cuò)位。

問題分析

假設(shè)我們的默認(rèn)錯(cuò)誤圖片是如下所示的樣式（背景色 + 一個(gè)居中的錯(cuò)誤圖標(biāo)）：

如果我們將其合成一張完整的 PNG 圖片并使用 CENTER_CROP 適配不同的 ImageView 尺寸，可能會(huì)遇到兩個(gè)問題： 1. 小圖標(biāo)會(huì)跟隨圖片裁剪，可能會(huì)放大、變形，導(dǎo)致顯示不一致。 2. 不同比例的 ImageView 會(huì)截取不同區(qū)域，導(dǎo)致小圖標(biāo)的位置和大小不可控。

為了解決這個(gè)問題，可以換一種思路，利用 layer-list 來動(dòng)態(tài)組合背景和圖標(biāo)，從而確保小圖標(biāo)始終保持固定大小和居中位置。

解決方案：使用 layer-list

在 drawable 資源中，layer-list 允許我們疊加多個(gè)圖層，可以將背景和圖標(biāo)分開定義，保證不同尺寸的 ImageView 顯示時(shí)，背景始終鋪滿，而小圖標(biāo)始終居中，且不會(huì)因裁剪而變形。其中小圖片的資源如下：

創(chuàng)建 layer-list 資源文件

在 res/drawable/ 目錄下創(chuàng)建 drawable_default_error.xml：

<?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" /> <!-- 設(shè)置背景顏色 -->
        </shape>
    </item>

    <!-- 居中的錯(cuò)誤圖標(biāo) -->
    <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 或其他圖片加載框架時(shí)，我們可以直接將 drawable_default_error.xml 作為 placeholder 和 error 資源：

Glide.with(activity)
    .load(url)
    .placeholder(R.drawable.drawable_default_error) // 加載中顯示的占位圖
    .error(R.drawable.drawable_default_error) // 加載失敗時(shí)顯示的默認(rèn)圖
    .into(imageView)

效果展示

當(dāng)圖片加載失敗時(shí)，ImageView 會(huì)顯示 drawable_default_error.xml 組合的背景 + 圖標(biāo)，效果如下：

相比直接使用一張完整的 PNG 圖片，layer-list 方案的優(yōu)點(diǎn)：

保證背景始終填充整個(gè) ImageView，不會(huì)因?yàn)?scaleType 而變形。
小圖標(biāo)始終保持固定大小，居中不變形，適應(yīng)不同的 ImageView 尺寸。
支持動(dòng)態(tài)調(diào)整背景色或小圖標(biāo)，無需重新制作整張圖片，維護(hù)更方便。

總結(jié)

在 Android 開發(fā)中，layer-list 是一個(gè)非常實(shí)用的 Drawable 資源，它可以將多個(gè)層疊的圖形、顏色、圖片等組合在一起，實(shí)現(xiàn)復(fù)雜的視覺效果。在需要為加載失敗的圖片提供占位圖時(shí)，使用 layer-list 可以保證背景填充、圖標(biāo)居中且不會(huì)變形。

以上就是Android通過layer-list設(shè)置默認(rèn)加載錯(cuò)誤圖片的實(shí)現(xiàn)方案的詳細(xì)內(nèi)容，更多關(guān)于Android layer-list默認(rèn)加載錯(cuò)誤圖片的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: