Какие знаешь стадии отрисовки кадра в Compose?

Этапы жизненного цикла кадра в Jetpack Compose

В Jetpack Compose процесс отрисовки пользовательского интерфейса делится на три основные фазы, которые выполняются последовательно для каждого кадра: композиция (composition), макетирование (layout) и отрисовка (drawing). Понимание этих этапов критически важно для оптимизации производительности и создания плавной анимации.

1. Композиция (Composition)

На этом этапе Compose определяет что должно отображаться, выполняя все вызываемые функции @Composable. Система строит дерево композиции — иерархическую структуру, описывающую пользовательский интерфейс.

• Процесс: Выполняются composable-функции, создаются и запоминаются в памяти узлы (LayoutNode или другие типы нод) с их свойствами (текст, цвет, модификаторы).
• Реактивность: Перекомпозиция (recomposition) происходит при изменении отслеживаемых состояний (State, MutableState). Compose интеллектуально перезапускает только те функции, чьи входные данные изменились.
• Ключевой принцип: Композиция должна быть идеоматичной и быстрой. Избегайте в этой фазе тяжелых вычислений или чтения из базы данных.

@Composable
fun Greeting(name: String) {
    // Эта функция выполняется на фазе композиции
    Text(
        text = "Привет, $name!",
        modifier = Modifier.padding(16.dp) // Модификатор пока только "запоминается"
    )
}

2. Макетирование (Layout)

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

• Процесс в два прохода:

    1.  **Измерение (Measure):** Каждый узел измеряет своих детей (если они есть), чтобы определить их требования к размеру.
    2.  **Размещение (Place):** На основе полученных размеров родительский узел размещает (позиционирует) своих детей в отведенных для них координатах.

• Модификаторы layout: Позволяют кастомизировать логику измерения и размещения.
• Важно: Избегайте чтения окончательных размеров или позиций во время композиции — это может привести к ошибкам. Используйте onPlaced или onGloballyPositioned.

@Composable
fun CustomLayout() {
    Layout(
        content = { /* дети */ },
        modifier = Modifier
    ) { measurables, constraints ->
        // Логика измерения (measure pass)
        val placeables = measurables.map { it.measure(constraints) }

        // Расчет итогового размера контейнера
        val height = placeables.sumOf { it.height }

        // Логика размещения (place pass)
        layout(constraints.maxWidth, height) {
            var yPos = 0
            placeables.forEach { placeable ->
                placeable.placeRelative(x = 0, y = yPos)
                yPos += placeable.height
            }
        }
    }
}

3. Отрисовка (Drawing / Рендеринг)

Финальный этап, на котором происходит непосредственное рисование пикселей на Canvas (холсте). Выполняются команды рисования: заливка фона, отрисовка текста, векторной графики, теней и т.д.

• Процесс: Система берет размещенные узлы и последовательно отрисовывает их, используя низкоуровневые инструкции Android Canvas.
• Порядок: Отрисовка происходит в порядке, определенном на фазе макетирования (сверху вниз в дереве, если нет смещения по оси Z).
• Модификаторы рисования: Модификаторы вроде background, clip, rotate, alpha выполняют свою работу именно здесь.

Canvas(modifier = Modifier.size(100.dp)) {
    // Этот блок кода выполняется на фазе отрисовки
    drawCircle(
        color = Color.Red,
        center = center,
        radius = size.minDimension / 2
    )
}

Дополнительная фаза и важные замечания

• Intrinsics (Внутренние измерения): Хотя и не является отдельной фазой отрисовки кадра, это вспомогательный этап, который может выполняться до макетирования. Compose запрашивает у детей их минимальный/максимальный размер в определенной оси, чтобы родитель (например, Row или Column) мог корректно выставить ограничения. Используется, например, когда высота Row должна определяться по самому высокому ребенку.
• Модификаторы как конвейер: Важно понимать, что модификаторы (Modifier) применяются не сразу, а в строгом порядке следования фаз. Например, Modifier.padding(10.dp).background(Color.Gray) сначала добавит отступы (влияет на макетирование), а затем нарисует фон вокруг элемента с этими отступами.
• Оптимизация: Для достижения 60 FPS на весь цикл (композиция + макетирование + отрисовка) отводится всего ~16 мс. Инструменты вроде Layout Inspector и рекомендации из Compose Metrics помогают выявлять проблемы на каждой из фаз (излишняя рекомпозиция, сложное макетирование, дорогая отрисовка).

Понимание разделения ответственности между этими фазами позволяет писать эффективный код, избегать распространенных ошибок (например, выполнения операций ввода-вывода во время композиции) и осознанно использовать мощные возможности Compose для создания сложных кастомных UI-компонентов.