web-dev-qa-db-fra.com

Android activer l’affichage personnalisé du bouton

J'ai essayé de personnaliser l'apparence du bouton à bascule, mais sans succès. Voici comment je veux que ça ressemble à:

enter image description here

Quelqu'un peut-il me donner un tutoriel?

45
Mihai Bratulescu

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=""
103
Melbourne Lopes

Je ne sais pas si c'est la meilleure solution mais cela a bien fonctionné pour moi:

1 .- Décidez de la taille du bouton à bascule. Dans mon cas, largeur 56dp et hauteur 76dp.

2 .- Créer le jeu d'icônes 56px-76px pour mdpi, 84px-113px hdpi, idem pour xhdpi et xxhdpi

.- Déplacez les icônes dans le dossier pouvant être dessiné. Dans mon cas, 20 icônes 5 dans chaque dossier, nommées ic_name1_on, ic_name1_off [...] ic_name5_off

4 .- Créez les fichiers XML suivants dans un nouveau dossier appelé drawable (s'il n'existe pas encore):

  • ic_name1_toggle.xml
  • ic_name1_toggle_bg.xml
  • ic_name2_toggle.xml
  • (...)
  • ic_name5_toggle_bg.xml

5 .- Dans ic_name1_toggle.xml, le code doit être:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:state_checked="false"
        Android:drawable="@drawable/ic_name1_off" />
    <item
        Android:state_checked="true"
        Android:drawable="@drawable/ic_name1_on" />
</selector>

6 .- Dans ic_name1_toggle_bg.xml, le code doit être:

<?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_name1_toggle" />
</layer-list>

7 .- Enfin dans votre layout.xml:

<ToggleButton
                Android:id="@+id/toggleButton1"
                Android:layout_width="56dp"
                Android:layout_height="76dp"
                Android:background="@Android:color/transparent"
                Android:button="@drawable/ic_name1_toggle_bg"
                Android:textOff=""
                Android:textOn="" />
7
Iridio

Je pense que vous devez définir un arrière-plan personnalisé pour votre bouton. Consultez le Guide du développeur pour personnaliser un arrière-plan du bouton .

Cependant, à la troisième étape, créez un nouveau fichier XML dans le fichier res/drawable/ directory Utilisez ce XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/button_da"
          Android:state_checked="true" />
    <item Android:drawable="@drawable/button_nu" />
</selector>

L'élément Android:state_checked="true" est ce qui définit cet état comme arrière-plan vérifié.

Faites-moi savoir si cela fonctionne pour vous.

1
Nicholas Marshall

Créer un sélecteur

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/btn_da" Android:state_checked="true"/>
    <item Android:drawable="@drawable/btn_nu"/>
</selector>

et l'utiliser comme arrière-plan pour votre ToggleButton.

0
danik