Ресурсы в Compose

Jetpack Compose может получать доступ к ресурсам, определенным в проекте Android. В этом документе объясняются некоторые API, которые Compose предлагает для этого.

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

Струны

Самый распространенный тип ресурсов – строки. Используйте API stringResource, чтобы получить строку, статически определенную в ресурсах XML.

// In the res/values/strings.xml file
// <string name="compose">Jetpack Compose</string>

// In your Compose code
Text(
    text = stringResource(R.string.compose)
)

stringResource также работает с позиционным форматированием.

// In the res/values/strings.xml file
// <string name="congratulate">Happy %1$s %2$d</string>

// In your Compose code
Text(
    text = stringResource(R.string.congratulate, "New Year", 2021)
)

Строки во множественном числе (экспериментальная функция)

Используйте API pluralStringResource, чтобы загрузить множественное число с определенным количеством.

// In the res/strings.xml file
// <plurals name="runtime_format">
//    <item quantity="one">%1$d minute</item>
//    <item quantity="other">%1$d minutes</item>
// </plurals>

// In your Compose code
Text(
    text = pluralStringResource(
        R.plurals.runtime_format,
        quantity,
        quantity
    )
)

При использовании метода pluralStringResource вам нужно передать количество дважды, если строка содержит форматирование с числом. Например, для строки %1$d minutes первый параметр count выбирает подходящую строку во множественном числе, а второй параметр count вставляется в плейсхолдер %1$d. Если строки во множественном числе не содержат форматирования, передавать третий параметр в pluralStringResource не нужно.

Подробнее о строках количества…

Размеры

Аналогичным образом используйте API dimensionResource, чтобы получить размеры из XML-файла ресурса.

// In the res/values/dimens.xml file
// <dimen name="padding_small">8dp</dimen>

// In your Compose code
val smallPadding = dimensionResource(R.dimen.padding_small)
Text(
    text = "...",
    modifier = Modifier.padding(smallPadding)
)

Цвета

Если вы постепенно внедряете Compose в свое приложение, используйте API colorResource, чтобы получить цвета из XML-файла ресурсов.

// In the res/colors.xml file
// <color name="purple_200">#FFBB86FC</color>

// In your Compose code
HorizontalDivider(color = colorResource(R.color.purple_200))

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

Векторные объекты и графические ресурсы

Используйте API painterResource, чтобы загружать объекты в формате VectorDrawable или растровые объекты, например PNG. Вам не нужно знать тип объекта Drawable, просто используйте painterResource в composable-функциях Image или модификаторах paint.

// Files in res/drawable folders. For example:
// - res/drawable-nodpi/ic_logo.xml
// - res/drawable-xxhdpi/ic_logo.png

// In your Compose code
Icon(
    painter = painterResource(id = R.drawable.ic_logo),
    contentDescription = null // decorative element
)

painterResource декодирует и анализирует содержимое ресурса в основном потоке.

Анимированные векторные изображения

Используйте API AnimatedImageVector.animatedVectorResource, чтобы загрузить XML-файл анимированного класса VectorDrawable. Метод возвращает экземпляр AnimatedImageVector. Чтобы показать анимированное изображение, используйте метод rememberAnimatedVectorPainter для создания Painter, который можно использовать в composable-функциях Image и Icon. Логический параметр atEnd метода rememberAnimatedVectorPainter указывает, должно ли изображение быть нарисовано в конце всех анимаций. Если используется с изменяемым состоянием, изменения этого значения запускают соответствующую анимацию.

// Files in res/drawable folders. For example:
// - res/drawable/ic_hourglass_animated.xml

// In your Compose code
val image =
    AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
val atEnd by remember { mutableStateOf(false) }
Icon(
    painter = rememberAnimatedVectorPainter(image, atEnd),
    contentDescription = null // decorative element
)

Значки

В Jetpack Compose есть объект Icons, который является точкой входа для использования значков Material Design в Compose. Существует пять тем значков: Filled, Outlined, Rounded, TwoTone и Sharp. В каждой теме используются одни и те же значки, но в разном визуальном стиле. Обычно выбирается одна тема, которая используется во всем приложении для единообразия.

Чтобы нарисовать значок, можно использовать компонент Icon, который применяет оттенок и обеспечивает размер макета, соответствующий значку.

Icon(Icons.Rounded.Menu, contentDescription = "Localized description")

Некоторые из наиболее часто используемых значков доступны в зависимости androidx.compose.material. Чтобы использовать другие значки Material Design, добавьте зависимость material-icons-extended в файл build.gradle.

dependencies {
  def composeBom = platform('androidx.compose:compose-bom:2026.09.00')
  implementation composeBom

  implementation 'androidx.compose.material:material-icons-extended'
}

Шрифты

Чтобы использовать шрифты в Compose, скачайте и упакуйте файлы шрифтов непосредственно в APK, поместив их в папку res/font.

Загрузите каждый шрифт с помощью API Font и создайте с ними FontFamily, который можно использовать в экземплярах TextStyle, чтобы создать собственный Typography. Ниже приведен код из примера Compose Crane и его файла Typography.kt.

// Define and load the fonts of the app
private val light = Font(R.font.raleway_light, FontWeight.W300)
private val regular = Font(R.font.raleway_regular, FontWeight.W400)
private val medium = Font(R.font.raleway_medium, FontWeight.W500)
private val semibold = Font(R.font.raleway_semibold, FontWeight.W600)

// Create a font family to use in TextStyles
private val craneFontFamily = FontFamily(light, regular, medium, semibold)

// Use the font family to define a custom typography
val craneTypography = Typography(
    titleLarge = TextStyle(
        fontFamily = craneFontFamily
    ) /* ... */
)

// Pass the typography to a MaterialTheme that will create a theme using
// that typography in the part of the UI hierarchy where this theme is used
@Composable
fun CraneTheme(content: @Composable () -> Unit) {
    MaterialTheme(typography = craneTypography) {
        content()
    }
}

Информацию о том, как использовать скачиваемые шрифты в Compose, можно найти на странице Скачиваемые шрифты.

Подробнее о типографике можно узнать из документации по темам в Compose.