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

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:

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?

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

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

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.

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

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