Android 修炼系列（25）：巧解 ImageView 绘制圆角与 CENTER_CROP 冲突
2023-09-11 15:31:53
如何在 Android ImageView 中巧妙应对圆角与 CENTER_CROP 冲突
ImageView 是 Android 开发中一个无处不在的控件，它承载着丰富的图像展示需求。为了提升用户体验，我们经常需要对 ImageView 的显示效果进行个性化定制，比如绘制圆角或裁剪缩放。
但当我们同时为 ImageView 设置圆角和 CENTER_CROP 效果时，可能会遇到一个意想不到的冲突问题。这篇文章将深入剖析这个问题，并提供一个巧妙的解决方案，帮助你轻松应对这一难题。
问题：圆角消失，取而代之的是裁剪后的矩形
当 ImageView 同时设置圆角和 CENTER_CROP 效果后，你可能会发现圆角无法正常显示，取而代之的是裁剪后的矩形图像。这种现象在 ImageView 的 scaleType 设置为 CENTER_CROP 时尤为明显。
根源：绘制顺序的冲突
要理解这个问题，我们需要了解 ImageView 的绘制过程。当 ImageView 加载一张 Bitmap 时，它会先对 Bitmap 进行缩放，然后裁剪或填充到 ImageView 的显示区域。而当 ImageView 同时设置圆角和 CENTER_CROP 效果时，问题就出现了：
- 圆角绘制优先级更高： 在 ImageView 的绘制流程中，圆角绘制会先于 CENTER_CROP 进行。因此，如果 Bitmap 已经经过圆角处理，则后续的 CENTER_CROP 操作便无法对其进行裁剪或填充，导致圆角无法正常显示。
巧妙的解决方案
针对上述问题，我们可以采用以下巧妙的解决方案：
-
使用自定义 View 绘制圆角： 我们可以创建一个自定义 View，继承自 ImageView，并重写其 onDraw() 方法。在 onDraw() 方法中，我们可以先使用 PorterDuffXfermode 将 Bitmap 绘制成圆角，然后再进行 CENTER_CROP 裁剪。这样一来，圆角绘制和 CENTER_CROP 裁剪便不会相互冲突。
-
利用第三方库： Android 社区提供了丰富的第三方库，可以简化我们自定义 View 的工作。例如，我们可以使用 Glide 库来加载和显示图像，Glide 提供了内置的圆角处理和 CENTER_CROP 裁剪功能，我们可以轻松通过 API 调用来实现圆角效果与 CENTER_CROP 效果的共存。
代码示例
自定义 View 绘制圆角：
public class RoundedImageView extends ImageView {
private float radius = 10.0f;
private PorterDuffXfermode xfermode = new PorterDuffXfermode(Mode.SRC_IN);
@Override
protected void onDraw(Canvas canvas) {
Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
Canvas bitmapCanvas = new Canvas(bitmap);
bitmapCanvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()), radius, radius, paint);
canvas.drawBitmap(bitmap, 0, 0, xfermode);
super.onDraw(canvas);
}
}
利用 Glide 加载圆角图像：
Glide.with(context)
.load(imageUrl)
.transform(new RoundedCornersTransformation(10, 0, RoundedCornersTransformation.CornerType.ALL))
.into(imageView);
结语
通过深入剖析 ImageView 绘制圆角与 CENTER_CROP 冲突问题，我们掌握了巧妙的解决方案。无论是使用自定义 View 还是第三方库，都可以轻松实现圆角效果与 CENTER_CROP 效果的共存。希望本文能为广大 Android 开发者提供有价值的帮助，提升开发效率和用户体验。
常见问题解答
-
为什么圆角绘制的优先级会高于 CENTER_CROP？
答：这是 ImageView 绘制过程的既定顺序，圆角绘制在 CENTER_CROP 裁剪之前进行。 -
除了提供的解决方案，还有其他方法可以解决这个问题吗？
答：可以，但可能会更复杂或效率更低。一种方法是使用 FrameLayout 将圆角 View 和 ImageView 重叠，但这样可能会影响性能。 -
第三方库是否比自定义 View 更好？
答：这取决于具体情况。第三方库提供了便捷性，但自定义 View 提供了更大的灵活性。 -
在实际项目中，我该选择哪种解决方案？
答：如果需要高度定制或性能至关重要，则建议使用自定义 View。如果只需要基本的圆角处理，则第三方库是一个不错的选择。 -
是否存在其他潜在问题需要考虑？
答：当使用圆角时，可能会出现抗锯齿问题，尤其是在低分辨率图像上。建议使用高分辨率图像或应用抗锯齿技术来解决此问题。
