带图标的MaterialButton文本不居中

Question

我正在尝试使用一个材料按钮，其中我想在最左边放置一个图标，然后在中心放置一些文本。但是当我例如在左侧放入图标时，我可以清楚地看到文本向右移动。有没有什么办法可以避免这种情况？我希望文字居中，而且不想采用 hacky 的解决方案。

<com.google.android.material.button.MaterialButton
        android:id="@+id/testButton"
        style="@style/RevertedColorDefaultButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TEST"
        android:textAlignment="center"
        app:icon="@drawable/some_icon"
        app:iconGravity="start"´
        app:iconTint="@color/colorPrimary"
        app:layout_constraintBottom_toTopOf="@id/someOtherButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.94" />

提供信息，我尝试使用普通按钮进行相同的操作，但仍然出现了相同的问题:

<androidx.appcompat.widget.AppCompatButton
        android:id="@+id/test2Button"
        style="@style/RevertedColorDefaultButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:drawableStart="@drawable/some_icon"
        android:drawableTint="@color/colorPrimary"
        android:text="TEST"
        app:layout_constraintBottom_toTopOf="@id/someOtherButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.94" />

编辑：添加了图片

这段内容涉及IT技术，主要是一张图片的编辑说明。

- Mikkel Larsen

---

尝试将 app:iconGravity 与文本重力一起使用。 - ADM

同样的问题，遗憾的是我也尝试过那个方法 :/ - Mikkel Larsen

我不明白这里的问题。你应该在期望输出和当前输出中添加一张图片。 - ADM

刚刚添加了图片。 - Mikkel Larsen

对我来说看起来很好。只是要想到图标现在有它自己的边界，而文本则居中于为其留下的空间。 - rminaj

Answer 1

如果后来有人观看这篇文章，我发现一种方法可以通过将图标的内在宽度作为负填充添加到按钮中实现此操作。

<button>.iconPadding = -(icon?.intrinsicWidth ?: 0)

这是因为文本被图标的 intrinsicWidth 精确地推动。

- Napster

---

正是我所需要的。或者在layout xml中： app:iconPadding="-<内在宽度>dp" 例如： app:iconPadding="-24dp" - Ben

Answer 2

android:includeFontPadding="false"

这在我的情况下起了作用。

- Lucas Modesto

---

是的，谢谢。我发现下载的字体有一些预定义的填充。 - Abhay

Answer 3

你可以使用 iconGravity 属性来改变图标的位置：

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button"
            app:icon="@drawable/ic_add_24px"
            app:iconGravity="textStart"
            android:text="BUTTON"
            />

您还可以使用iconPadding属性来减少文本和图标之间的填充：

        <com.google.android.material.button.MaterialButton
            app:iconGravity="textStart"
            app:iconPadding="0dp"
            ../>

- Gabriele Mariotti

---

嗨，有更好的解决方案吗？ - Erfan Eghterafi

这个对我有效，但是必须通过尝试不同的iconPadding值来使文本在整个宽度内居中。 - Tushar Kathuria

Answer 4

尝试使用 android:textAlignment="center"。

- Tobibur Rahman

---

是的，我有尝试过。唯一实际移动它的方法，在MaterialButton上设置insetRight为某些dp，但是这也会使整个按钮从右侧移动，因此这不是一个选项。 - Mikkel Larsen

Answer 5

我找到了一种方法，可以在不创建自定义视图并添加大量自定义布局逻辑的情况下完成此操作。 MaterialButton 似乎具有 icon 和 iconGravity 属性。请参见以下代码和示例输出。注意：示例代码中的自定义样式扩展了 Widget.MaterialComponents.Button

<com.google.android.material.button.MaterialButton
    android:id="@+id/signUpButton"
    style="@style/Button.AppTheme.Primary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Sign up with Email"
    app:icon="@drawable/ic_envelope"
    app:iconGravity="textStart"/>

- speedynomads

---

我也尝试过，但很遗憾当时对我没用。 - Mikkel Larsen

只是双重检查一下...在你发布的示例代码中，你使用的是"start"而不是"textStart"，并且该行之后有一个尾随的'。你试过用"textStart"吗？ - speedynomads