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

问题描述 投票:0回答:7

我正在尝试使用谷歌开发的材质按钮。由于第三方依赖,我无法使用 androidx 存储库,因此我当前正在使用 android 支持库(v28.0.0-alpha1,alpha3 不允许我使用材质按钮)

我正在尝试实现一个宽按钮,文本居中+文本旁边的图标:

但我能得到的就是这个居中的文本,按钮边缘有图标:

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

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

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

android android-layout material-design
7个回答
42
投票

我也遇到这个问题了。 做了一些挖掘,发现了这个。

有一个名为

app:iconGravity
的属性,它有两个选项,即 starttextStart ,这似乎对我不起作用,但也许可以尝试一下 - 这是来自 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的定义,它在类的开头)


2
投票

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

Button 小部件是从 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);

结果:


0
投票

您也可以进行定制:

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

0
投票

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

图片

按钮

按钮填充

代码

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

希望有帮助


0
投票
<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>


     

0
投票

您可以在 MaterialButton 中使用 app:iconGravity="textStart"

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn_start"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:text="@string/start"
    app:iconGravity="textStart"
    app:icon="@drawable/ic_play" />

结果如下:

编码快乐!


-1
投票

我自己也遇到这个问题

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

首先,我尝试了 app:iconPadding 的应用程序命名空间属性,添加了一个负 dp 量,它似乎将文本拉到了可绘制对象中,然后添加了图标填充绝对值的正值(app:iconPadding=- 72dp 与 android:paddingStart=72 这对我来说似乎有点老套,所以我坚持简单地调整 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 值。但这无论如何都会覆盖该值,哦,好吧。您的里程可能会有所不同,但希望这会有所帮助!

© www.soinside.com 2019 - 2024. All rights reserved.