在Android中实现圆角图像加载时的闪光效果
在开发Android应用时，我们经常需要在图片加载之前提供一个占位符来改善用户体验。特别是在使用ShapeableImageView时，实现圆角图片加载是一个常见的需求。然而，当我们试图为其添加闪光效果（shimmer）作为占位符时，可能会遇到一些问题。本文将详细介绍如何在ShapeableImageView中实现圆角图片加载的闪光效果，并解决常见的问题。
问题背景
假设我们有如下的XML布局代码：
<com.google.android.material.imageview.ShapeableImageViewandroid:id="@+id/style_img"android:layout_width="match_parent"android:layout_height="match_parent"android:adjustViewBounds="true"android:contentDescription="@string/rapturous"android:scaleType="centerCrop"app:shapeAppearanceOverlay="@style/roundedCornersImageView"/>这里我们使用了ShapeableImageView来展示图片，并设置了圆角效果。接下来，我们尝试为其添加闪光效果：
valshimmer=Shimmer.AlphaHighlightBuilder().setDuration(1800).setBaseAlpha(0.7f).setHighlightAlpha(0.6f).setDirection(Shimmer.Direction.LEFT_TO_RIGHT).setAutoStart(true).build()valshimmerDrawable=ShimmerDrawable().apply{setShimmer(shimmer)}Glide.with(context).load(imageUrl).placeholder(shimmerDrawable).into(style_img)然而，这个方法在ShapeableImageView上不起作用，图片加载前只显示一个空白视图。
解决方案
方法一：使用普通ImageView加CardView
当直接使用ShapeableImageView时，shapeAppearanceOverlay可能会影响到占位符的显示效果。一个可行的替代方案是使用普通的ImageView并将其嵌套在MaterialCardView中：
<com.google.android.material.card.MaterialCardViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:strokeWidth="0dp"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"tools:src="@tools:sample/avatars"/></com.google.android.material.card.MaterialCardView>这样，我们可以利用MaterialCardView来设置圆角，并通过strokeWidth来控制是否需要边框。
方法二：自定义占位符Drawable
另一种方法是自定义一个Drawable来模拟圆角闪光效果：
classRoundedShimmerDrawable:Drawable(){privatevalpaint=Paint(Paint.ANTI_ALIAS_FLAG)privatevalrect=RectF()privatevalpath=Path()overridefundraw(canvas:Canvas){rect.set(bounds)path.reset()path.addRoundRect(rect,16f,16f,Path.Direction.CW)canvas.clipPath(path)// 设置闪光效果valshimmerDrawable=ShimmerDrawable().apply{setShimmer(Shimmer.AlphaHighlightBuilder().build())}shimmerDrawable.draw(canvas)}// 实现其他必要的方法...}// 使用valroundedShimmerDrawable=RoundedShimmerDrawable()Glide.with(context).load(imageUrl).placeholder(roundedShimmerDrawable).into(style_img)实例演示
下面是一个完整的实例，展示了如何使用MaterialCardView实现圆角闪光效果：
<com.google.android.material.card.MaterialCardViewandroid:id="@+id/cardView"android:layout_width="match_parent"android:layout_height="match_parent"app:cardCornerRadius="16dp"app:strokeWidth="0dp"><ImageViewandroid:id="@+id/imageView"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"tools:srcCompat="@tools:sample/avatars"/></com.google.android.material.card.MaterialCardView>valcardView=findViewById<MaterialCardView>(R.id.cardView)valimageView=cardView.findViewById<ImageView>(R.id.imageView)valshimmer=Shimmer.AlphaHighlightBuilder().build()valshimmerDrawable=ShimmerDrawable().apply{setShimmer(shimmer)}Glide.with(this).load("your_image_url").placeholder(shimmerDrawable).into(imageView)通过上述方法，我们可以成功在Android应用中实现圆角图像加载时的闪光效果，提供一个更好的用户体验。