Android: crea un pulsante di commutazione con immagine e senza testo

Question

è possibile creare un pulsante di commutazione in Android che ha un'immagine ma nessun testo? Idealmente sarebbe simile a questa:

Ho visto i messaggi simili in cui la risposta è stata di cambiare lo sfondo ma voglio mantenere il layout Holo Luce e basta scambiare il testo con un'immagine.

ho bisogno di essere in grado di cambiare programaticallly l'origine dell'immagine,

Tutte le idee come vorrei fare questo?

Se questo non può essere fatto, c'è un modo in cui posso attivare e disattivare un normale pulsante?

Answer 1

1. Posso sostituire il testo ginocchiera con un'immagine

   No, non possiamo, anche se siamo in grado di nascondere il testo dal overiding lo stile di default del pulsante di commutazione, ma ancora che non si dacci un pulsante di attivazione che desideri dato che non possiamo sostituire il testo con un'immagine.

2. Come posso fare un normale pulsante di commutazione

   Creare un file ic_toggle nella cartella res/drawable

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

   Qui @drawable/ic_slide_switch_on & @drawable/ic_slide_switch_off sono immagini create.

   Quindi creare un altro file nella stessa cartella, il nome 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> 
   

   Ora aggiungere al vostro tema personalizzato, (se non si dispone di uno creare un file nella cartella styles.xml res/values/)

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

   Questo crea un pulsante di attivazione personalizzato per voi.

3. Come si usa

   utilizzare lo stile personalizzato e lo sfondo nella vista.

   <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 eredita da TextView modo da poter impostare drawable da visualizzare ai 4 bordi del testo.È possibile utilizzare che per visualizzare l'icona desiderata sulla parte superiore del testo e nascondere il testo effettivo

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

Il risultato rispetto al normale ToggleButton sembra

L'opzione secondi è quella di utilizzare un ImageSpan per sostituire effettivamente il testo con un'immagine. Sembra leggermente migliore poiché l'icona è nella posizione corretta ma non può essere eseguita direttamente con il layout xml.

si crea una pianura ToggleButton

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

Quindi impostare il "testo" 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); 

Il risultato qui in mezzo - icona viene posizionata leggermente più basso dal momento che prende il posto del testo .

Answer 3

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

applicano il selettore al pulsante di commutazione

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

Nota: per rimuovere il testo ho usato seguente nel codice sopra

textOff="" 
textOn="" 

Answer 4

So che questo è un po 'tardi, ma per chiunque sia interessato, ho creato un componente personalizzato che è fondamentalmente un pulsante immagine a ginocchiera, drawable può avere stati così come sfondo

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