如何为自定义Button内的图片添加边距并使其在文本左侧8dp处居中

嘿，这个场景我太熟悉了——用drawableLeft加图标后，原本居中的文本会被挤偏，导致图标+文本的整体没法在Button里居中对吧？别担心，这里有几个实用的解决思路，你可以根据自己的需求选：

方法1：用LinearLayout嵌套实现（最直观灵活） #

这种方法相当于自己搭一个Button的结构，能精确控制图标和文本的位置，完全不用纠结系统Button的drawable布局逻辑：

<!-- 把这个布局当成Button用，设置背景、点击事件即可 -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/your_button_background" <!-- 替换成你的Button背景 -->
    android:clickable="true"
    android:focusable="true"
    android:gravity="center" <!-- 让内部图标和文本整体居中 -->
    android:orientation="horizontal"
    android:paddingVertical="12dp"
    android:paddingHorizontal="16dp">

    <ImageView
        android:layout_width="24dp" <!-- 图标尺寸按需调整 -->
        android:layout_height="24dp"
        android:src="@drawable/your_icon" /> <!-- 替换成你的图标 -->

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp" <!-- 图标和文本的间距 -->
        android:text="你的按钮文本"
        android:textColor="@color/button_text_color"
        android:textSize="16sp" />
</LinearLayout>

优点：逻辑简单，想怎么调就怎么调，支持各种复杂样式；缺点：需要单独处理点击反馈（比如按下时的背景变化），如果要复用的话可以封装成自定义View。

方法2：自定义Button重绘图标位置（优雅复用） #

如果你不想放弃系统Button的特性（比如自带的点击状态、样式继承），可以自定义一个Button，重写onDraw方法来调整图标的位置，让图标+文本整体居中：

class CenteredIconButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = android.R.attr.buttonStyle
) : AppCompatButton(context, attrs, defStyleAttr) {

    private val iconTextSpacing = 8.dpToPx() // 8dp转成像素值

    override fun onDraw(canvas: Canvas?) {
        // 获取左侧的图标
        val leftDrawable = compoundDrawables[0] ?: run {
            super.onDraw(canvas)
            return
        }

        // 计算文本宽度、图标宽度，以及整体总宽度
        val textWidth = paint.measureText(text.toString()).toInt()
        val iconWidth = leftDrawable.intrinsicWidth
        val totalContentWidth = iconWidth + iconTextSpacing + textWidth

        // 计算图标需要偏移的距离，让整体居中
        val offset = (width - totalContentWidth) / 2 - paddingLeft

        // 设置图标的绘制边界
        leftDrawable.setBounds(
            offset,
            paddingTop,
            offset + iconWidth,
            height - paddingBottom
        )

        super.onDraw(canvas)
    }

    // 扩展方法：dp转px
    private fun Int.dpToPx(): Int {
        return (this * resources.displayMetrics.density).toInt()
    }
}

然后在XML里直接用这个自定义Button：

<com.yourpackage.CenteredIconButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/your_icon"
    android:text="你的按钮文本"
    android:textSize="16sp" />

优点：保留系统Button的所有特性，可复用性强；缺点：需要写一点Kotlin/Java代码，对新手不太友好。

方法3：调整padding和drawablePadding（快速临时方案） #

如果你的按钮文本长度固定，也可以通过手动计算padding来让整体居中。比如假设图标宽度是24dp，文本宽度是60dp，那么总内容宽度是24+8+60=92dp，Button宽度是match_parent（比如300dp），那么左右padding应该是(300-92)/2=104dp。不过这种方法硬编码比较多，文本长度变化就失效了，适合简单场景：

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/your_icon"
    android:drawablePadding="8dp"
    android:paddingLeft="104dp" <!-- 按需计算调整 -->
    android:paddingRight="104dp"
    android:text="固定长度文本"
    android:textSize="16sp" />

优点：零代码，快速实现；缺点：不灵活，文本或图标尺寸变化就得重新计算padding。

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