Android: Kombination von Text und Bild auf einem Button oder ImageButton

Question

Ich versuche, ein Bild (als Hintergrund) auf einer Schaltfläche zu haben und fügen Sie dynamisch, je nachdem, was während der Laufzeit geschieht, etwas Text über/über das Bild.

Wenn ich die ImageButton Ich habe nicht einmal die Möglichkeit, Text hinzuzufügen. Wenn ich Button Ich kann Text hinzufügen, aber nur ein Bild definieren mit android:drawableBottom und ähnliche XML-Attribute wie definiert ici .

Diese Attribute kombinieren jedoch nur Text und Bild in x- und y-Dimensionen, d. h. ich kann ein Bild um meinen Text herum zeichnen, aber nicht unter/unter meinem Text (wobei die z-Achse so definiert ist, dass sie aus der Anzeige herauskommt).

Haben Sie einen Vorschlag, wie man das machen kann? Eine Idee wäre, entweder die Button ou ImageButton und überschreiben Sie die draw() -Methode. Aber mit meinem derzeitigen Wissensstand weiß ich nicht wirklich, wie man das macht (2D-Rendering). Vielleicht weiß jemand mit mehr Erfahrung eine Lösung oder zumindest einige Hinweise zu beginnen?

Answer 1

Einfach ersetzen

android:background="@drawable/icon"

mit

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

Das ist ein ziemlich guter Trick ;)

Answer 2

Ich habe einen anderen Ansatz als die hier genannten gewählt, und er funktioniert wirklich gut, so dass ich ihn mit Ihnen teilen möchte.

Ich verwende einen Stil, um eine benutzerdefinierte Schaltfläche mit einem Bild auf der linken Seite und einem Text in der Mitte rechts zu erstellen. Folgen Sie einfach den 4 "einfachen Schritten" unten:

I. Erstellen Sie Ihre 9 Patches mit mindestens 3 verschiedenen PNG-Dateien und dem Tool, das Sie unter: /YOUR_OWN_PATH/Android-sdk-mac_x86/tools/./draw9patch. Danach solltest du folgendes haben:

button_normal.9.png, button_focused.9.png und button_pressed.9.png

Laden Sie dann ein 24x24 PNG-Symbol herunter oder erstellen Sie ein solches.

ic_Ihr_Icon.png

Speichern Sie alles in dem Ordner drawable/ in Ihrem Android-Projekt.

II. Erstellen Sie eine XML-Datei mit dem Namen button_selector.xml in Ihrem Projekt unter dem Ordner drawable/. Die Zustände sollten wie folgt aussehen:

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

III. Gehen Sie zum Ordner values/ und öffnen oder erstellen Sie die Datei styles.xml und erstellen Sie den folgenden XML-Code:

<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 ist ein "untergeordneter Stil", weil er ButtonNormalText (den "übergeordneten Stil") erweitert.

Beachten Sie, dass Sie durch Ändern von drawableLeft im Stil ButtonNormalTextWithIcon in drawableRight, drawableTop oder drawableBottom das Symbol in einer anderen Position in Bezug auf den Text platzieren können.

IV. Gehen Sie in den Ordner "Layout/Ordner", in dem Sie Ihr XML für die Benutzeroberfläche gespeichert haben, und gehen Sie zu der Schaltfläche, auf die Sie den Stil anwenden möchten, und lassen Sie sie so aussehen:

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

Und... voilà! Sie haben Ihren Button mit einem Bild auf der linken Seite.

Für mich ist das der bessere Weg! Denn so kann man die Textgröße der Schaltfläche getrennt vom anzuzeigenden Symbol verwalten und dieselbe Hintergrundgrafik für mehrere Schaltflächen mit unterschiedlichen Symbolen verwenden, wobei die Android UI Guidelines mit Stilen eingehalten werden.

Sie können auch ein Thema für Ihre App erstellen und den "übergeordneten Stil" hinzufügen, damit alle Schaltflächen gleich aussehen, und den "untergeordneten Stil" mit dem Symbol nur dort anwenden, wo Sie es benötigen.

Answer 3

Wichtiges Update

Verwenden Sie keine normalen android:drawableLeft etc... mit Vektor-Drawables, sonst wird es wird Absturz en niedrigere API-Versionen . (Ich habe es in der Live-App erlebt)

Für vektorielle Zeichengeräte

Wenn Sie eine Vektor-Zeichenfläche verwenden, dann müssen Sie

• Haben Sie auf AndroidX migriert? Wenn nicht, müssen Sie zuerst auf AndroidX migrieren. Es ist sehr einfach, siehe Was ist androidx, und wie kann man es migrieren?

• Es wurde veröffentlicht in der Version 1.1.0-alpha01 also sollte die appcompat-Version mindestens 1.1.0-alpha01 . Die aktuellste Version ist 1.1.0-alpha02 verwenden Sie die neuesten Versionen für bessere Zuverlässigkeit, siehe Versionshinweise - enlace .

  implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'

• 使用方法 AppCompatTextView / AppCompatButton / AppCompatEditText

• 使用方法 app:drawableLeftCompat , app:drawableTopCompat , app:drawableRightCompat , app:drawableBottomCompat , app:drawableStartCompat y app:drawableEndCompat

Für regelmäßige Auslosungen

Wenn Sie keine Vektorgrafik benötigen, dann können Sie

• utiliser android:drawableLeft , android:drawableRight , android:drawableBottom , android:drawableTop
• Sie können entweder normale TextView , Button & EditText o AppCompat Klassen.

Sie können Folgendes erreichen Ausgabe wie unten -

Answer 4

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

Answer 5

Sie können verwenden drawableTop (auch drawableLeft usw.) für das Bild und setzen Sie Text unter das Bild, indem Sie die gravity left|center_vertical

<Button
            android:id="@+id/btn_video"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@null"
            android:drawableTop="@drawable/videos"
            android:gravity="left|center_vertical"
            android:onClick="onClickFragment"
            android:text="Videos"
            android:textColor="@color/white" />