我试图在一个按钮上有一个图像(作为背景),并动态添加,这取决于在运行时发生的事情,一些文字上方/上方的图像。

如果我使用ImageButton,我甚至没有添加文本的可能性。 如果我使用按钮,我可以添加文本,但只定义一个图像与android:drawableBottom和类似的XML属性定义在这里。

然而,这些属性只在x和y维度上组合文本和图像,这意味着我可以在文本周围绘制图像,但不能在文本下面/下面绘制图像(z轴定义为显示出来)。

有什么建议吗?一种想法是扩展Button或ImageButton并重写draw()方法。但以我目前的知识水平,我真的不知道如何做到这一点(2D渲染)。也许有更有经验的人知道一个解决方案,或者至少有一些开始的建议?


当前回答

重要更新

不要使用正常的android: drawablleft等…用矢量绘图,否则 会在低API版本中崩溃。(我在现场应用程序中遇到过)

对于可绘制的向量

如果你使用矢量绘图,那么你必须

Have you migrated to AndroidX? if not you must migrate to AndroidX first. It is very simple, see what is androidx, and how to migrate? It was released in version 1.1.0-alpha01, so appcompat version should be at least 1.1.0-alpha01. Current latest version is 1.1.0-alpha02, use latest versions for better reliability, see release notes - link. implementation 'androidx.appcompat:appcompat:1.1.0-alpha02' Use AppCompatTextView/AppCompatButton/AppCompatEditText Use app:drawableLeftCompat, app:drawableTopCompat, app:drawableRightCompat, app:drawableBottomCompat, app:drawableStartCompat and app:drawableEndCompat

对于常规绘图

如果你不需要画向量,那么你可以

使用android: drawablleft, android:drawableRight, android:drawableBottom, android:drawableTop 你可以使用常规的TextView, Button & EditText或AppCompat类。

您可以实现如下输出-

其他回答

只是替换

android:background="@drawable/icon"

with

android:background="@android:color/transparent"
android:drawableTop="@drawable/[your background image here]"

伊茨的把戏很不错。;)

 <Button android:id="@+id/imeageTextBtn" 
        android:layout_width="240dip"
        android:layout_height="wrap_content"
        android:text="Side Icon With Text Button"
        android:textSize="20sp"
        android:drawableLeft="@drawable/left_side_icon"         
        />   

MaterialButton支持设置图标并将其与文本对齐:

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My button"
        app:icon="@drawable/your_icon"
        app:iconGravity="textStart"
        />

iconGravity也可以是start / end,如果你想让图标与按钮对齐,而不是与按钮内的文本对齐。


从1.5.0-beta01版本开始,app:iconGravity也可以是top / textTop(提交)

要结合Button和drawableTop并仍然得到点击响应,你可以使用按钮样式@style/Widget.AppCompat.Button。无边界,使其透明。

<Button
    android:id="@+id/settings"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@drawable/ic_baseline_settings_24"
    android:drawableTint="?attr/colorPrimary"
    android:text="@string/settings"
    android:textColor="?attr/colorPrimary" />

我采取了一种不同于这里所述的方法,它真的很有效,所以我想分享它。

我正在使用样式创建一个自定义按钮,图像在左边,文本在中右。只需遵循以下4个“简单步骤”:

I.使用至少3个不同的PNG文件和工具创建9个补丁:/YOUR_OWN_PATH/android-sdk-mac_x86/tools/./draw9patch。在这之后,你应该:

Button_normal.9.png, button_focused.9.png和button_pressed.9.png

然后下载或创建一个24x24的PNG图标。

ic_your_icon.png

保存在你的Android项目的drawable/文件夹中。

2在项目的drawable/文件夹下创建一个名为button_selector.xml的XML文件。状态应该是这样的:

<item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
<item android:state_focused="true" android:drawable="@drawable/button_focused" />
<item android:drawable="@drawable/button_normal" />

3转到values/文件夹,打开或创建styles.xml文件,并创建以下XML代码:

<style name="ButtonNormalText" parent="@android:style/Widget.Button">
    <item name="android:textColor" >@color/black</item>
    <item name="android:textSize" >12dip</item>
    <item name="android:textStyle" >bold</item>
    <item name="android:height" >44dip</item>
    <item name="android:background" >@drawable/button_selector</item>
    <item name="android:focusable" >true</item>
    <item name="android:clickable" >true</item>
</style>

<style name="ButtonNormalTextWithIcon" parent="ButtonNormalText">
    <item name="android:drawableLeft" >@drawable/ic_your_icon</item>
</style>

ButtonNormalTextWithIcon是一个“子样式”,因为它扩展了ButtonNormalText(“父样式”)。

注意,将ButtonNormalTextWithIcon样式中的drawablleft更改为drawableRight, drawableTop或drawableBottom,您可以将图标放在相对于文本的其他位置。

IV.转到你有UI XML的布局/文件夹,然后转到你想应用样式的按钮,让它看起来像这样:

<Button android:id="@+id/buttonSubmit" 
android:text="@string/button_submit" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
style="@style/ButtonNormalTextWithIcon" ></Button>

和…瞧!你的按钮在左边有一个图像。

对我来说,这是更好的方法!因为这样做,你可以管理按钮的文本大小与你想要显示的图标分开,并使用相同的背景绘制几个按钮与不同的图标,尊重Android UI指南使用风格。

你也可以为你的应用程序创建一个主题,并添加“父样式”,这样所有的按钮看起来都是一样的,并只在你需要的地方应用“子样式”的图标。