如何将视图(shimmer)用作imageView的占位符(Glide)

在Android开发中，使用Glide库加载图片时，可以通过设置一个shimmer效果作为ImageView的占位符，以提升用户体验。Shimmer效果是一种微妙的闪烁动画，可以让用户感知到内容正在加载中。

基础概念

Glide: 一个快速高效的Android图片加载库，用于从网络、本地文件系统或资源文件中加载图片。
Shimmer: 一种动画效果，通常表现为轻微的闪烁，用于表示内容正在加载中。

类型与应用场景

简单Shimmer: 适用于大多数基本的加载场景。
复杂Shimmer: 可以包含多个层次的闪烁效果，适用于需要更多视觉层次的应用界面。

实现步骤

以下是使用Glide结合Shimmer作为ImageView占位符的具体实现步骤：

添加依赖

首先，在项目的build.gradle文件中添加Glide和Shimmer的依赖：

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.12.0'
    implementation 'com.facebook.shimmer:shimmer:0.5.0'
}

在布局文件中添加Shimmer视图

在XML布局文件中，添加一个ShimmerFrameLayout作为ImageView的父容器：

<com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmer_view_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop" />
</com.facebook.shimmer.ShimmerFrameLayout>

初始化Shimmer并加载图片

在Activity或Fragment中，初始化Shimmer并使用Glide加载图片：

import com.bumptech.glide.Glide;
import com.facebook.shimmer.ShimmerFrameLayout;

public class MainActivity extends AppCompatActivity {
    private ShimmerFrameLayout shimmerFrameLayout;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        shimmerFrameLayout = findViewById(R.id.shimmer_view_container);
        imageView = findViewById(R.id.imageView);

        // 开始Shimmer动画
        shimmerFrameLayout.startShimmer();

        // 使用Glide加载图片
        Glide.with(this)
            .load("https://example.com/image.jpg")
            .listener(new RequestListener<Drawable>() {
                @Override
                public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                    shimmerFrameLayout.stopShimmer();
                    return false;
                }

                @Override
                public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                    shimmerFrameLayout.stopShimmer();
                    return false;
                }
            })
            .into(imageView);
    }
}