Connect with us

Разработка

Jetpack Compose 1.12: как я наконец отказался от «ненастоящих» градиентов

Практический разбор сеточных градиентов и расширенной цветовой гаммы — и того, что они значат для вашего пользовательского интерфейса.

Опубликовано

/

     
     

Я не могу сосчитать, сколько раз дизайнер присылал мне красивый мягкий градиент, а я отвечал тремя наложенными radialGradient, blur и молитвой. На эмуляторе всё выглядело отлично; на настоящем OLED-экране — блекло. Compose 1.12 решает обе проблемы.

Что именно случилось

Августовский релиз Compose 2026 года уже стабилен и включает версию 1.12 для всех основных модулей, в том числе сеточных градиентов (Mesh Gradients), поддержку расширенной цветовой гаммы (Wide Color Gamut), именованные области в Grid и интеграцию Credential Manager. В этой статье я сосредоточусь на двух визуальных возможностях.

Перед тем как писать код, проверьте требования к обновлению:

  • BOM — androidx.compose:compose-bom:2026.08.00
  • Compose 1.12 требует compileSdk на уровне API 37 и AGP как минимум версии 9.1.1. В одной локализованной версии статьи была указана 9.1.2, поэтому лучше сверяться с официальной страницей.
  • Сначала обновите AGP. Мой любимый совет по Android Studio — использовать Upgrade Assistant, чтобы Gradle не преподнёс сюрпризов позже.

Сетчатые градиенты простыми словами

MeshGradientPainter создаёт органичные многоточечные цветовые градиенты. Представьте сетку из цветных точек, где у каждой вершины есть строка, столбец, позиция и цвет. Compose плавно смешивает цвета между ними.

В споре XML против Jetpack Compose у XML gradient drawables были только линейные, радиальные и sweep-градиенты. Здесь уровень выразительности совершенно другой.

// Inside the MeshGradientPainter setup (check the official docs for the
// exact builder shape). Parameters: row, column, position, color.
setVertex(0, 0, Offset(0f, 0f), Color.Red)    // Top-left
setVertex(0, 1, Offset(1f, 0f), Color.Blue)   // Top-right
setVertex(1, 0, Offset(0f, 1f), Color.Green)  // Bottom-left
// ...add the bottom-right vertex the same way, then use the painter
// as a background in your composable.

Расширенная цветовая гамма: менее заметная, но важная функция

Compose 1.12 получил полную поддержку Wide Color Gamut (P3) и HDR по всей графической цепочке — в graphics, paint и shaders. Цвета из пространств вне sRGB, например Display P3, сохраняются вплоть до платформенного рендеринга и больше не обрезаются до sRGB.

Это как раз та самая проблема с блеклым OLED из вступления. Раньше насыщенный цвет в P3 по пути к экрану мог быть сжат до sRGB.

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.colorspace.ColorSpaces

// A saturated green that sRGB can't represent.
// Defined in Display P3, it now survives to the display.
val vividGreen = Color(
    red = 0f, green = 1f, blue = 0.2f,
    alpha = 1f,
    colorSpace = ColorSpaces.DisplayP3
)

Также может понадобиться android:colorMode="wideColorGamut" для вашей Activity в манифесте.

Почему это важно

Хороший пример реального применения расширенной гаммы — экран Now Playing в музыкальном приложении. Цвета извлекаются из обложки альбома и используются для создания mesh-градиента. Это идеальный пример применения mesh, а wide color гарантирует, что он останется насыщенным и не будет выглядеть выцветшим.

В Android-приложении с MVVM я бы извлекал палитру из обложки альбома во ViewModel и отдавал её через Kotlin Flow, чтобы Composable уже строил из неё mesh. Так UI остаётся «глупым», а архитектура — чистой.

Визуальная часть также важна при подготовке скриншотов приложения для оптимизации страницы в Google Play. Более сильное первое впечатление может привести к большему числу установок.

Перед релизом

  1. Проверьте приложение на устройствах без P3. Цвета должны корректно деградировать, поэтому тестируйте в том числе на бюджетных телефонах.
  2. Профилируйте заранее. При оптимизации производительности Android я бы рекомендовал начинать со статических mesh-градиентов и переходить к анимированным только после профилирования.
  3. Не используйте сетки повсюду. В большинстве случаев обычный сплошной цвет всё ещё остаётся лучшим вариантом.

Если вы готовитесь к Android-собеседованиям, вопрос «Как Compose работает с цветовыми пространствами?» скоро может стать очень хорошим вопросом.

Вывод

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

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Telegram

Популярное

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: