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.