如何使用一个视图(shimmer)作为imageView(Glide)的占位符

Question

我正在使用Glide将图片加载到我的imageView上（这些imageView位于RecyclerView中）：

Glide.with(image.context).load(url)
        .error(context.getDrawable(R.drawable.placeholder))
        .into(image)

我注意到 Glide 库也有一个“占位符”功能，可以在图像仍在加载时加载 Drawable 来显示。

另一方面，对于整个 recyclerView，我正在使用Facebook Shimmer库来显示 recyclerView 正在加载的状态。

看着我的应用程序，一切都运行良好。然而，仍然存在一个时间间隔，即当 Shimmer 被消除（数据被获取）和图像被显示之间。这正是需要 Placeholder 的时候。 我想知道，是否有办法将 Shimmer 作为 imageView 的 Placeholder 使用？Glide 中的 Placeholder 功能仅支持 Drawable，而 Shimmer 是一个 View。

是否有将 Shimmer 转换为 Drawable 或 GIF 的方法？或者有其他建议吗？

- Mehdi Satei

---

我以前从未使用过 Shimmer，但是查看了那个存储库，似乎有一个名为 ShimmerDrawable 的公共组件。你尝试过使用它吗？ - Mike M.

哦，哇！那个奏效了！请发布你的答案，这样我就可以将其标记为正确答案 :D 非常感谢。 - Mehdi Satei

没问题。其实我并没有做什么。:-) 如果有的话，请随意发布自己的答案，解释你可能需要解决的任何问题。不过还是谢谢你。我很感激你的提议。很高兴它对你有用。干杯！ - Mike M.

谢谢！ :) 我已经发布了答案。感谢您的支持。 - Mehdi Satei

如何使用 ShapeableImageView 添加闪烁效果？ - Richa Shah

Answer 1

感谢Mike的上面评论： 有一个ShimmerDrawable类，您可以构建一个闪烁视图作为drawable，可用于Glide：

private val shimmer = Shimmer.AlphaHighlightBuilder()// The attributes for a ShimmerDrawable is set by this builder
    .setDuration(1800) // how long the shimmering animation takes to do one full sweep
    .setBaseAlpha(0.7f) //the alpha of the underlying children
    .setHighlightAlpha(0.6f) // the shimmer alpha amount
    .setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
    .setAutoStart(true)
    .build()

// This is the placeholder for the imageView
    val shimmerDrawable = ShimmerDrawable().apply {
        setShimmer(shimmer)
    }


Glide.with(image.context).load(url)
        .placeholder(shimmerDrawable)
        .error(context.getDrawable(R.drawable.placeholder))
        .into(image)

- Mehdi Satei

---

我如果想要制作带有圆角的可绘制对象，该怎么办呢？我没有看到任何相关方法。难道我必须要做一个自定义的可绘制对象吗？ - Aman Verma

但是可以改变阴影的颜色吗？ - Wahdat Jan

对我来说它不起作用。上面的回答中是否有我遗漏的东西？ - Akrit Khanna

对我也不起作用。我有什么遗漏吗？ - K Pradeep Kumar Reddy

@AkritKhanna 和 @K Pradeep，你们是否已经添加了 Facebook Shimmer 依赖项？ - oyeraghib

@oyeraghib 是的，我已经添加了依赖项。 - Akrit Khanna

Answer 2

在我的情况下，我想要一个带有圆角的Drawable占位符，但该库并不支持此功能。后来我发现可以使用谷歌材料设计中的 ShapeableImageView 来实现这一点。

1.将谷歌材料设计库添加到您的依赖项中，版本为1.2.1及以上：'com.google.android.material:material:1.2.1'。

2.在列表项视图中，将您的ImageView定义为ShapeableImageView，如下所示：

<com.google.android.material.imageview.ShapeableImageView
   android:id="@+id/shapeImageView"
   android:layout_width="70dp"
   android:layout_height="70dp"
   android:background="@android:color/holo_red_dark"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent"/>

3. 在 RecyclerView.ViewHolder 类中，将上面的 ShapeableImageView 的 ShapeAppearanceModel 设置为 CornerFamily.ROUNDED，并将要使用的圆角半径以像素为单位设置好，然后像下面这样将 ShimmerDrawable 作为 Glide 的占位符加载：

//initialize shimmer
val shimmer = Shimmer.ColorHighlightBuilder()
     .setBaseColor(ContextCompat.getColor(itemView.context, R.color.teal_200))
     .setBaseAlpha(0.7f)
     .setHighlightAlpha(0.7f)
     .setHighlightColor(ContextCompat.getColor(itemView.context, R.color.purple_700))
     .setDuration(1800)
     .setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
     .setAutoStart(true)
     .build()

 //create ShimmerDrawable()
 val shimmerDrawable = ShimmerDrawable()
 shimmerDrawable.setShimmer(shimmer)

 //set the ShapeAppearanceModel to CornerFamily.ROUNDED and the radius in pixels
 val radius: Float = dpToPx(itemView.context, 15).toFloat();
 shapeImageView.setShapeAppearanceModel(shapeImageView.getShapeAppearanceModel()
                .toBuilder()
                .setAllCorners(CornerFamily.ROUNDED, radius)
                .build())

 //load url from Glide and add shimmerDrawable as placeholder
 Glide.with(itemView.context).load(item.url)
        .placeholder(shimmerDrawable)
        .into(shapeImageView)

使用辅助类将半径从dp转换为像素

fun dpToPx(context: Context, dp: Int): Int {
  return (dp * context.resources.displayMetrics.density).toInt()
}

执行以上代码后的结果如下:

- MariosP

Answer 3

我开发了一个库，可以轻松添加闪烁/骨架加载效果。 https://github.com/AgnaldoNP/AGSkeletonLoading README.md中有关于如何使用的说明。 您不需要添加一堆布局来模拟骨架，它会自动计算。用于显示骨架的布局与用于显示内容的布局相同。

如果您在布局文件中使用SkeletonImageView，则只需调用startLoading()和stopLoading()来控制动画。 希望我能帮到您。

- Agnaldo Do Nascimento Pereira