Cómo reducir la superposición

Una app puede generar el mismo píxel más de una vez dentro de un único fotograma; este evento se denomina superposición. En general, la superposición es innecesaria y es mejor eliminarla. Se manifiesta como un problema de rendimiento, ya que se pierde tiempo de la GPU para renderizar píxeles que no contribuyen a lo que el usuario ve en la pantalla.

En este documento, se explica la superposición: qué es, cómo diagnosticarla y qué acciones puedes realizar para eliminarla o mitigarla.

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 tenemos varias tarjetas de IU apiladas, cada tarjeta oculta una parte de la que está debajo.

Sin embargo, el sistema necesita generar incluso 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 una combinación de Alfa adecuada para los objetos traslúcidos, como 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 con el fin de mostrar la cantidad de veces que tu app genera cada píxel en la pantalla. Cuanto más alto sea ese número, más probable será que la superposición afecte el rendimiento de tu app.

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

Herramienta de renderización de perfiles de la GPU

La herramienta de renderización de perfiles de la GPU 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, y 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 Cómo crear un perfil de velocidad de renderización de la GPU.

Cómo corregir la superposición

Existen varias estrategias que puedes seguir para reducir o eliminar las superposiciones:

  • Elimina los fondos innecesarios en los diseños.
  • Acopla la jerarquía de vistas.
  • Reduce la transparencia.

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

Quita 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, pueden contribuir a la superposición.

Quitar fondos innecesarios es una manera rápida de mejorar el rendimiento de la renderización. Es posible que los fondos innecesarios no sean visibles porque están completamente cubiertos por todo lo demás que la app genere sobre esa vista. Por ejemplo, el sistema puede cubrir por completo el fondo principal cuando genera vistas secundarias sobre él.

Para detectar el motivo de las superposiciones, recorre la jerarquía en la herramienta Inspector de diseño. Mientras lo haces, busca los fondos que puedes eliminar porque ya no son visibles para el usuario. Los casos en que muchos contenedores comparten un color de fondo común ofrecen otra oportunidad para eliminar fondos innecesarios: 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.

Acopla la jerarquía de vistas

Los diseños modernos facilitan 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 encuentras este tipo de problema, es posible que puedas mejorar el rendimiento si optimizas la jerarquía de vistas con el fin de reducir la cantidad de objetos de la IU superpuestos. Si deseas obtener más información para lograr esto, consulta Cómo optimizar jerarquías de vistas.

Reduce 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 rendimiento superior si tan solo generas 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.