MaterialButton使用CircularProgressIndicator时iconGravity失效如何解决

问题原因 #

• MaterialButton的iconGravity属性计算图标位置时，依赖图标Drawable的intrinsicWidth和intrinsicHeight返回值来计算对齐偏移量
• 你创建的IndeterminateDrawable默认没有配置固定的固有宽高，返回的宽高为0，导致对齐逻辑失效，图标直接对齐到控件最左侧

解决方法 #

修改progressIndicatorDrawable的初始化逻辑，主动设置固有宽高即可，示例修改代码如下：

class LoadingButton constructor(context: Context) : MaterialButton(context) {

    // 先定义你需要的图标尺寸，这里示例用24dp，可根据需求调整
    private val iconSize by lazy {
        dp2px(context, 24f)
    }

    private val progressIndicatorDrawable by lazy {
        val progressIndicatorSpec = CircularProgressIndicatorSpec(context, null, 0, R.style.Widget_MaterialComponents_CircularProgressIndicator_ExtraSmall)
        progressIndicatorSpec.indicatorColors = intArrayOf(getColor(context, R.color.white))
        IndeterminateDrawable.createCircularDrawable(context, progressIndicatorSpec).apply {
            setVisible(true, true)
            // 核心修改：设置固有宽高
            setIntrinsicWidth(iconSize)
            setIntrinsicHeight(iconSize)
            // 额外设置drawable边界，避免显示异常
            setBounds(0, 0, iconSize, iconSize)
        }
    }

    init {
        icon = progressIndicatorDrawable
        text = "Delete"
        iconGravity = ICON_GRAVITY_TEXT_START
    }

    private fun dp2px(context: Context, dpValue: Float): Int {
        return TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dpValue,
            context.resources.displayMetrics
        ).toInt()
    }
}

额外补充 #

如果修改后还有细微的位置偏移，可以配合iconPadding属性调整图标和文本的间距，达到和普通图标一致的显示效果。

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