繁体   English   中英

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

[英]MaterialButton with icon doesn't center text

我正在尝试使用 Material Button,我希望在最左边有一个图标,然后在中心有一些文本。 但是,例如,当我放入左侧的图标时,我可以清楚地看到文本被推到了右侧。 有什么办法可以避免这种情况吗? 我希望文本居中,并希望避免为它做一个骇人听闻的解决方案..

<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" />

编辑:添加图像

在此处输入图片说明

对于稍后查看此内容的任何人,我找到了一种方法,通过将图标的内在宽度作为负填充添加到按钮

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

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

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

在此处输入图片说明

试试android:textAlignment="center"

我找到了一种无需创建自定义视图并添加大量自定义布局逻辑即可完成此操作的方法。 MaterialButton似乎有iconiconGravity属性。 请参阅下面的代码和示例输出。 注意:示例代码中的自定义样式扩展了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"/>

在此处输入图片说明

android:includeFontPadding="false"

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM