Suscribir

¡Google I/O 2023 llegará el 10 de mayo! ¡Regístrate ahora!

Adaptar Android

Iconos de puntero del mouse

Los usuarios de Android acceden a su aplicación desde todos los diferentes tipos de dispositivos, es decir, teléfonos, tabletas, plegables y Chromebooks. Al interactuar con su aplicación, especialmente en pantallas más grandes, los usuarios también pueden usar algún tipo de dispositivo señalador como un mouse de tres botones. Las aplicaciones de Android tienen soporte para aplicar diferentes estilos al puntero del mouse para ayudar a esos usuarios a tener una indicación visual de que pueden interactuar con un objeto.

Usando los cursores predeterminados del sistema

Los usuarios están familiarizados con diferentes convenciones para interactuar con diferentes tipos de objetos en dispositivos de pantalla grande. Android, sin necesidad de agregar ningún cambio, ofrece a los desarrolladores algunos de los iconos de cursor más comunes con los que los usuarios están familiarizados. Agregar algunos de estos iconos de cursor predeterminados del sistema es fácil. Echemos un vistazo al siguiente fragmento de Kotlin:

Kotlin
myView.pointerIcon =
         PointerIcon.getSystemIcon(applicationContext, PointerIcon.TYPE_HAND)

myView es la vista que será asociada con cierto ícono de puntero durante un evento de desplazarse sobre esta vista (hover). (En otros escenarios, puede ser recomendable tener un ícono de espera mientras la aplicación esté haciendo una tarea de procesamiento o un punto de mira en el caso de juegos). Llama a myView.pointerIcon para actualizar el ícono para esa vista en particular. Un ícono existente del sistema se utiliza para este caso. En Android existen varios íconos del sistema ya integrados y se puede encontrar una lista completa al final de esta página. En el ejemplo se uso el icono TYPE_HAND que muestra una mano cerrada con el dedo indice extendido.

Usando tu propio cursor especial

Es posible que los iconos del sistema Android no cubran todas sus necesidades. Por ejemplo, si tiene una aplicación de comercio de acciones, es posible que desee mostrar un “$” verde como puntero del mouse cuando los usuarios se ciernen sobre el botón de compra. Analicemos el siguiente fragmento de Kotlin:

Kotlin
// Loading a bitmap to use as a pointer icon
val dollarBitmap = Bitmap.createScaledBitmap(
    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())

Primero, cree un mapa de bits para el icono. Aquí se carga desde un recurso dibujable (drawable). Luego, cree el objeto PointerIcon usando el mapa de bits. Establezca el punto de acceso (ubicación en píxeles donde se originarán los clics) para que sea el centro del icono.

Ejemplos

Agregar iconos de puntero a su aplicación es una excelente manera de ayudar a que sus usuarios tengan experiencias más intuitivas en los diferentes factores de forma de dispositivo que usan. Hay muchos íconos de sistema predeterminados disponibles y si no se ajustan a sus necesidades, siempre puede cargar o crear los suyos propios.

  • Arrastrar y soltar: si su aplicación admite arrastrar desde otra aplicación y soltar en su aplicación, podría implementar el ícono TYPE_NO_DROP . Esto daría una indicación visual de que su aplicación no es compatible con el tipo MIME que está tratando de caer en su aplicación.
  • Mapas - Si su aplicación contiene mapas y le gustaría mostrar a sus usuarios que pueden desplazar el mapa puede utiizar el ícono TYPE_GRAB cuando el puntero del mouse se deslice sobre el mapa y cuando el usuario hace clic, actualizar el ícono a arrastrar para demostrar el efecto de desplazamiento del mapa.
  • Edición de fotos - A los usuarios de edición de fotos les gusta tener controles que les permitan seleccionar una lupa para acercarla. Puede cambiar el cursor a una lupa con el ícono TYPE_ZOOM_IN cuando se selecciona el modo acercar.
  • Y muchas más oportunidades

Apéndice

Lectura adicional

Cursores predeterminados del sistema

Estos son los cursores disponibles por defecto en el sistema Android.

Nombre del cursor Icono
TYPE_ALIAS Alias Cursor Icon
TYPE_ALL_SCROLL All Scroll Cursor Icon
TIPO__ ARROW Arrow Cursor Icon
TYPE_CELL Cell Cursor Icon
TYPE_CONTEXT_MENU Context Menu Cursor Icon
TYPE_COPY Copy Cursor Icon
TYPE_CROSSHAIR Crosshair Cursor Icon
TYPE_DEFAULT Default Cursor Icon
TYPE_GRAB Grab Cursor Icon
TYPE_GRABBING Grabbing Cursor Icon
TYPE_HAND Hand Cursor Icon
TYPE_HELP Help Cursor Icon
TYPE_HORIZONTAL_DOUBLE_ARROW Horizontal Double Arrow Cursor Icon
TYPE_NO_DROP No Drop Cursor Icon
TYPE_NULL No se mostrará ningún cursor
TYPE_TEXT Text Cursor Icon
TYPE_TOP_LEFT_DIAGONAL_DOUBLE_ARROW Top Left Diagonal Double Arrow Cursor Icon
TYPE_TOP_RIGHT_DIAGONAL_DOUBLE_ARROW Top Right Diagonal Double Arrow Cursor Icon
TYPE_VERTICAL_DOUBLE_ARROW Vertical Double Arrow Cursor Icon
TYPE_VERTICAL_TEXT Vertical Text Cursor Icon
TYPE_WAIT
TYPE_ZOOM_IN Zoom In Cursor Icon
TYPE_ZOOM_OUT Zoom Out Cursor Icon