web-dev-qa-db-fra.com

Android: Créer un bouton bascule avec image et pas de texte

est-il possible de créer un bouton bascule dans Android qui a une image mais pas de texte? Idéalement, cela devrait ressembler à ceci:

Toggle Button With Image

J'ai vu des messages similaires où la réponse était de changer l'arrière-plan mais je veux préserver la mise en page de Holo Light et simplement échanger le texte avec une image.

Je dois pouvoir programmer par la même occasion la source de l'image,

Des idées comment je ferais ceci?

Si cela ne peut pas être fait, y a-t-il un moyen que je puisse créer et désactiver un bouton normal?

androidcustomizationtogglebutton
69
Edd

  1. Puis-je remplacer le texte bascule par une image

    Non, nous ne pouvons pas, bien que nous puissions masquer le texte en écrasant le style par défaut du bouton à bascule, mais cela ne nous donnera toujours pas le bouton à bascule que vous souhaitez, car nous ne pouvons pas remplacer le texte par une image.

  2. Comment puis-je faire un bouton bascule normal

    Créez un fichier ic_toggle dans votre dossier 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>

    Ici @drawable/ic_slide_switch_on & @drawable/ic_slide_switch_off Sont des images que vous créez.

    Puis créez un autre fichier dans le même dossier, nommez-le 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>

    Ajoutez maintenant à votre thème personnalisé (si vous n'en avez pas, créez un fichier styles.xml dans votre dossier 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>

    Cela crée un bouton de basculement personnalisé pour vous.

  3. Comment l'utiliser

    Utilisez le style et l'arrière-plan personnalisés dans votre vue.

      <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"/>
105
Rachit Mishra

ToggleButton hérite de TextView afin que vous puissiez définir les éléments dessinables à afficher aux 4 bordures du texte. Vous pouvez l'utiliser pour afficher l'icône que vous voulez en haut du texte et masquer le texte

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

Le résultat comparé à la normale ToggleButton ressemble à

enter image description here

L'option secondes est d'utiliser un ImageSpan pour remplacer le texte par une image. Ça semble un peu mieux, car l’icône est à la bonne position mais cela ne peut pas être fait directement avec layout XML.

Vous créez un simple ToggleButton

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

Puis définissez le "texte" par programmation

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

Le résultat ici dans le milieu - l'icône est placée légèrement plus bas car elle prend la place du texte.

enter image description here

63
zapl

créez toggle_selector.xml dans 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>

appliquer le sélecteur à votre bouton bascule

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

Remarque: pour supprimer le texte que j'ai utilisé ci-dessous dans le code ci-dessus

textOff=""
textOn=""
52
Melbourne Lopes

Je sais que c'est un peu tard, mais pour les personnes intéressées, j'ai créé un composant personnalisé qui est essentiellement un bouton à bascule d'image. Le dessin peut avoir des états ainsi que l'arrière-plan.

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

11
akshaydashrath