带图标和文本的 Android 按钮

我的应用程序里有一些这样的按钮:

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

I'm trying to create a same button with text and a icon. Android: draableLeft 对我不起作用(也许可以，但我不知道如何设置图标的最大高度)。

所以我创建了一个带有 ImageView 和 TextView 的 LinearLayout，并让它像一个按钮:

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


<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="24sp"
android:paddingRight="30dp"
android:gravity="center"
android:text="Search" />
</LinearLayout>

My new button is exactly what i want (font size, icon and text placement). 但它看起来不像我的默认按钮:

enter image description here

所以我试着改变我的新按钮的背景和文字颜色:

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());

这给出了一个奇怪的结果，我的旧按钮，变得乱七八糟:

enter image description here

当我改变 XML 中这两个按钮的顺序时，首先是“新按钮”，这会产生另一个奇怪的结果:

enter image description here

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

有什么想法吗？

312018 次浏览
小开
最佳答案

试试这个。

<Button
android:id="@+id/bSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Search"
android:drawableLeft="@android:drawable/ic_menu_search"
android:textSize="24sp"/>
小开

要向左、右、顶部或底部添加图像，可以使用以下属性:

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

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

小开

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

样本

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

This is what you really want. 

<Button
android:id="@+id/settings"
android:layout_width="190dp"
android:layout_height="wrap_content"
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" />
小开

@ Liem Vo 的回答是正确的，如果你正在使用 android.widget。没有重写的按钮。如果你使用材料组件覆盖你的主题，这不会解决问题。

所以如果你是

  1. 使用 com.google.android.Materials al.button or
  2. 使用材料组件重写 AppTheme

使用 应用程序: 图标参数。

<Button
android:id="@+id/bSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Search"
android:textSize="24sp"
app:icon="@android:drawable/ic_menu_search" />
小开

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

比如:

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

enter image description here

小开

这样呢？

<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_width="match_parent"
android:layout_height="wrap_content"
android:text="Your Text" />
小开

试试看:-

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



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

我在纯按钮视图中遇到了同样的问题。在我的例子中，XML 解决方案没有用处，因为我有一些逻辑来显示/隐藏这个图标。

使用纯 Kotlin 还有一种解决方案:

(bSearch as? MaterialButton)?.let {
icon = AppCompatResources.getDrawable(context, R.drawable.search_icon)
iconGravity = MaterialButton.ICON_GRAVITY_START
}

附言。我们可以把按钮转换为物质按钮，就像我们可以在按钮中使用 icon参数一样公平: icon参数实际上不是按钮参数——它是鬼鬼祟祟的物质按钮参数，以某种方式与按钮一起工作。


提交答案