如何让ImageButton上的Bitmap均匀拉伸且保持棋盘格为正方形？

嘿，这个问题我太熟了！你现在遇到的棋盘格变形，核心原因是把Bitmap设成了ImageButton的background——background属性的图片会被强制拉伸填满整个控件的宽高，完全忽略原图的比例，所以正方形棋盘格就被拉扁/拉长了。下面给你几个靠谱的解决方案，按需选就行：

方案1：改用src属性+scaleType（最直接） #

把布局里的android:background改成android:src，再加上scaleType属性控制图片缩放方式，就能完美保持图片比例：

修改后的布局代码： #

<ImageButton 
    android:id="@+id/imageButton" 
    android:layout_width="match_parent" 
    android:layout_height="80dp" 
    android:onClick="@{() -> viewModel.onButtonClick()}" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    android:src="@{viewModel.thumbnail}"
    android:scaleType="fitCenter" />

几种常用scaleType的区别： #

• fitCenter：按比例缩放图片，让图片完整显示在按钮内，按钮可能会出现空白区域（如果原图比例和按钮比例不一致）
• centerCrop：按比例缩放图片，填满整个按钮，超出部分被裁剪，适合需要填满控件且保持比例的场景
• centerInside：如果原图比按钮小，就居中显示不缩放；如果原图比按钮大，就按比例缩小到能完整显示
• 别用fitXY：这会强制拉伸图片填满控件，就是你现在遇到的变形情况

方案2：动态调整按钮高度，匹配图片比例 #

如果不想有空白也不想裁剪，希望按钮高度自动适配图片比例，可以在代码里动态计算并设置高度：

Kotlin代码示例（在Activity/Fragment中）： #

viewModel.thumbnail.observe(this) { bitmap ->
    bitmap?.let {
        // 计算图片宽高比
        val aspectRatio = it.width.toFloat() / it.height.toFloat()
        // 获取按钮当前宽度（需确保宽度已测量完成）
        val buttonWidth = imageButton.width
        if (buttonWidth > 0) {
            // 计算对应高度
            val buttonHeight = (buttonWidth / aspectRatio).toInt()
            // 更新布局参数
            val layoutParams = imageButton.layoutParams
            layoutParams.height = buttonHeight
            imageButton.layoutParams = layoutParams
        }
    }
}

更优雅的方式：用DataBinding自定义BindingAdapter #

如果想让布局更简洁，可以自定义一个BindingAdapter自动处理比例：

@BindingAdapter("android:src")
fun setImageWithAutoHeight(view: ImageView, bitmap: Bitmap?) {
    bitmap?.let {
        view.setImageBitmap(it)
        // 等待View测量完成后再计算高度
        view.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                view.viewTreeObserver.removeOnGlobalLayoutListener(this)
                val aspectRatio = it.width.toFloat() / it.height.toFloat()
                val layoutParams = view.layoutParams
                layoutParams.height = (view.width / aspectRatio).toInt()
                view.layoutParams = layoutParams
            }
        })
    }
}

然后布局里只需要设置android:src="@{viewModel.thumbnail}"，按钮高度设为wrap_content即可。

方案3：如果一定要用background（不推荐） #

如果因为某些原因必须用background，可以把Bitmap包装成BitmapDrawable，并设置它的gravity和缩放规则，但这种方式不如用src方便：

val bitmap = viewModel.thumbnail.value
bitmap?.let {
    val drawable = BitmapDrawable(resources, it)
    drawable.gravity = Gravity.CENTER
    drawable.setFilterBitmap(true)
    imageButton.background = drawable
}

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