Что такое перерисовка и как с ней бороться

Рендеринг, то есть отрисовка пользовательского интерфейса на экране мобильного устройства, влияет на восприятие качества каждым пользователем приложения. Глаза требуют плавности при выводе изображений и текста на экран. Поэтому лучше избегать медленной отзывчивости и задержек при отрисовке на экране.

В этой статье я расскажу, что такое перерисовки (Overdraw), как они влияют на производительность рендеринга и как можно их исправить. Вперед!

Что такое перерисовка

Обычно система Android рисует экран пиксель за пикселем внутри кадра.

Перерисовка — это когда система рисует пиксель на экране несколько раз за один кадр рендеринга.

Например: если у нас есть куча наложенных друг на друга видов и каждый скрывает часть того, который находится под ним.

Чтобы узнать больше о том, как система Android рисует экран, обратитесь к «Алгоритм рисования».

Последствия перерисовки

Это приводит к проблемам с производительностью, поскольку GPU тратит время на отрисовку пикселей, которые даже не видны пользователю на экране.

Выявление проблем с перерисовкой

• Инструмент Debug GPU Overdraw Tool — находится в Developer Options в Android Settings -> Debug GPU Overdraw.
• Инструмент Profile GPU rendering — находится в Developer Options в Android Settings -> Profile GPU Rendering или Profile HWUI rendering.

Инструмент Debug GPU Overdraw

Использует цветовое кодирование, чтобы показать, сколько раз ваше приложение отрисовывает каждый пиксель на экране.

Чем выше этот показатель, тем сильнее он влияет на производительность.

Например синий цвет — это отрисовка пикселя один раз, зеленый — два, розовый три, а красный — четыре и более.

Пример перерисовки в приложении Google I/O

Инструмент Profile GPU rendering

Этот инструмент показывает прокручивающуюся гистограмму, которая определяет время, затрачиваемое каждым этапом конвейера рендеринга на показ одного кадра.

Чтобы узнать больше об этом, обратитесь сюда.

Профилировщик для приложения Google I/O

Исправление перерисовки

• Удалите ненужные фоны в макетах
• Сделайте плоской иерархию видов
• Уменьшите прозрачность

Удаление ненужных фонов в макетах

Когда в макетах есть фон, это может привести к перерисовке.

Чтобы повысить производительность рендеринга, рекомендуется удалить ненужные фоны из лейаута. Ненужный фон может быть никогда не виден, потому что он полностью закрыт всем остальным, что приложение рисует поверх этого представления.

Например, система может полностью скрыть фон родительского представления (может быть Активити), когда она рисует поверх него дочерние представления (может быть Фрагментом).

Чтобы просмотреть иерархию представлений в макете, используйте инструмент Layout Inspector.

Случаи, когда многие контейнеры имеют общий цвет фона, предоставляют еще одну возможность избавиться от ненужных фонов. Вы можете установить для фона окна основной цвет фона вашего приложения и оставить все контейнеры над ним без заданных значений фона.

Пример:

// Layout with Overdraw
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/white"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

// Layout with Overdraw

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/white"

    tools:context=".MainActivity">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="100dp"

        android:background="@color/white"

        android:orientation="vertical"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Одна перерисовка это голубой цвет

Удалив нежелательный фон, указанный в Linear Layout, мы можем уменьшить перерисовку:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

xxxxxxxxxx

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/white"

    tools:context=".MainActivity">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="100dp"

        android:orientation="vertical"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Без перерисовки

Упрощение иерархии представлений

Чтобы повысить производительность, нам следует оптимизировать иерархию представлений, чтобы уменьшить количество перекрывающихся объектов пользовательского интерфейса.

Когда каждый объект в стеке представлений является непрозрачным, требуя отрисовки видимых и невидимых пикселей на экране, это влияет на производительность рендеринга и перерисовки.

Подробнее об оптимизации иерархий представлений читайте здесь.

Уменьшение прозрачности

Прозрачная анимация, затухания и тени включают в себя некоторые виды прозрачности и, следовательно, способствуют перерисовке.

В отличие от стандартной перерисовки, при которой система полностью скрывает существующие нарисованные пиксели, рисуя поверх них непрозрачные пиксели, прозрачные объекты требуют, чтобы существующие пиксели были нарисованы первыми, чтобы могло возникнуть правильное уравнение смешивания.

Чтобы повысить производительность, следует уменьшить количество отрисовываемых прозрачных объектов.

Например, вы можете получить серый текст, нарисовав черный текст в TextView с полупрозрачным альфа-значением. Но вы можете получить тот же эффект с гораздо большей производительностью, просто нарисовав текст серым цветом.

Ссылки

• Руководства по Android — Рендеринг
• Прозрачность с альфа-смешением — Видео

Источник