Ресурсы в 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)
)
ResourcesSnippets.kt

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)
)
ResourcesSnippets.kt

Множественное число строк (экспериментально)

Используйте 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
    )
)
ResourcesSnippets.kt

При использовании метода pluralStringResource вам необходимо передать счетчик дважды, если ваша строка включает форматирование строки с числом. Например, для строки %1$d minutes первый параметр счетчика выбирает соответствующую строку множественного числа, а второй параметр счетчика вставляется в заполнитель %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)
)
ResourcesSnippets.kt

Цвета

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

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

// In your Compose code
Divider(color = colorResource(R.color.purple_200))
ResourcesSnippets.kt

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

Предупреждение: предпочитайте цвета из темы, а не жестко закодированные цвета. Несмотря на то, что можно получить доступ к цветам с помощью функции colorResource , рекомендуется, чтобы цвета вашего приложения были определены в MaterialTheme , к которому можно получить доступ из ваших компонуемых объектов, таких как MaterialTheme.colors.primary . Узнайте больше об этом в документации по системам дизайна в Compose .

Векторные ресурсы и ресурсы изображений

Используйте API painterResource для загрузки векторных рисунков или растровых форматов ресурсов, таких как PNG. Вам не нужно знать тип рисунков, просто используйте painterResource в составных 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
)
ResourcesSnippets.kt

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

Примечание: в отличие от Context.getDrawable , painterResource может загружать только типы Drawable платформы BitmapDrawable и VectorDrawable .

Анимированные векторные рисунки

Используйте API AnimatedImageVector.animatedVectorResource для загрузки анимированного векторного рисуемого XML. Метод возвращает экземпляр AnimatedImageVector . Чтобы отобразить анимированное изображение, используйте метод rememberAnimatedVectorPainter для создания Painter , который можно использовать в компонуемых 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
)
ResourcesSnippets.kt

Иконки

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

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

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

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

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

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

Примечание: Иконки сохраняют те же имена, которые определены Material, но их имя snake_case преобразуется в PascalCase. Например, add_alarm становится AddAlarm . Иконки, которые начинаются с числа, например 360, имеют префикс _ , становясь _360 .

Предупреждение: material-icons-extended — большая библиотека, которая может повлиять на размер вашего APK. По этой причине рассмотрите возможность использования R8/Proguard в производственных сборках для удаления неиспользуемых ресурсов. Кроме того, из-за большого размера время сборки вашего проекта и время загрузки предварительных просмотров Android Studio могут увеличиться во время разработки. С другой стороны, material-icons-extended позволяет вам выполнять итерации быстрее за счет быстрого доступа к последним версиям всех иконок. Вы также можете использовать эту библиотеку для копирования исходного кода иконки, чтобы иметь фиксированную копию в своем приложении, или, в качестве альтернативы, импортировать иконки с помощью функции импорта векторных ресурсов Android Studio .

Шрифты

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

Загрузите каждый шрифт с помощью Font API и создайте FontFamily с ними, которые вы можете использовать в экземплярах TextStyle для создания собственного Typography . Ниже приведен код, взятый из примера Crane compose и его файла 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()
    }
}
ResourcesSnippets.kt

Информацию об использовании загружаемых шрифтов в Compose см. на странице Загружаемые шрифты .

Узнайте больше о типографике в документации Theming in Compose

{% дословно %} {% endverbatim %}