原文链接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)加载的图片目标位置
==记得添加网络权限否则图片无法加载成功==
