如何将Button的drawableEnd图标对齐到文本末尾？Button宽度设为match_parent

当Button宽度设为match_parent时，默认的drawableEnd会对齐按钮的右边缘，而非文本末尾。以下是几种可行的解决方案：

方案一：用LinearLayout模拟Button结构 #

通过LinearLayout包裹TextView和ImageView，直接实现图标紧跟文本的效果，同时保留Button的点击交互：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮文本"
        android:textSize="16sp"/>

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginStart="8dp"
        android:src="@drawable/your_target_icon"/>
</LinearLayout>

• 外层LinearLayout设置?attr/selectableItemBackground实现点击波纹效果，替代Button的默认样式
• ImageView直接跟在TextView后，自然对齐文本末尾

方案二：自定义Button重绘图标位置 #

继承AppCompatButton，重写onDraw方法，手动计算并调整drawableEnd的绘制位置：

public class TextAlignedDrawableButton extends AppCompatButton {
    public TextAlignedDrawableButton(Context context) {
        super(context);
    }

    public TextAlignedDrawableButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TextAlignedDrawableButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Drawable[] drawables = getCompoundDrawables();
        if (drawables != null) {
            Drawable endDrawable = drawables[2]; // 索引2对应drawableEnd
            if (endDrawable != null) {
                // 计算文本宽度
                float textWidth = getPaint().measureText(getText().toString());
                int drawableWidth = endDrawable.getIntrinsicWidth();
                int paddingLeft = getPaddingLeft();
                int drawablePadding = getCompoundDrawablePadding();

                // 计算图标起始X坐标：左内边距 + 文本宽度 + 图标与文本的间距
                float drawableStartX = paddingLeft + textWidth + drawablePadding;
                // 垂直居中对齐
                float drawableStartY = (getHeight() - endDrawable.getIntrinsicHeight()) / 2f;

                // 设置图标的绘制边界
                endDrawable.setBounds((int) drawableStartX, (int) drawableStartY,
                        (int) (drawableStartX + drawableWidth),
                        (int) (drawableStartY + endDrawable.getIntrinsicHeight()));
            }
        }
        super.onDraw(canvas);
    }
}

布局中使用自定义Button：

<com.your.package.name.TextAlignedDrawableButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="按钮文本"
    android:drawableEnd="@drawable/your_target_icon"
    android:drawablePadding="8dp"/>

方案三：用ConstraintLayout拆分文本与图标 #

将Button的文本和图标分离，通过ConstraintLayout约束图标在文本右侧，整体占满父布局宽度：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:padding="16dp">

    <Button
        android:id="@+id/btn_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮文本"
        android:background="@null"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/your_target_icon"
        android:layout_marginStart="8dp"
        app:layout_constraintStart_toEndOf="@id/btn_content"
        app:layout_constraintTop_toTopOf="@id/btn_content"
        app:layout_constraintBottom_toBottomOf="@id/btn_content"/>
</androidx.constraintlayout.widget.ConstraintLayout>

• 外层ConstraintLayout承担点击交互和背景，内部Button仅显示文本，ImageView紧跟文本右侧

内容的提问来源于stack exchange，提问作者Андрей Манаков