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 Divider(color = colorResource(R.color.purple_200))
colorResource
работает, как и ожидалось, со статическими цветами, но выравнивает ресурсы списка состояний цвета .
Векторные ресурсы и графические ресурсы
Используйте 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 )
painterResource
декодирует и анализирует содержимое ресурса в основном потоке.
Анимированные векторные рисунки
Используйте 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 )
Иконки
Jetpack Compose поставляется с объектом Icons
, который является точкой входа для использования значков материалов в Compose. Существует пять различных тем значков: «Заливка» , «Очерченный» , «Закругленный» , «Двухцветный» и «Резкий» . Каждая тема содержит одни и те же значки, но с отдельным визуальным стилем. Обычно вам следует выбрать одну тему и использовать ее во всем приложении для обеспечения единообразия.
Чтобы нарисовать значок, вы можете использовать составной Icon
, который применяет оттенок и обеспечивает размер макета, соответствующий значку.
Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
Некоторые из наиболее часто используемых значков доступны как часть зависимости androidx.compose.material
. Чтобы использовать любые другие значки материалов, добавьте material-icons-extended
в файл build.gradle
.
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.06.00')
implementation composeBom
implementation 'androidx.compose.material:material-icons-extended'
}
Шрифты
Чтобы использовать шрифты в Compose, загрузите и добавьте файлы шрифтов непосредственно в APK-файлы, поместив их в папку res/font
.
Загрузите каждый шрифт с помощью Font
API и создайте с ним FontFamily
, который вы сможете использовать в экземплярах TextStyle
для создания собственной Typography
. Ниже приведен код, взятый из примера компоновки 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 см. на странице «Загружаемые шрифты» .
Узнайте больше о типографике в документации Theming in Compose.
{% дословно %}Рекомендуется для вас
- Примечание: текст ссылки отображается, когда JavaScript отключен.
- Загрузка изображений {:#loading-images}
- Material Design 2 в Compose
- Системы индивидуального дизайна в Compose