Cómo reducir la superposición

En esta página, se explica qué es la superposición, cómo diagnosticarla y cómo eliminarla o mitigarla.

Cuando una app genera el mismo píxel más de una vez dentro de un único fotograma, se denomina superposición. Por lo general, la superposición es innecesaria, y se recomienda eliminarla. La superposición se convierte en un problema de rendimiento cuando se pierde tiempo de la GPU para renderizar píxeles que no contribuyen a lo que el usuario ve en la pantalla.

Acerca de la superposición

La superposición tiene lugar cuando el sistema genera un píxel en la pantalla varias veces en un solo fotograma de renderización. Por ejemplo, si tienes varias tarjetas de IU apiladas, cada tarjeta oculta una parte de la que está debajo.

Sin embargo, el sistema necesita generar las partes ocultas de las cartas de la pila. Esto se debe a que las tarjetas apiladas se renderizan según el algoritmo de Painter, es decir, de atrás hacia adelante. Esta secuencia de renderización permite que el sistema aplique la composición alfa correcta de los objetos translúcidos, como las sombras.

Cómo encontrar problemas de superposición

La plataforma ofrece las siguientes herramientas para ayudarte a determinar si la superposición afecta el rendimiento de tu app.

Herramienta de depuración de superposiciones de la GPU

La herramienta de depuración de superposiciones de la GPU usa la codificación de colores para mostrar la cantidad de veces que tu app genera cada píxel en la pantalla. Cuanto más alto sea este número, es más probable que la superposición afecte el rendimiento de tu app.

Para obtener más información, consulta Cómo visualizar la superposición de la GPU.

Herramienta Profile GPU rendering

La herramienta de Profile GPU rendering muestra, en forma de histograma de desplazamiento, el tiempo que tarda cada etapa de la canalización de renderización en mostrar un solo fotograma. La parte del proceso de cada barra, que se indica en naranja, muestra el momento en el que el sistema está intercambiando búferes. Esta métrica proporciona pistas importantes sobre la superposición.

En las GPU con menor rendimiento, es posible que la tasa de relleno disponible (la velocidad a la que la GPU puede rellenar el búfer de fotogramas) sea bastante baja. A medida que aumenta la cantidad de píxeles requeridos para dibujar un fotograma, la GPU puede tardar más en procesar comandos nuevos y solicitar tiempos de espera al resto del sistema hasta ordenarse. La barra de procesos muestra que este aumento se produce cuando la GPU se satura en el intento de generar píxeles lo más rápido posible. Hay otros problemas, además de la cantidad elevada de píxeles, que pueden causar el aumento de esta métrica. Por ejemplo, si la herramienta de depuración de superposiciones de la GPU muestra una gran cantidad de superposiciones y picos de procesos, es probable que se deba a un problema de superposición.

Para obtener más información, consulta la sección sobre Velocidad de Profile GPU rendering.

Cómo corregir la superposición

Puedes hacer lo siguiente para reducir o eliminar la superposición:

  • Quitar los fondos innecesarios en los diseños
  • Acoplar la jerarquía de vistas
  • Reducir la transparencia

En esta sección, se proporciona información sobre cada uno de estos enfoques.

Cómo quitar los fondos innecesarios en los diseños

De forma predeterminada, un diseño no tiene fondo, lo que significa que no renderiza nada por sí mismo. Sin embargo, cuando los diseños tienen fondos, es posible que contribuyan a la superposición.

Puedes mejorar el rendimiento de la renderización si quitas los fondos innecesarios. Es posible que los fondos innecesarios no sean visibles porque están completamente cubiertos por todo lo que la app genere sobre estos. Por ejemplo, el sistema podría cubrir completamente el fondo superior cuando genera vistas secundarias sobre este.

Para detectar el motivo de las superposiciones, echa un vistazo a la jerarquía en la herramienta Inspector de diseño. Puedes buscar fondos que no sean visibles para el usuario y eliminarlos. Puedes eliminar fondos innecesarios cuando haya muchos contenedores que compartan un color de fondo común. Puedes establecer el fondo de la ventana en el color de fondo principal de tu app y dejar todos los contenedores por encima sin valores de fondo definidos.

Cómo acoplar la jerarquía de vistas

Los diseños modernos te ayudan con el apilamiento y las vistas en capas para producir diseños atractivos. Sin embargo, esto puede disminuir el rendimiento generando superposiciones, especialmente, en situaciones en las que cada objeto de vista apilado es opaco y requiere que se generen píxeles visibles y no visibles en la pantalla.

Si te encuentras con este problema, puedes mejorar el rendimiento optimizando tu jerarquía de vistas para reducir la cantidad de objetos superpuestos de la IU. Si deseas obtener más información para lograrlo, consulta Jerarquías de vistas y rendimiento.

Cómo reducir la transparencia

La renderización de píxeles transparentes en la pantalla, conocida como renderización alfa, es un factor clave en las superposiciones. A diferencia de la superposición estándar, en la que el sistema oculta completamente los píxeles existentes generando píxeles opacos por encima de ellos, los objetos transparentes requieren que primero se generen los píxeles existentes, para que pueda producirse la ecuación de combinación correcta.

Los efectos visuales, como las animaciones transparentes, los fundidos difuminados y las sombras paralelas, implican algún tipo de transparencia y, por lo tanto, pueden contribuir considerablemente a las superposiciones. Para mejorar las superposiciones en esas situaciones, reduce la cantidad de objetos transparentes que renderizas. Por ejemplo, para obtener texto gris, dibuja texto negro en un TextView con un valor alfa traslúcido establecido en él. Sin embargo, puedes obtener el mismo efecto con un mejor rendimiento si dibujas el texto en gris.

Si deseas obtener más información acerca de los costos de rendimiento que la transparencia impone a lo largo de toda la canalización, consulta el video Costos ocultos de la transparencia.