6. Modifier, Модификаторы и аргументы composable функций

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

Отображение элементов можно настраивать двумя способами:

1. С помощью параметров функции

2. С помощью Modifier

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

Для текста мы уже использовали параметры text (обязательный) и fontSize. Есть и другие: шрифт, межстрочный интервал, цвет и так далее. Применим некоторые из них.

Установка цвета текста в Jetpack Compose

Улучшим внешний вид хедера, используя стандартные параметры функции Text. Начнём с изменения цвета — нужные цвета определим в файле ui.theme.Color.kt. Здесь уже есть стандартные цвета в ARGB формате: 0xFF — это альфа-канал (прозрачность), FF означает полностью непрозрачный цвет.

Стандартные значения оставим без изменений, чтобы не ломать тему. Добавим два собственных цвета: основной чёрный и серый для подзаголовков. В отличие от XML, цвета хранятся в Kotlin-файле и объявляются как переменные.

val mainBlackColor = Color(0xFF1E1E1E)
val subtitleGrayColor = Color(0xFF8C8C8C)

Передаём параметру color нужную переменную — для заголовка и подзаголовка.

Установка шрифтов в Jetpack Compose

Поменяем шрифт. Файлы шрифтов размещаются в ресурсном каталоге font. Чтобы установить шрифт, обращаемся к параметру fontFamily и задаём значение вида FontFamily(Font(R.font.gilroy_semibold)), передавая ID ресурса файла шрифта.

Распределим шрифты: полужирный для заголовка, средний для подзаголовка и жирный для текста кнопок. Для изменения текста на кнопках обращаемся к параметру Text соответствующей функции.

Модификаторы в Jetpack Compose / Modifier

Модификаторы можно применять к любым composable элементам. Они позволяют не только изменять внешний вид компонентов, но и управлять их функциональностью и поведением: менять размер, добавлять отступы, перестраивать вёрстку.

Кроме этого, модификаторы делают элементы интерактивными: любой компонент можно сделать кликабельным, добавить drag-and-drop, настроить масштабирование или скроллинг. И это лишь малая часть возможностей.

Добавление изображения / Image

Продемонстрируем ключевые особенности на примере изображения. Создадим отдельную функцию с Column внутри — сначала изображение, под ним текст. Изображение добавлено в ресурсный каталог Drawable.

Для вёрстки используем функцию Image, первым параметром которой является Painter — он подходит как для растровых, так и для векторных изображений. Обязательные параметры: painter (ресурс изображения) и contentDescription (описание для скринридеров).

Для кликабельной иконки (аналог ImageButton) в Compose обычно используется IconButton. Здесь мы используем Image намеренно — для демонстрации возможностей модификаторов.

Устанавливаем изображение через painterResource(R.drawable.rocket). После добавления вызова функции в setContent центрируем текст и картинку через параметр horizontalAlignment у колонки.

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

Модификация изображения – кликабельность

Уменьшим размер изображения с помощью модификатора size(120.dp) — он изменяет размер сразу по обеим осям. При необходимости можно использовать width или height по отдельности.

Чтобы сделать изображение кликабельным, добавляем модификатор clickable с обязательным параметром onClick. Для красивого ripple-эффекта, как на кнопках, добавляем параметр indication = ripple().

Ripple-эффект и InteractionSource

Для корректной работы ripple необходимо добавить interactionSource. InteractionSource отслеживает взаимодействия с элементом: нажат ли он, есть ли фокус и так далее. Без него ripple не знает, когда применять анимацию — он не может "знать" о статусе нажатия. Подробнее этот механизм разберём в отдельном уроке.

Порядок модификаторов

Сделаем изображение круглым: вызываем clip(CircleShape). Но при клике ripple-эффект охватывает всю квадратную площадь блока, а не только область круга. Почему?

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

Правило: более низкоуровневые изменения (например, обрезка) размещаются ближе к элементу, высокоуровневые (например, кликабельность) — дальше.

Как это работает:

• clip ниже clickable(применяется первым): сначала обрезается видимая часть, затем clickable определяет область клика по полной области элемента — ripple становится квадратным.
• clip выше clickable: сначала обрабатывается кликабельность, затем обрезается и видимая часть, и ripple — эффект принимает форму круга.

Modifier для добавления тени

Добавим тень: shadow(3.dp, CircleShape). Первый параметр — размер тени, второй — форма.

Порядок важен: shadow должен стоять над clip. Если поместить его ниже — тень тоже обрежется вместе с содержимым.

Image(
    painter = painterResource(R.drawable.rocket),
    contentDescription = "",
    modifier = Modifier
        .size(120.dp)
        .shadow(3.dp, CircleShape)
        .clip(CircleShape)
        .clickable(
            onClick = {},
            indication = ripple(),
            interactionSource = remember { MutableInteractionSource() }
        )
)

После отключения отладочного фона изображение выглядит объёмным и напоминает кнопку.

Другие модификаторы

Часто используемые модификаторы:

• .fillMaxSize(), .fillMaxWidth(), .fillMaxHeight() — заполнение доступного пространства.
• .background — окраска фона элемента.
• .clip — обрезка по форме; принимает RoundedCornerShape для скругления углов.
• .alpha — прозрачность элемента.
• .rotate — поворот относительно собственной оси; принимает градус типа Float.

Когда погрузимся в хранение состояния — продемонстрирую ещё более эффектные возможности модификаторов.

Что дальше?

В следующем уроке рассмотрим работу со стилями и темами в Jetpack Compose.