Icônes du pointeur de la souris

Les utilisateurs Android accèdent à votre application depuis différents types de facteurs de forme (téléphones, tablettes, appareils pliables et Chromebooks, par exemple). Lorsqu'ils interagissent avec votre application, en particulier sur les grands écrans, les utilisateurs peuvent également utiliser un dispositif de pointage tel qu'une souris à trois boutons. Les applications Android permettent d'appliquer différents styles au pointeur de la souris pour aider les utilisateurs à savoir visuellement qu'ils peuvent interagir avec un objet.

Utiliser les curseurs système par défaut

Les utilisateurs connaissent différentes conventions pour interagir avec différents types d'objets sur les appareils à grand écran. Android fournit aux développeurs certaines des icônes de curseur les plus courantes que les utilisateurs connaissent. Vous pouvez ajouter ces icônes de curseur système par défaut en quelques lignes de code. Examinons l'extrait de code Kotlin suivant : 

myView.setOnHoverListener { view, _ ->
      view.pointerIcon =
         PointerIcon.getSystemIcon(applicationContext, PointerIcon.TYPE_HAND)
      false // Listener did not consume the event.
}

Dans cet exemple, myView est la vue qui sera définie sur une icône de pointeur dans certaines conditions. La condition présentée ici est un état de survol, qui se produit lorsque le pointeur de la souris se trouve sur une vue. Dans d'autres scénarios, vous pouvez souhaiter afficher une icône d'attente pendant le traitement ou un réticule dans un jeu.

setOnHoverListener écoute le moment où le pointeur passe à l'état de survol, puis agit en conséquence. Dans l'écouteur d'événements, view.pointerIcon est appelé pour définir l'icône du pointeur pour cette vue spécifique. Une icône système existante est utilisée pour définir l'icône du pointeur.

Android intègre plusieurs icônes système. Vous trouverez la liste complète en bas de cette page. L'icône TYPE_HAND, qui représente une main fermée avec l'index tendu, a été utilisée.

Utiliser votre propre curseur spécial

// Loading a bitmap to use as a pointer icon
    BitmapFactory.decodeResource(
        this.resources,
        R.drawable.dollar_sign
    ), CURSOR_WIDTH, CURSOR_HEIGHT, false
)

// Creating the pointer icon and sending clicks from the center of the mouse icon
PointerIcon.create(dollarBitmap, (CURSOR_WIDTH/2).toFloat(), (CURSOR_HEIGHT/2).toFloat())

Remarque : L'emplacement du point d'accès dépend de votre cas d'utilisation. Par exemple, une application de dessin définirait la zone cliquable comme étant la pointe du stylo ou du pinceau.

Exemples

Ajouter des icônes de pointeur à votre application est un excellent moyen d'aider vos utilisateurs à profiter d'une expérience plus intuitive sur les différents facteurs de forme d'appareils qu'ils utilisent. De nombreuses icônes système par défaut sont disponibles. Si elles ne répondent pas à vos besoins, vous pouvez toujours charger ou créer les vôtres.

  • Glisser-déposer : si votre application permet de faire glisser des éléments depuis une autre application et de les déposer dans votre application, vous pouvez implémenter l'icône TYPE_NO_DROP. Cela indiquerait visuellement que votre application n'est pas compatible avec le type MIME qui tente d'être déposé dans votre application.
  • Cartographie : si vous disposez d'une application de cartographie et que vous souhaitez montrer aux utilisateurs qu'ils peuvent faire glisser la carte, vous pouvez leur proposer l'icône TYPE_GRAB lorsqu'ils pointent sur la carte. Lorsque l'utilisateur clique, vous pouvez remplacer l'icône par une main qui saisit pour indiquer qu'il fait un panoramique de la carte.
  • Retouche photo : les utilisateurs qui retouchent des photos aiment disposer de commandes qui leur permettent de sélectionner une loupe pour faire un zoom avant. Vous pouvez remplacer le curseur par une loupe avec l'icône TYPE_ZOOM_IN lorsque le mode Zoom avant est sélectionné.
  • Et bien d'autres opportunités

Remarque : Pour voir différents changements de pointeur en action, consultez l'exemple de pointeur GitHub.

Icônes de pointeur personnalisées dans une application Android.

Annexe

Autres ressources

Curseurs système par défaut

Voici les curseurs disponibles par défaut dans le système Android.

Nom du curseur Icône
TYPE_ALIAS Curseur d'alias, une flèche avec une petite flèche incurvée à côté.
TYPE_ALL_SCROLL Curseur de défilement complet, un cercle avec quatre flèches pointant vers l'extérieur.
TYPE_ARROW Curseur flèche standard.
TYPE_CELL Curseur de cellule
TYPE_CONTEXT_MENU Curseur du menu contextuel, une flèche avec une petite icône de menu à côté.
TYPE_COPY Curseur de copie, une flèche avec un signe plus à côté.
TYPE_CROSSHAIR Curseur en forme de croix, un signe plus avec un point au centre.
TYPE_DEFAULT Curseur flèche par défaut.
TYPE_GRAB Curseur de déplacement, une main ouverte.
TYPE_GRABBING Curseur de saisie, une main fermée.
TYPE_HAND Curseur en forme de main, avec l'index pointant.
TYPE_HELP Curseur d'aide, une flèche avec un point d'interrogation à côté.
TYPE_HORIZONTAL_DOUBLE_ARROW Curseur en forme de double flèche horizontale pour redimensionner.
TYPE_NO_DROP Curseur "Interdit", un cercle barré.
TYPE_NULL Aucun curseur ne s'affiche
TYPE_TEXT Curseur de texte en forme de I.
TYPE_TOP_LEFT_DIAGONAL_DOUBLE_ARROW Curseur en forme de double flèche diagonale de haut à gauche vers le bas à droite pour le redimensionnement.
TYPE_TOP_RIGHT_DIAGONAL_DOUBLE_ARROW Curseur en forme de double flèche diagonale allant du coin supérieur droit au coin inférieur gauche pour le redimensionnement.
TYPE_VERTICAL_DOUBLE_ARROW Curseur en forme de double flèche verticale pour redimensionner.
TYPE_VERTICAL_TEXT Curseur de texte vertical, en forme de I horizontal.
TYPE_WAIT Le curseur d'attente, un sablier ou un cercle qui tourne.
TYPE_ZOOM_IN Curseur de zoom avant, une loupe avec un signe plus.
TYPE_ZOOM_OUT Curseur de diminution du zoom, une loupe avec un signe moins.