Icone del puntatore del mouse

Gli utenti Android accedono alla tua app da tutti i tipi di fattori di forma, ad esempio smartphone, tablet, pieghevoli e Chromebook. Quando interagiscono con la tua applicazione, soprattutto su schermi più grandi, gli utenti possono anche utilizzare un dispositivo di puntamento come un mouse a tre pulsanti. Le applicazioni Android supportano l'applicazione di stili diversi al puntatore del mouse per aiutare gli utenti a visualizzare un'indicazione che possono interagire con un oggetto.

Utilizzare i cursori predefiniti del sistema

Gli utenti conoscono diverse convenzioni per interagire con diversi tipi di oggetti sui dispositivi con schermi di grandi dimensioni. Android fornisce agli sviluppatori alcune delle icone del cursore più comuni che gli utenti conoscono. Puoi aggiungere queste icone del cursore predefinite del sistema con poche righe di codice. Diamo un'occhiata al seguente snippet Kotlin: 

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

In questo esempio, myView è la visualizzazione che verrà impostata su un'icona a forma di puntatore in determinate condizioni. La condizione mostrata qui è uno stato di passaggio del mouse, che si verifica quando il puntatore del mouse si trova sopra una visualizzazione. In altri scenari, potresti voler visualizzare un'icona di attesa durante l'elaborazione o un mirino in un gioco.

setOnHoverListener rimane in ascolto per rilevare quando il puntatore entra nello stato di passaggio del mouse e poi agisce in base a questo evento. All'interno del listener di eventi, viene chiamato view.pointerIcon per impostare l'icona del puntatore per quella visualizzazione specifica. Per impostare l'icona del puntatore viene utilizzata un'icona di sistema esistente.

In Android sono integrate diverse icone di sistema. Un elenco completo è disponibile in fondo a questa pagina. È stata utilizzata l'icona TYPE_HAND, che mostra una mano chiusa con il dito indice esteso.

Utilizzare il proprio cursore speciale

// 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())

Nota:la posizione dell'hotspot dipende dal caso d'uso. Ad esempio, un'app di disegno imposterebbe l'hotspot come la punta della penna o del pennello.

Esempi

L'aggiunta di icone del puntatore all'applicazione è un ottimo modo per consentire agli utenti di avere esperienze più intuitive sui diversi fattori di forma dei dispositivi che utilizzano. Sono disponibili molte icone di sistema predefinite e, se non soddisfano le tue esigenze, puoi sempre caricarne o crearne di tue.

  • Trascina e rilascia: se la tua applicazione supporta il trascinamento da un'altra applicazione e il rilascio nella tua applicazione, puoi implementare l'icona TYPE_NO_DROP. In questo modo, l'utente avrà un'indicazione visiva che la tua applicazione non supporta il tipo MIME che sta tentando di trascinare nell'app.
  • Mappatura: se hai un'applicazione di mappatura e vuoi mostrare agli utenti che possono spostare la mappa, potresti avere un'opzione per visualizzare l'icona TYPE_GRAB quando passi il mouse sopra la mappa. Quando l'utente fa clic, puoi aggiornare l'icona con una mano che afferra per mostrare che sta spostando la mappa.
  • Modifica foto: gli utenti che modificano le foto preferiscono avere controlli che consentano di selezionare una lente d'ingrandimento per ingrandire. Potresti cambiare il cursore in una lente d'ingrandimento con l'icona TYPE_ZOOM_IN quando è selezionata la modalità di zoom.
  • E molte altre opportunità

Nota:per vedere in azione le diverse modifiche del puntatore, consulta questo esempio di puntatore di GitHub.

Icone del puntatore personalizzate in un'app per Android.

Appendice

Letture aggiuntive

Cursori predefiniti di sistema

Questi sono i cursori disponibili per impostazione predefinita nel sistema Android.

Nome del cursore Icona
TYPE_ALIAS Il cursore alias, una freccia con una piccola freccia curva accanto.
TYPE_ALL_SCROLL Il cursore di scorrimento, un cerchio con quattro frecce che puntano verso l'esterno.
TYPE_ARROW Il cursore a freccia standard.
TYPE_CELL Cursore della cella
TYPE_CONTEXT_MENU Il cursore del menu contestuale, una freccia con una piccola icona di menu accanto.
TYPE_COPY Il cursore di copia, una freccia con un segno più accanto.
TYPE_CROSSHAIR Il cursore a croce, un segno più con un punto al centro.
TYPE_DEFAULT Il cursore a freccia predefinito.
TYPE_GRAB Il cursore di trascinamento, una mano aperta.
TYPE_GRABBING Il cursore di trascinamento, una mano chiusa.
TYPE_HAND Il cursore a mano, una mano con l'indice puntato.
TYPE_HELP Il cursore di assistenza, una freccia con un punto interrogativo accanto.
TYPE_HORIZONTAL_DOUBLE_ARROW Il cursore a doppia freccia orizzontale per il ridimensionamento.
TYPE_NO_DROP Il cursore di divieto di rilascio, un cerchio con una linea che lo attraversa.
TYPE_NULL Nessun cursore verrà visualizzato
TYPE_TEXT Il cursore di testo, una I maiuscola.
TYPE_TOP_LEFT_DIAGONAL_DOUBLE_ARROW Il cursore a doppia freccia diagonale dall'alto a sinistra verso il basso a destra per il ridimensionamento.
TYPE_TOP_RIGHT_DIAGONAL_DOUBLE_ARROW Il cursore a doppia freccia diagonale dall'angolo in alto a destra verso l'angolo in basso a sinistra per il ridimensionamento.
TYPE_VERTICAL_DOUBLE_ARROW Il cursore a doppia freccia verticale per il ridimensionamento.
TYPE_VERTICAL_TEXT Il cursore di testo verticale, una trave a I orizzontale.
TYPE_WAIT Il cursore di attesa, una clessidra o un cerchio che gira.
TYPE_ZOOM_IN Il cursore di ingrandimento, una lente d'ingrandimento con un segno più.
TYPE_ZOOM_OUT Il cursore di riduzione, una lente d'ingrandimento con un segno meno.