如何在 ImageButton 上显示文本？

我有一个 ImageButton，我想显示一个文本和图像在上面。但当我试用模拟器时:

<ImageButton
android:text="OK"
android:id="@+id/buttonok"
android:src="@drawable/buttonok"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

我得到的图像，但没有文字。我怎样才能显示文字? 请帮助我！

234379 次浏览
小开

实际上，android:text不是 ImageButton接受的参数 但是，如果您试图获取具有指定背景(而非 android 默认值)的按钮，请使用 android:background xml 属性，或者使用 .setBackground();从类中声明它

小开
最佳答案

由于你不能使用 android:text，我建议你使用一个正常的按钮，并使用复合绘图之一。例如:

<Button
android:id="@+id/buttonok"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/buttonok"
android:text="OK"/>

你可以使用 drawableTop，drawableBottom，drawableLeft或者 drawableRight把可绘制的东西放在任何你想放的地方。

更新

对于一个按钮，这也工作得非常好。把 android:background是罚款！

<Button
android:id="@+id/fragment_left_menu_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_bg"
android:text="@string/login_string" />

我只是有这个问题，工作完美。

小开

您可以使用常规的 Button和 android: draableTop 属性(或者左、右、底部)来代替。

小开

如果你真的想这样做，在 ImageButton上加一个标题在技术上是可行的。用 FrameLayout把 TextView放在 ImageButton上。只要记住不要让 Textview可点击。

例如:

<FrameLayout>
<ImageButton
android:id="@+id/button_x"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@null"
android:scaleType="fitXY"
android:src="@drawable/button_graphic" >
</ImageButton>


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="false"
android:text="TEST TEST" >
</TextView>
</FrameLayout>
小开

最佳方法:

<Button
android:text="OK"
android:id="@+id/buttonok"
android:background="@drawable/buttonok"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
小开

ImageButton不能有 text(或者，至少，android:text没有列在它的属性中)。

诀窍是:

看起来你需要使用 Button(看看 drawableTop或者 setCompoundDrawablesWithIntrinsicBounds(int,int,int,int))。

小开

我解决了这个问题，把 ImageButton和 TextView内的 LinearLayout与垂直方向。工程伟大！

<LinearLayout
android:id="@+id/linLayout"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:orientation="vertical" >


<ImageButton
android:id="@+id/camera_ibtn"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:background="@drawable/camera" />


<TextView
android:id="@+id/textView2"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/take_pic"
android:textColor="#FFFFFF"
android:textStyle="bold" />


</LinearLayout>
小开

下面是一个很好的圆形例子:

返回文章页面

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">


<solid
android:color="#ff87cefa"/>


<size
android:width="60dp"
android:height="60dp"/>
</shape>

然后是 xml 文件中的按钮:

<Button
android:id="@+id/btn_send"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/circle"
android:text="OK"/>
小开

你可以使用 LinearLayout而不是使用 Button这是一个安排，我在我的应用程序中使用

 <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:background="@color/mainColor"
android:orientation="horizontal"
android:padding="10dp">


<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/ic_cv"
android:textColor="@color/offBack"
android:textSize="20dp" />


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="@string/cartyCv"
android:textColor="@color/offBack"
android:textSize="25dp" />


</LinearLayout>
小开

伙计们，我需要开发的设置和注销按钮，我使用下面的代码。 enter image description here

    <Button
android:id="@+id/imageViewLogout"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_margin="@dimen/size_30dp"
android:layout_alignParentLeft="true"
android:text="Settings"
android:drawablePadding="10dp"
android:background="@android:color/transparent"
android:layout_alignParentBottom="true"
android:drawableTop="@drawable/logout" />
小开

这就是解决办法

<LinearLayout
android:id="@+id/buttons_line1"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:id="@+id/btn_mute"
android:src="@drawable/btn_mute"
android:background="@drawable/circle_gray"
android:layout_width="60dp"
android:layout_height="60dp"/>
<ImageButton
android:id="@+id/btn_keypad"
android:layout_marginLeft="50dp"
android:src="@drawable/btn_dialpad"
android:background="@drawable/circle_gray"
android:layout_width="60dp"
android:layout_height="60dp"/>
<ImageButton
android:id="@+id/btn_speaker"
android:layout_marginLeft="50dp"
android:src="@drawable/btn_speaker"
android:background="@drawable/circle_gray"
android:layout_width="60dp"
android:layout_height="60dp"/>
</LinearLayout>
<LinearLayout
android:layout_below="@+id/buttons_line1"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:text="mute"
android:clickable="false"
android:textAlignment="center"
android:textColor="@color/Grey"
android:layout_width="60dp"
android:layout_height="wrap_content"/>
<TextView
android:text="keypad"
android:clickable="false"
android:layout_marginLeft="50dp"
android:textAlignment="center"
android:textColor="@color/Grey"
android:layout_width="60dp"
android:layout_height="wrap_content"/>
<TextView
android:text="speaker"
android:clickable="false"
android:layout_marginLeft="50dp"
android:textAlignment="center"
android:textColor="@color/Grey"
android:layout_width="60dp"
android:layout_height="wrap_content"/>
</LinearLayout>
小开

在 button上显示 Text的最佳方法(附图)

example of text on button with image background

你的问题 : 如何在 imagebutton上显示 text？

解答 : 您不能使用 imageButton显示 text。在 接受回答中告诉的方法也不工作。

因为

如果使用 android:drawableLeft="@drawable/buttonok"，则无法在 button的 center中设置 drawable。

如果你使用 android:background="@drawable/button_bg"，那么你的 drawable的 color将被改变。

在机器人的世界里，有成千上万种选择可以做到这一点。但在这里我根据我的观点提供最好的替代品。(见下文)

解决方案: 与 LinearLayout一起使用 cardView

您的 drawable/image在 LinearLayout中使用，因为它显示在中心。在 textView的帮助下，你可以在这上面设置 text。我们使 cardView背景到 transparent。

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="99dp"
android:layout_margin="16dp"
app:cardBackgroundColor="@android:color/transparent"
app:cardElevation="0dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/your_selected_image"
>


<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Happy Coding"
android:textSize="33sp"
android:gravity="center"
>
</TextView>


</LinearLayout>
</androidx.cardview.widget.CardView>

这里我解释一些术语:

app:cardBackgroundColor="@android:color/transparent"用于制作 cardView的透明背景

app:cardElevation="0dp"用于 cardView周围的隐藏凸起线

它提供了 cardView的实际大小。当你使用 cardView的时候一定要使用它

将 image/drawable设置为 LinearLayout作为背景。

对不起，我英语不好。

快乐编码:)


提交答案