Bouton personnalisé

Dans cette section, vous allez créer un bouton avec une image personnalisée au lieu de texte, à l’aide du Button widget et d’un fichier XML qui définit trois images différentes à utiliser pour les différents états de bouton. Lorsque vous appuyez sur le bouton, un message court s’affiche.

Cliquez avec le bouton droit et téléchargez les trois images ci-dessous, puis copiez-les dans le répertoire Ressources/dessinable de votre projet. Celles-ci seront utilisées pour les différents états de bouton.

Créez un fichier dans le répertoire Resources/drawable nommé android_button.xml. Insérez le code XML suivant :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/android_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/android_focused"
          android:state_focused="true" />
    <item android:drawable="@drawable/android_normal" />
</selector>

Cela définit une seule ressource dessinable, qui modifie son image en fonction de l’état actuel du bouton. La première <item> définit android_pressed.png comme l’image lorsque le bouton est appuyé (il a été activé), le second <item> définit android_focused.png comme image lorsque le bouton est mis en surbrillance (lorsque le bouton est mis en surbrillance à l’aide du trackball ou du pavé directionnel) et le troisième <item> définit android_normal.png comme image pour l’état normal (quand ni appuyé ni mis au point). Ce fichier XML représente désormais une seule ressource dessinable et, lorsqu’il est référencé par un Button pour son arrière-plan, l’image affichée change en fonction de ces trois états.

Notes

L’ordre des <item> éléments est important. Lorsque ce dessinable est référencé, les <item>s sont parcourus pour déterminer celui qui convient à l’état actuel du bouton. Étant donné que l’image « normale » est la dernière, elle est appliquée uniquement lorsque les conditions android:state_pressed et android:state_focused ont tous les deux évalué false.

Ouvrez le fichier Resources/layout/Main.axml et ajoutez l’élément Button :

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:background="@drawable/android_button" />

L’attribut android:background spécifie la ressource dessinable à utiliser pour l’arrière-plan du bouton (qui, lorsqu’il est enregistré dans Resources/drawable/android.xml, est référencé en tant que @drawable/android). Cela remplace l’image d’arrière-plan normale utilisée pour les boutons dans l’ensemble du système. Pour que le dessinable change son image en fonction de l’état du bouton, l’image doit être appliquée à l’arrière-plan.

Pour faire en sorte que le bouton fasse quelque chose lorsque vous appuyez sur le bouton, ajoutez le code suivant à la fin duMéthode OnCreate() :

Button button = FindViewById<Button>(Resource.Id.button);

button.Click += (o, e) => {
    Toast.MakeText (this, "Beep Boop", ToastLength.Short).Show ();
};

Cette opération capture le Button à partir de la disposition, puis ajoute un Toast message à afficher lorsque l’utilisateur Button clique sur .

À présent, exécutez l’application.

Les parties de cette page sont des modifications basées sur le travail créé et partagé par le projet Open Source Android et utilisé selon les termes décrits dans lalicence d’attribution Creative Commons 2.5.