Utilisation de graphiques pour afficher l'état du bouton

Détails
Catégorie : Vues, widgets et styles
Affichages : 16
Nous avons parlé de la polyvalence d'Android Views et de la façon dont le comportement et l'apparence visuelle peuvent être personnalisés. Dans cette recette, nous allons créer un sélecteur d'état drawable, qui est une ressource définie dans XML qui spécifie le drawable à utiliser en fonction de l'état de la vue.
Les états les plus couramment utilisés, avec les valeurs possibles, comprennent:
Pour définir un sélecteur d'état, créez un fichier XML avec l'élément <selector>, comme indiqué:
<? xml version = "1.0" encoding = "utf-8"?>
http://schemas.android.com/apk/res/android" > </selector> "><sélecteur xmlns: android = "http://schemas.android.com/apk/res/android"> </ selector>
Dans l'élément <selector>, nous définissons un <item> pour identifier le retraitable à utiliser en fonction du ou des états spécifiés. Voici un exemple d'élément <item> utilisant plusieurs états:
<item
android: drawable = "@ android: couleur / darker_gray"
android: state_checked = "vrai"
android: state_selected = "faux" />
Il est important de se rappeler que le fichier est lu de haut en bas de sorte que le premier élément qui répond aux exigences de l'état sera utilisé. Un drawable par défaut, un sans états inclus, devrait aller en dernier.
Pour cette recette, nous allons utiliser un sélecteur d'état pour changer la couleur de fond en fonction de la
ToggleButton état.

Se préparer
Créez un nouveau projet dans Android Studio et appelez-le StateSelector en utilisant les options par défaut Phone & Tablet. Lorsque vous êtes invité à entrer le type d'activité, sélectionnez Activité vide. Pour faciliter la saisie du code de cette recette, nous utiliserons une couleur comme graphique pour représenter l'état du bouton.

Comment faire...
Nous allons commencer par créer le sélecteur d'état, qui est un fichier de ressources défini avec du code XML. Nous allons ensuite configurer le bouton pour utiliser notre nouveau sélecteur d'état. Voici les étapes:
1. Créez un nouveau fichier XML dans le dossier res / drawable et appelez-le: state_selector. xml. Le fichier doit être constitué du code XML suivant:
<? xml version = "1.0" encoding = "utf-8"?>
http://schemas.android.com/apk/res/ android"> "><sélecteur xmlns: android = "http://schemas.android.com/apk/res/ android">
<item
android: drawable = "@ android: couleur / darker_gray"
android: state_checked = "vrai" />
<item
android: drawable = "@ android: couleur / blanc"
android: state_checked = "faux" />
</ selector>
2. Maintenant, ouvrez le fichier activity_main.xml et placez un ToggleButton comme suit:
<ToggleButton
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: text = "Nouveau ToggleButton"
android: id = "@ + id / toggleButton"
android: layout_centerVertical = "vrai"
android: layout_centerHorizontal = "vrai"
android: background = "@ drawable / state_selector" />
3. Exécutez l'application sur un périphérique ou un émulateur.
dm-

 
Comment ça marche...
Le concept principal à comprendre ici est le sélecteur d'état Android. Comme indiqué à l'étape 2, nous avons créé un fichier de ressources qui spécifiait un drawable (une couleur dans ce cas) basé sur
state_checked.
Android prend en charge de nombreuses autres conditions d'état en plus cochée. En tapant android: state, regardez la liste déroulante autocomplete pour voir la liste des autres options.
Une fois que la ressource dessinable est créée (le XML de l'étape 1), il suffit de dire à la vue de l'utiliser. Puisque nous voulions que la couleur de fond change en fonction de l'état, nous utilisons
l'androïde: propriété d'arrière-plan.
state_selector.xml est une ressource pouvant être dessinée qui peut être transmise à n'importe quelle propriété qui accepte un drawable. Nous pourrions, par exemple, remplacer le bouton dans une case à cocher avec le code XML suivant:
android: button = "@ drawable / state_selector"
Il y a plus...
Et si nous voulions des images réelles pour les graphiques au lieu d'un simple changement de couleur? C'est aussi simple que de changer le drawable référencé dans l'état de l'objet.
https://pixabay.com/ (this was chosen because the images are free to use and didn't require a login.) ">Le code source disponible pour le téléchargement utilise deux images graphiques, téléchargées depuis: https://pixabay.com/ (ceci a été choisi parce que les images sont libres d'utilisation et ne nécessitaient pas de connexion.)
Une fois que vous avez vos images désirées, placez-les dans le dossier res / drawable. Ensuite, modifiez la ligne d'élément d'état dans le fichier XML pour référencer vos images. Voici un exemple:
<item
android: drawable = "@ drawable / checked_on"
android: state_checked = "vrai" />
(Modifiez check_on pour qu'il corresponde au nom de votre ressource d'image.)
Utilisation de dossiers désignés pour les ressources spécifiques à l'écran
Lorsque Android rencontre une référence @drawable, il s'attend à trouver la cible dans l'un des dossiers res / drawable. Ils sont conçus pour différentes densités d'écran: ldpi (points bas par pouce), mdpi (moyen), hdpi (haut) et xhdpi (extra-haut) et ils nous permettent de créer des ressources pour des périphériques cibles spécifiques. Lorsqu'une application est en cours d'exécution sur un périphérique spécifique, Android chargera les ressources à partir du dossier désigné qui correspond le mieux à la densité réelle de l'écran.
S'il trouve ce dossier vide, il essayera la correspondance la plus proche et ainsi de suite jusqu'à ce qu'il trouve la ressource nommée. À des fins de tutoriel, un ensemble distinct de fichiers pour chaque densité possible n'est pas nécessaire, et donc placer nos images dans le dossier drawable est un moyen simple d'exécuter l'exercice sur n'importe quel appareil.

Voir également
Pour un autre exemple sur la sélection des ressources Android, voir la recette sur Sélectionner un thème basé sur la version du système d'exploitation plus tard.