Jak wyświetlić tekst w ImageButton?

129

Mam ImageButtoni chcę pokazać na nim tekst i obraz. Ale kiedy próbuję na emulatorze:

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

Dostaję obraz, ale bez tekstu. Jak mogę pokazać tekst? Proszę pomóż mi!

android imagebutton Võ Quang Hòa
źródło

Odpowiedzi:

279

Ponieważ nie możesz użyć android:text, polecam użyć zwykłego przycisku i jednego ze złożonych elementów do rysowania. Na przykład:

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

Można umieścić rozciągliwej gdziekolwiek chcesz za pomocą: drawableTop, drawableBottom, drawableLeftlub drawableRight.

AKTUALIZACJA

W przypadku przycisku to też działa całkiem nieźle. Umieszczenie android:backgroundjest w porządku!

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

Właśnie miałem ten problem i działa idealnie.

Cristian
źródło
2
Ta opcja działa najlepiej, chyba że potrzebujesz jakiegoś szalenie wyglądającego układu przycisków, na przykład obrazu podzielonego na dwa widoki tekstu. Pierwotnie wypróbowałem obiekt układu zdefiniowany jako widget.button, a następnie umieściłem w nim widok obrazu i widok tekstu, ale po profilowaniu tego i powyższego układu przycisku zaoszczędziłem prawie 30% czasu pomiaru, 50% czasu układu i 15 -20% czasu rysowania na moim FramLayout i spadło z 38 obiektów do 26. to całkiem spora oszczędność.
Evan R.
3
@shim drawableTop umieści drawable na górze przycisku, drawableRight na dole itp.
Cristian
1
@RenanBandeira tak, używaj setCompoundDrawables*()metod
Cristian
7
Jak mogę przeskalować obraz, aby pasował do przycisku? Albo automatycznie dopasuje obraz do przycisku.
Alston,
3
To samo pytanie co @Stallman, jak dopasować obraz do przycisku i ustawić go po lewej stronie?
appiconhero.co
63

Jest technicznie możliwe, aby umieścić podpis na, ImageButtonjeśli naprawdę chcesz to zrobić. Wystarczy umieścić TextViewnad ImageButtonużyciem FrameLayout. Pamiętaj tylko, aby nie Textviewklikać.

Przykład:

<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
źródło
To nie wydaje się działać na Lollipop, chociaż działa doskonale na innych.
Hong
2
Problem z tym podejściem polega na tym, że stan przycisku nie wpływa na tekst (wyłączony itp.) ... chyba że zrobisz to ręcznie.
TheOperator
10

Chłopaki, muszę opracować przycisk ustawień i wylogowania, użyłem poniższego kodu. wprowadź opis obrazu tutaj

    <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
źródło
4

Właściwie android:textnie jest argumentem akceptowanym przez ImageButton ale, jeśli próbujesz uzyskać przycisk z określonym tłem (nie domyślnym dla Androida), użyj android:backgroundatrybutu xml lub zadeklaruj go z klasy z.setBackground();

Samuel
źródło
4

Możesz użyć LinearLayoutzamiast Buttontego układu, którego użyłem w mojej aplikacji

 <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>
mxml
źródło
Świetne rozwiązanie! onClick działa również doskonale na LinearLayout. Nie widzę powodu, dla którego powinniśmy używać Button lub ImageButton
Sam
2

Buttonzamiast tego możesz użyć zwykłego atrybutu i atrybutu android: drawableTop (lub left, right, bottom).

Nathan Schwermann
źródło
2

Najlepszym sposobem:

<Button 
android:text="OK" 
android:id="@+id/buttonok" 
android:background="@drawable/buttonok"
android:layout_width="match_parent" 
android:layout_height="wrap_content"/>
eloytxo
źródło
2
Wydaje się, że nie różni się to od tego, co pierwotnie próbował OP.
PhonicUK
Przepraszam, pomylę mój kod. Nie był ImageButton, był tylko Button.
eloytxo
2

Rozwiązałem to, umieszczając ImageButtoni TextViewwewnątrz a LinearLayoutz orientacją pionową. Działa świetnie!

<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
źródło
1

Oto ładny przykład koła:

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>

A następnie przycisk w pliku xml:

<Button
    android:id="@+id/btn_send"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="@drawable/circle"
    android:text="OK"/>
basickarl
źródło
0

ImageButtonnie może mieć text(a przynajmniej android:textnie jest wymieniona w atrybutach).

Sztuczka to:

Wygląda na to, że musisz użyć Button(i spojrzeć na drawableToplub setCompoundDrawablesWithIntrinsicBounds(int,int,int,int)).

Ajay Venugopal
źródło
0

Oto rozwiązanie

<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>
Czarny Szaman
źródło