Íconos de puntero del mouse

Los usuarios de Android acceden a tu app desde diferentes tipos de factores de forma, es decir, teléfonos, tablets, dispositivos plegables y Chromebooks. Cuando interactúan con tu aplicación, especialmente en pantallas más grandes, los usuarios también pueden usar algún tipo de dispositivo apuntador, como un mouse de tres botones. Las aplicaciones para Android admiten la aplicación de diferentes estilos al puntero del mouse para ayudar a los usuarios a tener una indicación visual de que pueden interactuar con un objeto.

Cómo usar los cursores predeterminados del sistema

Los usuarios conocen diferentes convenciones para interactuar con distintos tipos de objetos en dispositivos de pantalla grande. Android proporciona a los desarrolladores algunos de los íconos de cursor más comunes con los que los usuarios están familiarizados. Puedes agregar estos íconos de cursor predeterminados del sistema con algunas líneas de código. Veamos el siguiente fragmento de Kotlin: 

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

En este ejemplo, myView es la vista que se establecerá en un ícono de puntero en ciertas condiciones. La condición que se muestra aquí es un estado de desplazamiento, que se produce cuando el puntero del mouse se encuentra sobre una vista. En otras situaciones, es posible que desees un ícono de espera durante el procesamiento o una mira en un juego.

El setOnHoverListener escucha cuando el puntero entra en el estado de desplazamiento y, luego, actúa en función de ese evento. Dentro del objeto de escucha de eventos, se llama a view.pointerIcon para establecer el ícono del puntero para esa vista en particular. Se usa un ícono del sistema existente para establecer el ícono del puntero.

Android tiene varios íconos del sistema integrados. Puedes ver la lista completa en la parte inferior de esta página. Se usó el ícono de TYPE_HAND, que muestra una mano cerrada con el dedo índice extendido.

Cómo usar tu propio cursor especial

// 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 ubicación del hotspot depende de tu caso de uso. Por ejemplo, una app de dibujo establecería el punto de acceso como la punta del lápiz o del pincel.

Ejemplos

Agregar íconos de puntero a tu aplicación es una excelente manera de ayudar a tus usuarios a tener experiencias más intuitivas en los diferentes factores de forma de los dispositivos que usan. Hay muchos íconos del sistema predeterminados excelentes disponibles y, si no se adaptan a tus necesidades, siempre puedes cargar o crear los tuyos.

  • Arrastrar y soltar: Si tu aplicación admite la acción de arrastrar desde otra aplicación y soltar en tu aplicación, puedes implementar el ícono TYPE_NO_DROP. Esto indicaría visualmente que tu aplicación no admite el tipo de MIME que se intenta soltar en ella.
  • Asignación de mapas: Si tienes una aplicación de mapas y quieres mostrar a los usuarios que pueden desplazar el mapa, puedes incluir una opción para que aparezca el ícono de TYPE_GRAB cuando se desplacen sobre el mapa. Cuando el usuario haga clic, puedes actualizar el ícono a una mano que agarra para mostrar que está desplazando el mapa.
  • Edición de fotos: A los usuarios que editan fotos les gusta tener controles que les permitan seleccionar una lupa para acercar la imagen. Podrías cambiar el cursor a una lupa con el ícono TYPE_ZOOM_IN cuando se selecciona el modo de acercamiento.
  • Y muchas más oportunidades

Nota: Para ver diferentes cambios de puntero en acción, consulta este ejemplo de puntero de GitHub.

Íconos de puntero personalizados en una app para Android

Apéndice

Lecturas adicionales

Cursores predeterminados del sistema

Estos son los cursores disponibles de forma predeterminada en el sistema Android.

Nombre del cursor Ícono
TYPE_ALIAS El cursor de alias, una flecha con una pequeña flecha curva junto a ella.
TYPE_ALL_SCROLL El cursor de desplazamiento en todas las direcciones, un círculo con cuatro flechas que apuntan hacia afuera.
TYPE_ARROW Es el cursor de flecha estándar.
TYPE_CELL Cursor de celda
TYPE_CONTEXT_MENU El cursor del menú contextual, una flecha con un pequeño ícono de menú junto a ella.
TYPE_COPY El cursor de copiar, una flecha con un signo más junto a ella.
TYPE_CROSSHAIR El cursor de cruz, un signo más con un punto en el centro.
TYPE_DEFAULT Es el cursor de flecha predeterminado.
TYPE_GRAB El cursor de agarre, una mano abierta.
TYPE_GRABBING El cursor de agarre, una mano cerrada.
TYPE_HAND El cursor de mano, una mano con el dedo índice apuntando.
TYPE_HELP El cursor de ayuda, una flecha con un signo de interrogación junto a ella.
TYPE_HORIZONTAL_DOUBLE_ARROW Es el cursor de doble flecha horizontal para cambiar el tamaño.
TYPE_NO_DROP El cursor de prohibición, un círculo con una línea que lo atraviesa.
TYPE_NULL No se mostrará el cursor
TYPE_TEXT El cursor de texto, una I latina.
TYPE_TOP_LEFT_DIAGONAL_DOUBLE_ARROW Cursor de flecha doble diagonal de la esquina superior izquierda a la inferior derecha para cambiar el tamaño.
TYPE_TOP_RIGHT_DIAGONAL_DOUBLE_ARROW Cursor de doble flecha diagonal de la esquina superior derecha a la inferior izquierda para cambiar el tamaño.
TYPE_VERTICAL_DOUBLE_ARROW Es el cursor de doble flecha vertical para cambiar el tamaño.
TYPE_VERTICAL_TEXT El cursor de texto vertical, una viga en I horizontal.
TYPE_WAIT El cursor de espera, que puede ser un reloj de arena o un círculo giratorio.
TYPE_ZOOM_IN El cursor de acercamiento, una lupa con un signo más.
TYPE_ZOOM_OUT El cursor de alejar, una lupa con un signo menos.