如何在ImageButton上显示文本？

Question

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

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

我已经得到了图片，但没有文字。如何显示文字？请帮帮我！

- Võ Quang Hòa

Answer 1

由于无法使用 android:text，我建议您使用普通按钮，并使用其中的一个组合Drawable。例如：

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

我刚刚遇到过这个问题，并且它已经完美解决了。

- Cristian

---

除非您需要某种疯狂的按钮布局，例如由两个TextView夹着的图像，否则此选项效果最佳。我最初尝试了一个定义为widget.button的布局对象，然后在其中放置了一个ImageView和一个TextView，但在对比上述Button布局进行分析后，我在我的FramLayout上节省了近30％的测量时间，50％的布局时间和15-20％的绘制时间，并将对象数从38个减少到26个。这是相当可观的节省。 - Evan R.

@shim的drawableTop会将图像放置在按钮顶部，drawableRight会放置在底部等等。 - Cristian

@RenanBandeira 是的，使用 setCompoundDrawables*() 方法。 - Cristian

我怎样才能将图片缩放以适应按钮大小？或者说它是否能够自动调整图片大小以适应按钮？ - Alston

和 @Stallman 相同的问题，如何将图片与按钮配合，并将其设置为左侧？ - Twitter khuong291

Answer 2

如果您确实希望在ImageButton上放置标题，那么技术上是可能的。只需使用FrameLayout在ImageButton上方放置一个TextView即可。但请记住不要使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>

- UncleIstvan

---

这在Lollipop上似乎不起作用，但在其他设备上完美运行。 - Hong

这种方法的问题在于文本不受按钮状态（禁用等）的影响...除非您手动操作。 - TheOperator

Answer 3

大家好，我需要开发设置和注销按钮，我使用了以下代码。

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

- Naveed Ahmad

Answer 4

我通过将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>

- Rafael Dvl

Answer 5

实际上，android:text 不是 ImageButton 接受的参数。但是，如果你想要一个具有指定背景（不是 Android 默认）的按钮，请使用 android:background xml 属性或在类中声明它，使用 .setBackground();

- Samuel

Answer 6

您可以使用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>

- m.yuki

---

很棒的解决方案！onClick 在 LinearLayout 上也能完美地工作。我不明白为什么我们要使用 Button 或 ImageButton。 - Sam

Answer 7

您可以使用常规的并使用android:drawableTop属性（或left，right，bottom）来代替。

- Nathan Schwermann

---

我发现这个答案对我来说是添加图像（例如按钮文本旁边的图标）最快和最有效的解决方案。 - mcfisty

Answer 8

最佳方式：

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

- eloytxo

---

这似乎与OP最初尝试的没有任何区别。 - PhonicUK

抱歉，我弄错了代码。不是ImageButton，只是Button而已。 - eloytxo

Answer 9

这是一个有关圆形的简单示例：

drawable/circle.xml:

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

- basickarl

Answer 10

在按钮上展示文本(带图片)的最佳方式

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

答案: 你无法使用 imageButton 显示 text。在已接受的答案中提到的方法也无法实现。

因为

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

如果您使用 android:background="@drawable/button_bg"，则会更改您的 drawable 的颜色。

在Android世界中，有数千个选项可用于解决此问题。但是，在我看来，以下是最佳选择。

解决方案：使用带有LinearLayout的cardView

您在LinearLayout中使用了drawable/image，因为它显示在中心。通过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周围的高程线。

app:cardUseCompatPadding="true" 它提供了cardView的实际尺寸。在使用cardView时，请始终使用此选项。

将您的image/drawable设置为LinearLayout的背景。

抱歉，我的英语不好。

Happy Coding :)

- AG-Developer