带有图标和文本的 Android 按钮

Posted 2023-03-06

【中文标题】带有图标和文本的 Android 按钮

【英文标题】：Android button with icon and text

【发布时间】：2014-05-22 20:48:57

【问题描述】：

我的应用中有一些这样的按钮：

    <Button
        android:id="@+id/bSearch"
        android:layout_
        android:layout_
        android:padding="16dp"
        android:text="Search"
        android:textSize="24sp" />

我正在尝试使用文本和图标创建相同的按钮。 android:drawableLeft 对我不起作用（也许会，但我不知道如何为图标设置最大高度）。

所以我创建了一个带有 ImageView 和 TextView 的 LinearLayout 并让它像一个按钮一样工作：

    <LinearLayout
        android:id="@+id/bSearch2"
        android:layout_
        android:layout_
        android:background="@android:drawable/btn_default"
        android:clickable="true"
        android:padding="16dp"
        android:orientation="horizontal" >

        <ImageView
            android:layout_
            android:layout_
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:adjustViewBounds="true"
            android:maxHeight="30dp"
            android:maxWidth="30dp"
            android:scaleType="fitCenter"
            android:src="@drawable/search_icon" />

        <TextView
            android:id="@+id/tvSearchCaption"
            android:layout_
            android:layout_
            android:layout_gravity="center_vertical"
            android:textSize="24sp"
            android:paddingRight="30dp"
            android:gravity="center"
            android:text="Search" />
    </LinearLayout>

我的新按钮正是我想要的（字体大小、图标和文本位置）。 但它看起来不像我的默认按钮：

所以我尝试更改新按钮的背景和文本颜色：

Button Search = (Button) findViewById(R.id.bSearch);
LinearLayout bSearch2 = (LinearLayout) findViewById(R.id.bSearch2);
bSearch2.setBackground(bSearch.getBackground());
TextView tvSearchCaption = (TextView)findViewById(R.id.tvSearchCaption);
tvSearchCaption.setTextColor(bSearch.getTextColors().getDefaultColor());

这给出了一个奇怪的结果，我的旧按钮被弄乱了：

当我在 XML 中更改这两个按钮的顺序时，“新按钮”先出现，这会产生另一个奇怪的结果：

现在我注意到，当我尝试按下旧按钮时，新按钮会被按下。

有什么想法吗？

【参考方案1】：

试试这个。

<Button
    android:id="@+id/bSearch"
    android:layout_
    android:layout_
    android:padding="16dp"
    android:text="Search"
    android:drawableLeft="@android:drawable/ic_menu_search"
    android:textSize="24sp"/>

【讨论】：

这看起来正是我想要的，但我想使用我自己的图标，而不是默认的 android 图标。我的图标更大。这是否意味着，我需要为每个分辨率创建更小的位图？是否有一些参数可以让我控制图标大小？

没错。您需要为每种分辨率创建不同的图像尺寸

好的，感谢您的帮助，但现在我有另一个问题...我的图标很亮，因为文本在深色按钮上是白色的，就像您在我的问题中看到的图像一样。该应用程序已设置为使用 android 版本中可用的主题。我的例子来自 android 4.3。当应用程序在 android 2.3.3 上运行时，默认按钮为浅色和深色文本。有点像我的第一张图片上的按钮。有没有办法为旧设备上运行的图标提供替代位图。我希望你能理解我的问题:)

这是个好问题。您可以为您的图标定义不同的样式，为每个 API 级别定义不同的文本样式（这意味着 android OS 版本）。可以看到 values-v11、values-v14 文件夹。

你也可以给图标添加padding android:drawablePadding=""

【参考方案2】：

要将图像添加到左侧、右侧、顶部或底部，您可以使用如下属性：

android:drawableLeft
android:drawableRight
android:drawableTop
android:drawableBottom

上面给出了示例代码。您也可以使用相对布局来实现这一点。

【讨论】：

我如何以编程方式做到这一点

你可以说android:drawableStart而不是左，android:drawableEnd而不是右。

@SimãoGarcia *应该。开始应该替换右边，结束应该替换所有地方的左边。这是为了确保可以使用从右到左的阅读以及从左到右的阅读，因为其他一些国家/地区的阅读方式不同。

@CarsonJ。这是正确的，但你有向后的方向?将left替换为start，并将right替换为end

【参考方案3】：

对于希望动态执行此操作的任何人，按钮对象上的setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom) 将提供帮助。

样本

Button search = (Button) findViewById(R.id.yoursearchbutton);
search.setCompoundDrawablesWithIntrinsicBounds('your_drawable',null,null,null);

【讨论】：

使用 setCompoundDrawables 并没有反映在 UI 上。使用 setCompoundDrawablesWithIntrinsicBounds 代替，并且有效。

【参考方案4】：

您可以使用材料组件库和MaterialButton 组件。 使用 app:icon 和 app:iconGravity="start" 属性。

类似：

  <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/..."
        app:iconGravity="start"
        ../>

【讨论】：

请注意，如果您的应用有 Material Design 主题，标准 Button 小部件会自动膨胀为 MaterialButton。每在这里 - material.io/develop/android/components/buttons

你会如何使用没有文字，只有图标的材料设计按钮？

@DIRTYDAVE 检查***.com/questions/9884202/custom-circle-button/…

太好了，谢谢！

【参考方案5】：

这才是你真正想要的。

<Button
       android:id="@+id/settings"
       android:layout_
       android:layout_
       android:layout_gravity="center_horizontal"
       android:background="@color/colorAccent"
       android:drawableStart="@drawable/ic_settings_black_24dp"
       android:paddingStart="40dp"
       android:paddingEnd="40dp"
       android:text="settings"
       android:textColor="#FFF" />

【参考方案6】：

@Liem Vo 的答案是正确的，如果您使用 android.widget.Button 而没有任何覆盖。如果您使用 MaterialComponents 覆盖您的主题，这将无法解决问题。 如果你是

使用 com.google.android.material.button.MaterialButton 或 使用 MaterialComponents 覆盖 AppTheme

使用 app:icon 参数。

<Button
    android:id="@+id/bSearch"
    android:layout_
    android:layout_
    android:padding="16dp"
    android:text="Search"
    android:textSize="24sp"
    app:icon="@android:drawable/ic_menu_search" />

【参考方案7】：

这样怎么样？

<Button
            android:id="@+id/yourID"
            android:drawableStart="@drawable/ic_flag"
            android:textColor="#FFFFFF"
            android:textSize="12sp"
            android:textStyle="bold"
            android:textAlignment="textStart"
            android:background="@drawable/btn_background"
            android:fontFamily="@font/YourFont"
            android:layout_
            android:layout_
            android:text="Your Text" />

【参考方案8】：

试试看：-

position-> left,right,top,bottom
  android:drawableposition="@android:drawable/-yourImage-"
  

  android:drawabletop="-Yourfilesrc-"
  android:drawablebottom="-Yourfilesrc-"
  android:drawableleft="-Yourfilesrc-"
  android:drawableright="-Yourfilesrc-"