Android中为wrap_content的ImageView绘制图片精准边框

我之前做项目时也遇到过一模一样的问题——ImageView设了wrap_content还被上下视图限制，直接加background边框会把整个ImageView框起来，而不是精准贴合图片本身。核心原因是ImageView的测量范围包含了图片缩放后留下的空白区域，下面给你两个实用的解决思路：

最稳妥的方式是自己写一个自定义ImageView，在绘制完图片后，计算出图片实际显示的矩形区域，再在这个区域上画边框。这样不管图片怎么缩放、ImageView怎么被限制，边框都能精准跟着图片走。

自定义ImageView代码（Kotlin） #

class BorderedImageView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : AppCompatImageView(context, attrs, defStyleAttr) {

    // 可自定义边框的宽度和颜色
    private val borderPaint = Paint().apply {
        color = Color.BLACK
        style = Paint.Style.STROKE
        strokeWidth = 4f // 单位是px，也可以改成从attrs读取
        isAntiAlias = true
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas ?: return

        val drawable = drawable ?: return
        // 计算图片实际显示的矩形范围
        val imageDisplayRect = calculateImageDisplayBounds(drawable)

        // 绘制边框时要偏移一半的边框宽度，避免边框被ImageView的边缘裁剪
        val borderRect = RectF(
            imageDisplayRect.left + borderPaint.strokeWidth / 2,
            imageDisplayRect.top + borderPaint.strokeWidth / 2,
            imageDisplayRect.right - borderPaint.strokeWidth / 2,
            imageDisplayRect.bottom - borderPaint.strokeWidth / 2
        )
        canvas.drawRect(borderRect, borderPaint)
    }

    private fun calculateImageDisplayBounds(drawable: Drawable): RectF {
        val drawableWidth = drawable.intrinsicWidth.toFloat()
        val drawableHeight = drawable.intrinsicHeight.toFloat()
        val viewWidth = width.toFloat()
        val viewHeight = height.toFloat()

        // 计算图片的缩放比例（适配ImageView的大小，和fitCenter逻辑一致）
        val scale = min(viewWidth / drawableWidth, viewHeight / drawableHeight)
        val scaledImageWidth = drawableWidth * scale
        val scaledImageHeight = drawableHeight * scale

        // 计算图片居中后的上下左右坐标
        val left = (viewWidth - scaledImageWidth) / 2
        val top = (viewHeight - scaledImageHeight) / 2
        return RectF(left, top, left + scaledImageWidth, top + scaledImageHeight)
    }
}

XML中使用 #

直接替换原来的ImageView即可，记得替换成你自己的包名：

<com.your.app.package.BorderedImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/your_target_image"
    android:scaleType="fitCenter" />

如果你的scaleType是centerCrop，只需要修改calculateImageDisplayBounds里的缩放逻辑，改成取最大的缩放比例，然后裁剪超出部分即可。

如果你项目里用了Glide这类图片加载库，可以在图片加载完成后，计算出图片实际显示的尺寸，然后动态设置一个覆盖在图片上的边框View。

布局文件 #

用FrameLayout把ImageView和边框View包裹起来，边框View默认设为0dp，加载完成后再调整大小：

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/target_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter" />

    <!-- 边框View，默认隐藏，加载完成后显示并调整大小 -->
    <View
        android:id="@+id/image_border"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/border_shape"
        android:layout_gravity="center" />
</FrameLayout>

边框的shape文件（border_shape.xml） #

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="4dp"
        android:color="@android:color/black" />
    <!-- 不需要solid，保持透明 -->
</shape>

代码中用Glide加载并调整边框 #

Glide.with(this)
    .asBitmap()
    .load(R.drawable.your_target_image)
    .into(object : CustomTarget<Bitmap>() {
        override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
            target_image.setImageBitmap(resource)
            
            // 计算图片在ImageView中显示的实际尺寸
            val viewWidth = target_image.width
            val viewHeight = target_image.height
            val bitmapWidth = resource.width
            val bitmapHeight = resource.height

            val scale = min(viewWidth.toFloat() / bitmapWidth, viewHeight.toFloat() / bitmapHeight)
            val scaledWidth = (bitmapWidth * scale).toInt()
            val scaledHeight = (bitmapHeight * scale).toInt()

            // 调整边框View的大小
            image_border.layoutParams = FrameLayout.LayoutParams(scaledWidth, scaledHeight)
        }

        override fun onLoadCleared(placeholder: Drawable?) {}
    })

这两个方案都能解决你的问题，方案一更通用，不需要依赖第三方库；方案二更适合已经用了图片加载库的场景，灵活度也不错。

内容的提问来源于stack exchange，提问作者Artem Mostyaev