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

Question

ist es möglich, eine Umschaltfläche in Android, die ein Bild, aber keinen Text hat? Im Idealfall würde es so aussehen:

Ive Ähnliche Beiträge gesehen, wo die Antwort den Hintergrund zu ändern war, aber ich mag das Holo-Licht Layout erhalten und tauschen Sie einfach den Text mit einem Bild.

Ich muss in der Lage sein programaticallly, um die Bildquelle zu ändern,

Irgendwelche Ideen, wie ich das machen würde?

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

Answer 1

1. Kann ich ersetzen Sie den Toggle-Text mit einem Bild

   Nein, können wir nicht, auch wenn wir den Text von overiding den Standardstil der Umschaltknopf verstecken können, aber das wird noch nicht Geben Sie uns eine Umschalttaste, die Sie möchten, da wir den Text nicht durch ein Bild ersetzen können.

2. Wie kann ich eine normale Umschaltknopf machen

   eine Datei

   ic_toggle in Ihrem res/drawable Ordner erstellen

   <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_off Bilder sind Sie erstellen.

   Dann eine andere Datei im gleichen Ordner erstellen, nennen Sie es 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> 
   

   Nun zu Ihrer benutzerdefinierten Thema hinzufügen, (wenn Sie nicht über eine styles.xml Datei in Ihrem res/values/ Ordner erstellen)

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

   Dies erstellt eine benutzerdefinierte Umschaltfläche für Sie.

3. Wie man es verwendet

   den benutzerdefinierten Stil und Hintergrund Ihrer Ansicht verwenden.

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

Answer 2

ToggleButton erbt von TextView so können Sie Drawables gesetzt an den vier Rändern des Textes angezeigt werden.Sie können das verwenden das Symbol, das Sie auf dem Text und dem

eigentlichen Text im Vergleich zu regulären ToggleButton

<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 ausblenden möchten anzuzeigen

sieht aus wie

Die Sekunden Option zu verwenden ist ein ImageSpan, um den Text tatsächlich durch ein Bild zu ersetzen. Sieht etwas besser aus, da das Symbol an der richtigen Position ist, aber nicht direkt mit Layout-XML.

Sie erstellen einen einfachen ToggleButton

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

Sie dann den „Text“ programmatially

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 in der Mitte - Symbol etwas niedriger platziert ist, da es an die Stelle des Textes nimmt .

Answer 3

erstellen toggle_selector.xml in res/ziehbar

<?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> 

die Wähler auf Ihre Umschaltknopf anwenden

<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 i in obigem Code folgenden verwendet

textOff="" 
textOn="" 

Answer 4

Ich weiß, dass dies ein wenig spät ist, aber für alle Interessierten, ich eine benutzerdefinierte Komponente erstellt haben, die im Grunde eine Toggle-Schaltfläche Bild ist, kann die ziehbar Staaten haben sowie den Hintergrund

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