如何让图标显示在Android Material Buttons中的文本旁边？

Question

我正在尝试使用 google 开发的 Material Button。由于第三方依赖我无法使用androidx仓库，所以我目前正在使用android支持库（v28.0.0-alpha1，alpha3不允许我使用材质按钮）

我正在尝试在文本旁边使用居中的文本 + 图标来实现这个宽按钮：

但我能得到的只是这个，按钮边缘带有图标的居中文本：

这和原来的android按钮一样，也有同样的问题。这个想法是 Material Button 可以解决这个问题，但在 28.0.0-alpha1 上它似乎对我不起作用

有一些解决方案涉及使用复合绘图制作一个文本视图并在其周围绘制一个框架，但如果可能的话，我想坚持使用材质按钮。

有人知道如何解决这个问题吗？

Answer 1

我也遇到了这个问题。 挖了一圈，发现了这个。

有一个名为 app:iconGravity 的属性有两个选项，即 start 和 textStart 这似乎对我不起作用，但也许可以尝试一下 - 来自Material Button 的 GitHub 存储库。

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_icon_button"
    style="@style/Widget.MaterialComponents.Button.Icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icon_button_label_enabled"
    app:icon="@drawable/icon_24px"
    app:iconGravity="textStart"/>

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/button/MaterialButton.java （搜索iconGravity的定义，在类的开头）

Answer 2

有人知道如何解决这个问题吗？

按钮小部件是从 TextView 扩展而来的。所以你可以在你的情况下使用 ImageSpan。

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.AppCompat.Button.Colored"
        />

    Button button = findViewById(R.id.button);
    SpannableString ss = new SpannableString("  CART".toUpperCase(Locale.US));
    Drawable d = VectorDrawableCompat.create(getResources(), R.drawable.ic_shopping_cart_white_24dp, getTheme());

    d.setBounds(0, 0, (int) button.getTextSize(), (int) button.getTextSize());    //to make it square
    ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
    ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    button.setTransformationMethod(null);
    button.setText(ss);

结果：

Answer 3

您也可以进行自定义：

                 <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center">

                        <ImageView
                            android:id="@+id/icon"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            android:layout_marginRight="5dp"
                            android:layout_marginEnd="5dp"
                            android:src="@android:drawable/ic_media_play" />

                        <TextView
                            android:id="@+id/search"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            android:lines="1"
                            android:maxLines="1"
                            android:layout_toRightOf="@id/icon"
                            android:layout_toEndOf="@id/icon"
                            android:text="search"
                            android:textColor="@color/white"
                            android:textSize="16sp" />


                    </RelativeLayout>

Answer 4

也许不是最好的解决方案，但您可以在按钮的左侧和右侧添加填充。如果您在两侧添加相同的值，它将居中查看示例图像：

图片

按钮

按钮填充

代码

 <Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:drawableStart="@drawable/account"
    android:paddingLeft="120dp"
    android:paddingRight="120dp"
    android:text="Button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="266dp" />

希望对你有帮助

Answer 5

<RelativeLayout
    android:id="@+id/callButton"
    style="?android:attr/buttonStyle"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="18dp"
    android:layout_marginRight="18dp"
    android:background="@color/colorPrimaryDark">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_call"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="3dp"
        android:text="@string/callCentralDesk"
        android:textColor="@android:color/white" />
</RelativeLayout>


     

Answer 6

我自己也有这个问题。

使用 Google 的 Material Components 库，我目前正在使用 androidX 依赖项，但从文档看来，您也可以使用支持库版本获取相同的依赖项。

起初我使用 app:iconPadding 的 app 命名空间属性添加负 dp 量，它似乎将文本拉到可绘制对象，然后添加图标填充绝对值的正值 (app:iconPadding =-72dp with android:paddingStart=72 这一切对我来说似乎有点 hacky 所以我坚持简单地调整 paddingStart 和 paddingEnd 直到出现所需的结果。

最终结果

<!--Padding Start and End Method-->
<!--This is inside a constraint layout with width being match_constraints-->
<com.google.android.material.button.MaterialButton
    android:id="@+id/buttonFoo"
    style="@style/Widget.MaterialComponents.Button.IconButton"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_my_button_icon"
    android:text="@string/my_button_text"
    android:paddingStart="72dp"
    android:paddingEnd="72dp"/>

我不太确定 Button.IconButton 样式的作用很大，但将填充开始设置为 12dp 的系统硬编码 val。但这无论如何都会覆盖该值。您的里程可能会有所不同，但希望这会有所帮助！