Android: Erstellen Sie eine Umschaltfläche mit Bild und ohne Text

73

Ist es möglich, in Android eine Umschalttaste zu erstellen, die ein Bild, aber keinen Text enthält? Im Idealfall würde es so aussehen:

Umschalttaste mit Bild

Ich habe ähnliche Beiträge gesehen, in denen die Antwort darin bestand, den Hintergrund zu ändern, aber ich möchte das Holo Light-Layout beibehalten und einfach den Text mit einem Bild austauschen.

Ich muss in der Lage sein, die Bildquelle programmgesteuert zu ändern.

Irgendwelche Ideen, wie ich das machen würde?

Wenn dies nicht möglich ist, gibt es eine Möglichkeit, einen normalen Knopf ein- und auszuschalten?

Eduardo
quelle
Es gibt keine einfache Möglichkeit für AFAIK, Text durch ein Bild zu ersetzen, außer das gesamte Hintergrundbild mit zwei Zuständen durch das gewünschte zu ersetzen. Sie könnten versuchen , wenn Sie den Text festlegen können das Bild über seinen ImageSpan wie in stackoverflow.com/questions/7616437/imagespan-in-a-widget
zapl

Antworten:

116
  1. Kann ich den Umschalttext durch ein Bild ersetzen?

    Nein, das können wir nicht, obwohl wir den Text ausblenden können, indem wir den Standardstil der Umschalttaste überschreiben. Dies gibt uns jedoch keine gewünschte Umschalttaste, da wir den Text nicht durch ein Bild ersetzen können.

  2. Wie kann ich eine normale Umschalttaste erstellen?

    Erstellen Sie eine Datei ic_toggle in Ihrem res/drawableOrdner

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:state_checked="false"
              android:drawable="@drawable/ic_slide_switch_off" />
    
        <item android:state_checked="true"
              android:drawable="@drawable/ic_slide_switch_on" />
    
    </selector>
    

    Hier @drawable/ic_slide_switch_on& @drawable/ic_slide_switch_offsind Bilder, die Sie erstellen.

    Erstellen Sie dann eine weitere Datei im selben Ordner und nennen Sie sie ic_toggle_bg

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:id="@+android:id/background"  
              android:drawable="@android:color/transparent" />
    
        <item android:id="@+android:id/toggle"
              android:drawable="@drawable/ic_toggle" />
    
    </layer-list>
    

    Fügen Sie nun Ihrem benutzerdefinierten Design hinzu (falls Sie noch keines haben, erstellen Sie eine Datei styles.xml in Ihrem res/values/Ordner).

    <style name="Widget.Button.Toggle" parent="android:Widget">
       <item name="android:background">@drawable/ic_toggle_bg</item>
       <item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
    </style>
    
    <style name="toggleButton"  parent="@android:Theme.Black">
       <item name="android:buttonStyleToggle">@style/Widget.Button.Toggle</item>
       <item name="android:textOn"></item>
       <item name="android:textOff"></item>
    </style>
    

    Dadurch wird eine benutzerdefinierte Umschalttaste für Sie erstellt.

  3. Wie man es benutzt

    Verwenden Sie den benutzerdefinierten Stil und Hintergrund in Ihrer Ansicht.

      <ToggleButton
            android:id="@+id/toggleButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            style="@style/toggleButton"
            android:background="@drawable/ic_toggle_bg"/>
    
Rachit Mishra
quelle
1
Das ist genial, danke. Gibt es irgendwo, wo ich die @ drawable / ic_slide_switch_on und off-Bilder finden kann, die für die Holo Light Toggle Buttons verwendet werden?
Eduardo
2
Sie befinden sich in sdk\platforms\android-17\data\res\drawable-hdpibtn_toggle-Dateien. Sie können auch diese android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
Rachit Mishra
1
Vielen Dank! Wenn ich dich mehr als einmal abstimmen könnte, würde ich :)
Eduardo
3
stackoverflow.com/a/11499595/4896468 Dieses einzige Set backgroundscheint einfacher zu sein
Yurenchen
Ich hatte zu ersetzen @+android:id/togglemit diesem , um es richtig haben zu arbeiten. Ansonsten war es genau die gleiche Lösung, die ich verwendet habe.
Isakbob
64

ToggleButtonerbt von, TextViewso dass Sie Drawables festlegen können, die an den 4 Rändern des Textes angezeigt werden sollen. Sie können dies verwenden, um das gewünschte Symbol über dem Text anzuzeigen und den tatsächlichen Text auszublenden

<ToggleButton
    android:id="@+id/toggleButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@android:drawable/ic_menu_info_details"
    android:gravity="center"
    android:textOff=""
    android:textOn=""
    android:textSize="0dp" />

Das Ergebnis im Vergleich zu normalen ToggleButtonsieht aus

Geben Sie hier die Bildbeschreibung ein

Die Sekunden-Option besteht darin ImageSpan, den Text tatsächlich durch ein Bild zu ersetzen. Sieht etwas besser aus, da sich das Symbol an der richtigen Position befindet, aber nicht direkt mit Layout-XML ausgeführt werden kann.

Sie erstellen eine Ebene ToggleButton

<ToggleButton
    android:id="@+id/toggleButton3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="false" />

Stellen Sie dann den "Text" programmgesteuert ein

ToggleButton button = (ToggleButton) findViewById(R.id.toggleButton3);
ImageSpan imageSpan = new ImageSpan(this, android.R.drawable.ic_menu_info_details);
SpannableString content = new SpannableString("X");
content.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
button.setText(content);
button.setTextOn(content);
button.setTextOff(content);

Das Ergebnis hier im mittleren Symbol wird etwas niedriger platziert, da es den Text ersetzt.

Geben Sie hier die Bildbeschreibung ein

zapl
quelle
Gute Idee, ich habe nie die ausziehbaren Optionen auf Togglebutton gesehen
Eduardo
1
@clairharrison Wenn Sie ein TextViewund ein haben ImageView, bekommen Sie oft das: stackoverflow.com/questions/8318765/… - so kam ich auf diese Idee :)
zapl
ImageSpan hat bei mir hervorragend funktioniert. Ich wollte eigentlich eine ToggleButton, die wie eine normale Button(ohne den blauen Balken) mit verschiedenen Ein / Aus-Bildern aussieht, also aktualisiere ich den ImageSpan-Ein-Knopf-Klick mit einem neuen Bild basierend auf Aus isChecked().
Josh
58

Erstellen Sie toggle_selector.xml in res / drawable

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/toggle_on" android:state_checked="true"/>
  <item android:drawable="@drawable/toggle_off" android:state_checked="false"/>
</selector>

Wenden Sie den Selektor auf Ihre Umschalttaste an

<ToggleButton
            android:id="@+id/chkState"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/toggle_selector"
            android:textOff=""
            android:textOn=""/>

Hinweis: Zum Entfernen des Textes, den ich im obigen Code verwendet habe

textOff=""
textOn=""
Melbourne Lopes
quelle
1
Ich denke, das ist einfach. Es hat funktioniert, danke!
Daniel
4
Sauber und einfach! Diese Antwort sollte mehr positive Stimmen haben!
Swayam
Weiß jemand, wie man seine vertikale Position anpasst, ohne eine negative Zahl am Rand / Abstand zu verwenden?
Ken Ratanachai S.
Ich habe diese Antwort genau so verwendet, wie sie dargestellt wird, und habe diesen Fehler erhalten. Der ursprüngliche Schalter wird weiterhin über dem Hintergrund angezeigt.
Birrel
In der Tat die sauberste und am einfachsten zu verstehende und wiederverwendbare.
Ajit
12

Ich weiß, dass dies etwas spät ist, aber für alle Interessierten habe ich eine benutzerdefinierte Komponente erstellt, bei der es sich im Grunde um eine Schaltfläche zum Umschalten des Bildes handelt. Das Zeichenelement kann sowohl Zustände als auch den Hintergrund haben

https://gist.github.com/akshaydashrath/9662072

Akshaydashrath
quelle