Glide placeholder add loading effect

Time:2022-5-16

There is a demand in the recent project. When loading the network picture, when the picture is not displayed, the placeholder is displayed. The placeholder is an arc and rotates continuously. After the picture is loaded, the placeholder disappears.

Glide placeholder add loading effect

loading.gif

As we all know, glide supports the placeholder function when loading pictures. The placeholder is the drawable displayed when the request is being executed. When the request is successfully completed, the placeholder will be replaced by the requested resource.

Glide.with(this).load(url).placeholder(placeholder).into(imageView)

perhaps

Glide.with(this).load(url).placeholder(placeholderDrawable).into(imageView)

Let’s start. First realize the static placeholder, and then realize the loading effect. The picture resources used are as follows:

Glide placeholder add loading effect

icon_place_holder.png
1 2 3 4 5
Glide placeholder add loading effect

loading_01.png
Glide placeholder add loading effect

loading_02.png
Glide placeholder add loading effect

loading_03.png
Glide placeholder add loading effect

loading_04.png
Glide placeholder add loading effect

loading_05.png
Glide placeholder add loading effect

loading_06.png
Glide placeholder add loading effect

loading_07.png
Glide placeholder add loading effect

loading_08.png
Glide placeholder add loading effect

loading_09.png
Glide placeholder add loading effect

loading_10.png
Glide placeholder add loading effect

loading_11.png
Glide placeholder add loading effect

loading_12.png
Glide placeholder add loading effect

loading_13.png
Glide placeholder add loading effect

loading_14.png
Glide placeholder add loading effect

loading_15.png
Glide placeholder add loading effect

loading_16.png
Glide placeholder add loading effect

loading_17.png
Glide placeholder add loading effect

loading_18.png
Glide placeholder add loading effect

loading_19.png
Glide placeholder add loading effect

loading_20.png
Glide placeholder add loading effect

loading_21.png
Glide placeholder add loading effect

loading_22.png
Glide placeholder add loading effect

loading_23.png
Glide placeholder add loading effect

loading_24.png
Glide placeholder add loading effect

loading_25.png

Implement static placeholders

staydrawableDefined under folderplace_holder.xml, as follows:

<?xml version="1.0" encoding="utf-8"?>
<layer-list  xmlns:android="http://schemas.android.com/apk/res/android">

    <item >
      <shape>
          <size android:width="500dp" android:height="500dp" />
          <solid android:color="#f7f8f9" />
      </shape>
    </item>

    <item>
        <bitmap
            android:src="@mipmap/icon_place_holder"
            android:gravity="center"
            android:tileMode="disabled"
            />
    </item>
   
</layer-list>

Use placeholder resources when loading pictures:

Glide.with(this).load("http://image.huajiao.com/943063fe44aa1bcc4ece46ccbf358af8.jpg").placeholder(R.drawable.place_holder).into(imageView)
Glide placeholder add loading effect

Static placeholder png

Achieve placeholder loading effect

Modify itplace_holder.xml, inlayer-listAdd one under nodeitem, hereitemAdd aanimation-list, namedplace_holder_animation.xml, as follows:

<?xml version="1.0" encoding="utf-8"?>
<layer-list  xmlns:android="http://schemas.android.com/apk/res/android">

    <item >
        <shape>
            <size android:width="500dp" android:height="500dp" />
            <solid android:color="#f7f8f9" />
        </shape>
    </item>

    <item android:gravity="center" android:id="@+id/layer_animation">
        <animation-list android:oneshot="false" >
            <item android:duration="40" android:drawable="@mipmap/loading_01" />
            <item android:duration="40" android:drawable="@mipmap/loading_02" />
            <item android:duration="40" android:drawable="@mipmap/loading_03" />
            <item android:duration="40" android:drawable="@mipmap/loading_04" />
            <item android:duration="40" android:drawable="@mipmap/loading_05" />
            <item android:duration="40" android:drawable="@mipmap/loading_06" />
            <item android:duration="40" android:drawable="@mipmap/loading_07" />
            <item android:duration="40" android:drawable="@mipmap/loading_08" />
            <item android:duration="40" android:drawable="@mipmap/loading_09" />
            <item android:duration="40" android:drawable="@mipmap/loading_10" />
            <item android:duration="40" android:drawable="@mipmap/loading_11" />
            <item android:duration="40" android:drawable="@mipmap/loading_12" />
            <item android:duration="40" android:drawable="@mipmap/loading_13" />
            <item android:duration="40" android:drawable="@mipmap/loading_14" />
            <item android:duration="40" android:drawable="@mipmap/loading_15" />
            <item android:duration="40" android:drawable="@mipmap/loading_16" />
            <item android:duration="40" android:drawable="@mipmap/loading_17" />
            <item android:duration="40" android:drawable="@mipmap/loading_18" />
            <item android:duration="40" android:drawable="@mipmap/loading_19" />
            <item android:duration="40" android:drawable="@mipmap/loading_20" />
            <item android:duration="40" android:drawable="@mipmap/loading_21" />
            <item android:duration="40" android:drawable="@mipmap/loading_22" />
            <item android:duration="40" android:drawable="@mipmap/loading_23" />
            <item android:duration="40" android:drawable="@mipmap/loading_24" />
            <item android:duration="40" android:drawable="@mipmap/loading_25" />
        </animation-list>
    </item>

</layer-list>

Then use the placeholder resource when loading the picture:

Glide.with(this).load("http://image.huajiao.com/943063fe44aa1bcc4ece46ccbf358af8.jpg").placeholder(R.drawable.place_holder_animation).into(imageView)

After running, I found that the placeholder has no loading animation effect and the arc has no rotation, that is, the frame sequence defined in XML has not been animated. It’s too difficult for me. In that case,Load the placeholder resource in the code, find the animation sequence, start the animation, and then stop the animation after the picture resource is loaded successfully。 Add an extension method of ImageView. The code is as follows:

/**
 *Load picture, placeholder with loading animation effect
 */
fun ImageView.loadWithAnimation(
    context: Context,
    url: String,
    listener: RequestListener<Drawable>? = null
) {

    val placeHolderDrawable = ContextCompat.getDrawable(context, R.drawable.place_holder_animation)
    var animationDrawable: Drawable? = null
    if (placeHolderDrawable is LayerDrawable) {
        animationDrawable = placeHolderDrawable.findDrawableByLayerId(R.id.layer_animation)
        if (animationDrawable is AnimationDrawable) {
            animationDrawable.start()
        }
    }
    val callback = object : RequestListener<Drawable> {
        override fun onLoadFailed(
            e: GlideException?,
            model: Any,
            target: Target<Drawable>,
            isFirstResource: Boolean
        ): Boolean {
            listener?.onLoadFailed(e, model, target, isFirstResource)
            return false
        }

        override fun onResourceReady(
            resource: Drawable,
            model: Any,
            target: Target<Drawable>,
            dataSource: DataSource?,
            isFirstResource: Boolean
        ): Boolean {
            listener?.onResourceReady(resource, model, target, dataSource, isFirstResource)
            if (animationDrawable is AnimationDrawable) {
                if (animationDrawable.isRunning) {
                    animationDrawable.stop()
                }
            }
            return false
        }
    }
    Glide.with(context).load(url).placeholder(placeHolderDrawable).listener(callback).into(this)
}

Then call the following code when loading the picture:

imageView.loadWithAnimation(this,"http://image.huajiao.com/943063fe44aa1bcc4ece46ccbf358af811.jpg")

After running, the arc will move, which realizes the glide placeholder loading effect.

Code address

https://github.com/kongpf8848/AndroidWorld

Recommended Today

JS generate guid method

JS generate guid method https://blog.csdn.net/Alive_tree/article/details/87942348 Globally unique identification(GUID) is an algorithm generatedBinaryCount Reg128 bitsNumber ofidentifier , GUID is mainly used in networks or systems with multiple nodes and computers. Ideally, any computational geometry computer cluster will not generate two identical guids, and the total number of guids is2^128In theory, it is difficult to make two […]