Android 图片占位符 ShimmerLayout 以及 加载图片 Glide 的实现

原文链接https://www.shanya.world/archives/42e833b9.html

==记得添加网络权限否则图片无法加载成功==

添加依赖

implementation 'com.github.bumptech.glide:glide:4.10.0'
implementation 'io.supercharge:shimmerlayout:2.1.0'

准备一张图片上传至Github方便演示

图片链接
https://github.com/Shanyaliux/ShimmerDemo/raw/master/image/timg.jpg

搭建界面

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <io.supercharge.shimmerlayout.ShimmerLayout
        android:id="@+id/shimmerLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:cropToPadding="true"
            tools:srcCompat="@tools:sample/avatars" />

    </io.supercharge.shimmerlayout.ShimmerLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

效果图

在这里插入图片描述

MainActivity 代码

package com.shanya.shimmerdemo

import android.graphics.drawable.Drawable
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.bumptech.glide.Glide
import com.bumptech.glide.load.DataSource
import com.bumptech.glide.load.engine.GlideException
import com.bumptech.glide.request.Request
import com.bumptech.glide.request.RequestListener
import com.bumptech.glide.request.target.Target
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        shimmerLayout.apply {
            setShimmerColor(0x55FFFFFF)
            setShimmerAngle(0)
            startShimmerAnimation()
        }

        Glide.with(this)
            .load("https://github.com/Shanyaliux/ShimmerDemo/raw/master/image/timg.jpg")
            .placeholder(R.drawable.ic_insert_photo_gray_24dp)
            .listener(object :RequestListener<Drawable>{
                override fun onLoadFailed(
                    e: GlideException?,
                    model: Any?,
                    target: Target<Drawable>?,
                    isFirstResource: Boolean
                ): Boolean {
                    return false
                }

                override fun onResourceReady(
                    resource: Drawable?,
                    model: Any?,
                    target: Target<Drawable>?,
                    dataSource: DataSource?,
                    isFirstResource: Boolean
                ): Boolean {
                    return false.also { shimmerLayout?.stopShimmerAnimation() }
                }

            })
            .into(imageView)
    }
}

shimmerLayout.apply里面的

• setShimmerColor(0x55FFFFFF) 是设置占位符透明度颜色
• setShimmerAngle(0) 设置闪动角度
• startShimmerAnimation() 开始闪动

Glide这里

• load("....") 图片地址
• placeholder(R.drawable.ic_insert_photo_gray_24dp) 占位图的底图
• listener(object :RequestListener<Drawable>{...} 设置监听 注意两个都是return false 但是onResourceReady里面要添加停止闪动的代码return false.also { shimmerLayout?.stopShimmerAnimation()（这里判空是防止图片未加载就切换页面导致崩溃）
• .into(imageView) 加载的图片目标位置

==记得添加网络权限否则图片无法加载成功==

源码地址：Github && CSDN