Bouton bascule utilisant deux images sur un état différent


101

Je dois créer un bouton à bascule en utilisant deux images au lieu de l'état ON / OFF.

À l'état désactivé, j'ai défini une image d'arrière-plan, mais le texte OFF ne peut pas être supprimé lorsque j'utilise l'image d'arrière-plan.

Et je ne peux pas définir une autre image sur l'état ON en cliquant sur le bouton bascule: (Je suis nouveau dans Android. J'espère que vous m'aiderez à sortir de ce problème


Réponses:


219

Faites ceci:

<ToggleButton 
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/check"   <!--check.xml-->
        android:layout_margin="10dp"
        android:textOn=""
        android:textOff=""
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:layout_centerVertical="true"/>

créer check.xml dans un dossier dessinable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/selected_image"
          android:state_checked="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/unselected_image"
        android:state_checked="false"/>

 </selector>

1
Ajoutez deux images (sélectionnées / non sélectionnées) dans check.xml qui fonctionneront comme deux états différents du bouton bascule
AkashG

19
Avez-vous rencontré un problème d'étirement de l'arrière-plan?
Mike Bevz

2
android: textOn = "" android: textOff = "" était ce que je cherchais
png

9
Puisqu'il semble que d'autres aient également eu ce problème, j'ajoute ma solution ici. Ajoutez android:background="@null"et android:drawableRight="@drawable/check". Habituellement, j'ai trouvé que les boutons à bascule sont justifiés à droite. Si vous en avez besoin justifié à gauche, utilisezandroid:drawableLeft
Patrick

1
@Patrick Mais que faire si vous voulez que le centre soit justifié? ... sur tous les appareils. Alors n'entrons pas dans les marges et le remplissage.
Martin Erlic

47

La solution d'AkashG ne fonctionne pas pour moi. Lorsque je configure check.xml en arrière-plan, il est simplement étiré dans le sens vertical. Pour résoudre ce problème, vous devez configurer check.xml sur la propriété "android: button":

<ToggleButton 
    android:id="@+id/toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/check"   //check.xml
    android:background="@null"/>

check.xml:

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/selected_image"
          android:state_checked="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/unselected_image"
          android:state_checked="false"/>
    </selector>

10
ToggleButton a le parent CompoundButton. Et CompoundButton a l'attribut android: button: developer.android.com/reference/android/…
MistaGreen

3
Cela devrait être la bonne réponse. La réponse acceptée entraîne des tiroirs étirés.
Bamerza

Si les images ont de la transparence, android:background="@android:color/transparent"peuvent être utilisées
Pavel

@Bamerza, non cela ne s'applique pas non plus à tous les cas. Si vous essayez avec .svg, vous obtiendrez un arrière-plan étiré.
Farid

2

Vous pouvez essayer quelque chose comme ça. Ici, en cliquant sur le bouton d'image, je bascule la vue d'image.

holder.imgitem.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            if(!onclick){
            mSparseBooleanArray.put((Integer) view.getTag(), true);
            holder.imgoverlay.setImageResource(R.drawable.ipad_768x1024_editmode_delete_overlay_com);
            onclick=true;}
            else if(onclick)
            {
                 mSparseBooleanArray.put((Integer) view.getTag(), false);
                  holder.imgoverlay.setImageResource(R.drawable.ipad_768x1024_editmode_selection_com);

            onclick=false;
            }
        }
    });
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.