带有图标的 MaterialButton 不会使文本居中答案

【问题标题】：MaterialButton with icon doesn't center text带有图标的 MaterialButton 不会使文本居中
【发布时间】：2019-11-04 02:58:56
【问题描述】：

我正在尝试使用材质按钮，我希望在最左边有一个图标，然后在中间放置一些文本。但是，例如，当我输入左侧的图标时，我可以清楚地看到文本被推到了右侧。有没有办法避免这种情况？我希望文本居中，并希望避免为它做一个 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" />

编辑：添加图片

【问题讨论】：

尝试使用app:iconGravity 与文字重力..
可悲的是同样的问题。我也试过了：/
我不明白这里的问题。您应该将图像添加到预期输出和当前输出..
刚刚添加图片
这对我来说很好。试想一下，图标现在有了自己的边界，并且文本居中于为它留下的空间。

标签： android android-button material-components-android

【解决方案1】：

对于稍后查看此内容的任何人，我找到了一种方法，通过将图标的固有宽度添加为按钮的负填充来做到这一点

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

这是因为文本是由图标的intrinsicWidth推送的

【讨论】：

【解决方案2】：

您可以使用 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"
            ../>

【讨论】：

嗨，有更好的解决方案吗？？
这个对我有用，但必须对 iconPadding 值进行一些试验和错误，以使文本在全宽范围内居中

【解决方案3】：

试试android:textAlignment="center"。

【讨论】：

是的，我尝试过的第一件事。唯一实际移动它的是在材质按钮上，将 insetRight 设置为某个 dp，但这也会从右侧移动整个按钮，所以这不是一个选项。

【解决方案4】：

我找到了一种无需创建自定义视图并添加大量自定义布局逻辑的方法。 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"/>

【讨论】：

我也试过了，可惜当时对我没用。
只是仔细检查..在您发布的示例代码中，您使用的是“start”而不是“textStart”，并且该行后面有一个尾随 '。你试过“textStart”吗？

【解决方案5】：

android:includeFontPadding="false"

这在我的情况下成功了

【讨论】：