Android通過(guò)layer-list設(shè)置默認(rèn)加載錯(cuò)誤圖片的實(shí)現(xiàn)方案
背景
在需求開(kāi)發(fā)中,經(jīng)常會(huì)遇到需要展示圖片列表的情況。然而,由于網(wǎng)絡(luò)問(wèn)題、圖片鏈接失效等原因,某些圖片可能無(wú)法正常加載。為了優(yōu)化用戶(hù)體驗(yàn),通常會(huì)為加載失敗的圖片提供一個(gè)默認(rèn)的占位圖。
在常規(guī)的實(shí)現(xiàn)方式中,可能會(huì)直接使用一張默認(rèn)圖片來(lái)作為占位圖(如果是個(gè)單色 圖,可以直接用一個(gè)drawable文件)。然而,如果圖片列表里每個(gè)Item寬高比都是變化的時(shí)候,默認(rèn)圖片會(huì)因?yàn)閷捀弑炔煌鴮?dǎo)致變形,雖然可以通過(guò) ImageView 的 scaleType 設(shè)置 CENTER_CROP 以適應(yīng)不同的圖片比例不變形,但如果默認(rèn)圖片本身包含一個(gè)居中的小圖標(biāo),在不同的寬高比下,小圖標(biāo)的顯示效果可能會(huì)變形或錯(cuò)位。
問(wèn)題分析
假設(shè)我們的默認(rèn)錯(cuò)誤圖片是如下所示的樣式(背景色 + 一個(gè)居中的錯(cuò)誤圖標(biāo)):
如果我們將其合成一張完整的 PNG 圖片并使用 CENTER_CROP 適配不同的 ImageView 尺寸,可能會(huì)遇到兩個(gè)問(wèn)題: 1. 小圖標(biāo)會(huì)跟隨圖片裁剪,可能會(huì)放大、變形,導(dǎo)致顯示不一致。 2. 不同比例的 ImageView 會(huì)截取不同區(qū)域,導(dǎo)致小圖標(biāo)的位置和大小不可控。
為了解決這個(gè)問(wèn)題,可以換一種思路,利用 layer-list 來(lái)動(dòng)態(tài)組合背景和圖標(biāo),從而確保小圖標(biāo)始終保持固定大小和居中位置。
解決方案:使用 layer-list
在 drawable 資源中,layer-list 允許我們疊加多個(gè)圖層,可以將背景和圖標(biāo)分開(kāi)定義,保證不同尺寸的 ImageView 顯示時(shí),背景始終鋪滿(mǎn),而小圖標(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),無(wú)需重新制作整張圖片,維護(hù)更方便。
總結(jié)
在 Android 開(kāi)發(fā)中,layer-list 是一個(gè)非常實(shí)用的 Drawable 資源,它可以將多個(gè)層疊的圖形、顏色、圖片等組合在一起,實(shí)現(xiàn)復(fù)雜的視覺(jué)效果。在需要為加載失敗的圖片提供占位圖時(shí),使用 layer-list 可以保證背景填充、圖標(biāo)居中且不會(huì)變形。
以上就是Android通過(guò)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)文章!
相關(guān)文章
簡(jiǎn)單實(shí)現(xiàn)Android滾動(dòng)公告欄
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)Android滾動(dòng)公告欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01WebView 實(shí)現(xiàn)全屏播放視頻的示例代碼
這篇文章主要介紹了WebView 實(shí)現(xiàn)全屏播放視頻的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Android通過(guò)SharedPreferences實(shí)現(xiàn)自動(dòng)登錄記住用戶(hù)名和密碼功能
最近使用SharedPreferences實(shí)現(xiàn)了一個(gè)android自動(dòng)登錄功能,特此分享到腳本之家平臺(tái)供大家參考2017-07-07Android實(shí)現(xiàn)自動(dòng)輪詢(xún)的RecycleView
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)自動(dòng)輪詢(xún)的RecycleView,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10