Hola a todos Especialmente para los estudiantes de un curso avanzado en desarrollo de Android, prepararon una traducción de un artículo interesante.
Este es el primer artículo de su serie Gesture Management. Otros artículos que puedes encontrar
aquí .
Android Q ha agregado un nuevo modo de navegación para el sistema, lo que permite al usuario volver a la pantalla anterior, ir a la pantalla principal e iniciar el asistente mediante gestos.
Demostración de nuevos gestos en Android QCon la transición a un modelo de sistema de control de gestos, las aplicaciones ganaron más espacio en la pantalla. Esto permitió que las aplicaciones proporcionaran una experiencia de usuario más inmersiva.
En la mayoría de los dispositivos, los usuarios pueden elegir el modo de navegación a su gusto. No obstante, el modo de navegación existente de tres botones (que consiste en los botones Atrás, Inicio, Recientes) permanece. Esta medida es necesaria para todos los dispositivos de la versión Q y superior.
Puede leer más sobre la investigación y las soluciones que se incluyen en el concepto de control de gestos en este
artículo de los gerentes de producto de la interfaz de usuario del sistema Android.
Este artículo es el primero de una pequeña serie que se centra en cómo los desarrolladores pueden proporcionar control de gestos en sus aplicaciones. En la serie cubriremos los siguientes temas:
- Borde a borde: permita que su aplicación llene toda la pantalla.
- Procesamiento de superposiciones visuales de la interfaz de usuario del sistema.
- El manejo de gestos de aplicaciones entra en conflicto con los gestos del sistema.
- Escenarios comunes y formas de apoyarlos.
Comencemos con cómo las aplicaciones pueden variar de borde a borde de la pantalla.
Borde a borde
Utilizo el término de borde a borde para describir aplicaciones cuya ventana se puede expandir a pantalla completa para lograr un efecto más emocionante. Por defecto, las aplicaciones se encuentran debajo de la barra de estado (barra de estado) y encima de la barra de navegación (barra de navegación) (juntas se denominan barras del sistema).
De borde a borde, las aplicaciones van más allá de los paneles del sistema. Esto mantendrá el contenido de su aplicación en el centro de atención para crear una buena experiencia de usuario.
En la práctica, esto significa que el creador de la aplicación debe recordar dos cosas:
Usando el área de la barra de navegación
La primera y más importante consideración para apoyar el control de gestos es manejar la ubicación detrás de la barra de navegación. Como la barra de navegación ha disminuido en tamaño e importancia, se recomienda encarecidamente que las aplicaciones se coloquen detrás de la barra de navegación cuando se trabaja con Android Q + para crear una experiencia de usuario más atractiva y moderna.
Cuando se inicia en dispositivos con Android Pie o inferior, la ubicación detrás de la barra de navegación se considera opcional, y deja la decisión al creador de la aplicación si esto tiene sentido. Sin embargo, casi todas las API necesarias son compatibles con versiones anteriores hasta API 21 (o AndroidX manejará las diferencias por sí solo), por lo que la cantidad de trabajo adicional requerida para admitir dispositivos antes de la versión Q es mínima. Los usuarios de dispositivos hasta la generación Q también pueden obtener una experiencia inmersiva. Solo la minimización del trabajo y las pruebas necesarias se considera opcional.
Usando el área de la barra de estado
En segundo lugar, prestas atención a la parte superior de la pantalla: la barra de estado. Ahora tiene sentido usar áreas de la barra de estado si su contenido o diseño lo necesita. ¿Qué queremos decir con eso? Un ejemplo de un diseño que podría tomar la barra de estado es una imagen de pantalla panorámica. Para los desarrolladores, esto significa usar algo como
AppBarLayout , que se encuentra y se fija en la parte superior de la pantalla.
Ejemplo de aplicación con una imagen de pantalla completa en la barra de estadoPor otro lado, si la interfaz de usuario consta de una lista de elementos con una posición fija en la barra de herramientas en la parte superior, puede que no tenga sentido usar el área de la barra de estado. Las mismas reglas se aplican a la barra de navegación: no es necesario usarlas en dispositivos anteriores a Android Q.
Implementación
Hay tres pasos clave para implementar el uso de áreas de borde a borde.
- Solicitud para mostrar en pantalla completa
El primer paso es decirle al sistema que nuestra aplicación debe colocarse en la parte superior de los paneles del sistema (a lo largo del eje Y). La API que usamos para esto es
setSystemUiVisibility () en una vista con varios indicadores. Las banderas que nos interesan se ven así:
view.systemUiVisibility =
Después de eso, nuestras
view se ubicarán en modo de pantalla completa en la barra de navegación.
Ahora nuestra aplicación estará ubicada en modo de pantalla completa en la barra de navegación- Cambiar los colores del panel del sistema
Dado que nuestra aplicación ahora está en modo de pantalla completa, necesitamos cambiar los colores del panel del sistema para que podamos ver el contenido que está detrás.
Android QCuando se inicia en Android Q, nuestra única tarea es hacer que el panel del sistema sea transparente.
<!-- values-v29/themes.xml --> <style name="Theme.MyApp"> <item name="android:navigationBarColor"> @android:color/transparent </item> <!-- Optional, if drawing behind the status bar too --> <item name="android:statusBarColor"> @android:color/transparent </item> </style>
En Android Q, el sistema ahora es responsable de procesar toda la protección visual de los contenidos del panel del sistema (hora, iconos, procesamiento de arrastrar y soltar, etc.) en todos los modos de navegación. Esto significa que ya no tenemos que pensarlo. En la práctica, esto significa que el sistema hará una de dos cosas:
Adaptación dinámica del color.El contenido del panel del sistema cambia de color según el contenido ubicado detrás de él. Por lo tanto, si el panel está por encima de algún tipo de contenido de luz, entonces su color cambiará a oscuro. Por el contrario, el color cambia a claro si el contenido es oscuro. Esto es lo que llamamos adaptación dinámica del color.
Adaptación dinámica del color en Android QMalla translúcidaAlternativamente, el sistema puede usar una rejilla translúcida (malla) detrás de los paneles del sistema. Tenga en cuenta que esto solo funciona si declaró
targetSdkVersion 29 en su aplicación. Si su aplicación se dirige al SDK 28 o inferior, la cuadrícula no se mostrará automáticamente y se le dejará una barra de navegación transparente.
Rejilla proporcionada por el sistema en modo de control en Android QAmbas acciones se realizan para que el usuario siempre pueda ver el contenido del panel del sistema. La opción que elige el sistema depende de varios factores. La cuadrícula se usará si:
- Uno de los modos de botón está habilitado (botón 2 o 3);
- En el modo de control de gestos, el propio fabricante decidió desactivar la adaptación dinámica del color. Una posible razón puede ser la falta de rendimiento del dispositivo para procesar la adaptación del color.
Un ejemplo de cómo se puede usar una pantalla con control por gestosEn todos los demás casos, se utilizará la adaptación dinámica del color. Las razones enumeradas son relevantes solo en este momento, en el futuro todo puede cambiar.
Desactivar la protección del panel del sistema en QSi no desea que el sistema proteja automáticamente el contenido, puede desactivar esta opción configurando
android:enforceNavigationBarContrast y / o
android:enforceStatusBarContrast en
false .
Android Pie y abajoSi decide pasar al concepto de "borde a borde" y en dispositivos hasta la versión Q, debe configurar los colores translúcidos del panel del sistema para utilizar la protección de contenido. Una malla negra con un 70% de opacidad será un buen paso para crear un tema con paneles oscuros del sistema.
<!-- values/themes.xml --> <style name="Theme.MyApp"> <item name="android:navigationBarColor"> #B3FFFFFF </item> </style> <!-- values-night/themes.xml --> <style name="Theme.MyApp"> <item name="android:navigationBarColor"> #B3000000 </item> </style>
Es posible que deba ajustar la transparencia de los paneles superior e inferior, según el contenido que se encuentre detrás de ellos. Para temas claros, puede establecer un color translúcido claro (por ejemplo, # B3FFFFFF).
Un ejemplo que muestra ambas cuadrículas en temas oscuros y claros
- Conflictos visuales
Después de completar estos pasos, es posible que haya notado que algunas de sus vistas ahora se encuentran detrás de los paneles del sistema. Nuestro tercer y último paso es el procesamiento de cualquier superposición visual, que discutiremos en los siguientes artículos.
Eso es todo. Invitamos a todos los lectores a un seminario web práctico sobre Android UI Testing .