Как показать текст на ImageButton?


127

У меня есть, ImageButtonи я хочу показать на нем текст и изображение. Но когда я пробую эмулятор:

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

Я получаю изображение, но без текста. Как мне показать текст? Пожалуйста, помогите мне!

Ответы:


274

Поскольку вы не можете использовать, android:textя рекомендую вам использовать обычную кнопку и использовать один из составных чертежей. Например:

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

Вы можете поместить Drawable туда , куда вы хотите с помощью: 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" />

У меня была эта проблема, и я отлично работаю.


2
Этот вариант работает лучше всего, если вам не нужен какой-то безумно выглядящий макет кнопок, например изображение, зажатое двумя текстовыми окнами. Первоначально я пробовал объект макета, определенный как widget.button, затем поместил в него изображение и текст, но после профилирования этого и макета кнопки выше я сэкономил почти 30% времени измерения, 50% времени макета и 15 -20% времени прорисовки на моем FramLayout и уменьшилось с 38 объектов до 26. Это довольно значительная экономия.
Эван Р.

3
@shim drawableTop разместит drawable вверху кнопки, drawableRight внизу и т. д.
Cristian

1
@RenanBandeira, да, используйте setCompoundDrawables*()методы
Кристиан

6
Как масштабировать изображение по размеру кнопки? Или он автоматически настроит изображение, чтобы оно соответствовало кнопке.
Alston

3
Тот же вопрос, что и у @Stallman, как совместить изображение с кнопкой и установить его влево?
Кхыонг

63

Технически возможно поставить подпись на ImageButton если вы действительно этого хотите. Просто положите TextViewконец ImageButtonиспользованию FrameLayout. Только не забудьте сделать 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>

Кажется, это не работает на Lollipop, хотя отлично работает на других.
Гонконг,

2
Проблема с этим подходом заключается в том, что на текст не влияет состояние кнопки (отключено и т. Д.) ... если вы не сделаете это вручную.
TheOperator

9

Ребята, мне нужно разработать кнопку настройки и выхода, я использовал приведенный ниже код. введите описание изображения здесь

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

4

На самом деле, android:textэто не аргумент, принятый, ImageButton но, если вы пытаетесь получить кнопку с указанным фоном (не по умолчанию для Android), используйте android:backgroundатрибут xml или объявите его из класса с.setBackground();


4

Вы можете использовать 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>

Отличное решение! onClick отлично работает и с LinearLayout. Не вижу причин, по которым мы должны использовать Button или ImageButton
Сэм


2

Лучший способ:

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

2
Похоже, это не отличается от того, что изначально пытался OP.
PhonicUK

Извините, я ошибся своим кодом. Это был не ImageButton, а просто Button.
eloytxo

2

Я решил это, поместив 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>

1

Вот хороший пример круга:

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

0

ImageButtonне может иметь text(или, по крайней мере, android:textне указан в его атрибутах).

Уловка заключается в следующем:

Похоже, вам нужно использовать Button(и посмотрите drawableTopили setCompoundDrawablesWithIntrinsicBounds(int,int,int,int)).

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.