Glide-使用动态图作为正在加载占位图

最新推荐文章于 2024-04-06 14:08:05 发布

江湖之笑

最新推荐文章于 2024-04-06 14:08:05 发布

阅读量6k

点赞数 3

分类专栏： Android_基础

Android_基础专栏收录该内容

68 篇文章

订阅专栏

本文介绍了一个使用Android实现的带有旋转动画效果的图片加载案例。通过XML定义旋转动画，并结合Glide进行图片加载，同时实现了加载过程中的动画效果及错误处理。

完整的例子

布局

ImageView

<ImageView
    android:id="@+id/iv_main"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentBottom="true"
    android:scaleType="fitXY"
    />

创建一个 drawable

R.drawable.rotate_pro

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/group_1"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360"/>

Activity 中代码

ImageView img = (ImageView) findViewById(R.id.iv_main);

final ObjectAnimator anim = ObjectAnimator.ofInt(img, "ImageLevel", 0, MAX_LEVEL);
anim.setDuration(800);
anim.setRepeatCount(ObjectAnimator.INFINITE);
anim.start();

Glide.with(this)
        .load(path)
        .placeholder(R.drawable.rotate_pro)
        .crossFade()
        .listener(new RequestListener<String, GlideDrawable>() {
            @Override
            public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                anim.cancel();
                Log.d(TAG, "onException: ");
                return false;
            }

            @Override
            public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                anim.cancel();
                Log.d(TAG, "onResourceReady: ");
                return false;
            }
        })
        .into(img);

最终效果：

占位图

水平loading动画

替换上面使用的 drawable 即可

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/rectangle"
            >

        </clip>
    </item>

</layer-list>

效果：

占位图

点击打开链接