Zasoby w sekcji Utwórz

Jetpack Compose może uzyskiwać dostęp do zasobów zdefiniowanych w projekcie aplikacji na Androida. W tym dokumencie opisujemy niektóre interfejsy API Compose, które to umożliwiają.

Zasoby to dodatkowe pliki i treści statyczne używane przez kod, takie jak bitmapy, definicje układu, ciągi znaków interfejsu użytkownika, instrukcje animacji i inne. Jeśli nie znasz zasobów w Androidzie, zapoznaj się z przewodnikiem Omówienie zasobów aplikacji.

Strings

Najpopularniejszym typem zasobu są ciągi znaków. Aby pobrać ciąg znaków zdefiniowany statycznie w zasobach XML, użyj interfejsu API stringResource.

// 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

Interfejs stringResource działa też z formatowaniem pozycyjnym.

// 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

Liczba mnoga ciągów znaków (funkcja eksperymentalna)

Aby wczytać liczbę mnogą z określoną ilością, użyj interfejsu 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

Jeśli ciąg znaków zawiera formatowanie ciągów znaków z liczbą, podczas korzystania z metody pluralStringResource musisz przekazać liczbę 2 razy. Na przykład w przypadku ciągu znaków %1$d minutes, pierwszy parametr liczby wybiera odpowiedni ciąg znaków w liczbie mnogiej, a drugi parametr liczby jest wstawiany w miejsce symbolu zastępczego %1$d. Jeśli ciągi znaków w liczbie mnogiej nie zawierają formatowania ciągów znaków, nie musisz przekazywać trzeciego parametru do pluralStringResource.

Więcej informacji o liczbie mnogiej znajdziesz w dokumentacji dotyczącej ciągów znaków ilości.

Wymiary

Podobnie, aby pobrać wymiary z pliku XML zasobu, użyj interfejsu API dimensionResource.

// 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

Kolory

Jeśli wdrażasz Compose w aplikacji stopniowo, użyj interfejsu API colorResource, aby pobrać kolory z pliku XML zasobu.

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

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

colorResource działa zgodnie z oczekiwaniami w przypadku kolorów statycznych, ale spłaszcza zasoby listy stanów kolorów.

Komponenty wektorowe i zasoby graficzne

Aby wczytać obiekty rysowalne wektorowo lub formaty zasobów rastrowych, takie jak PNG, użyj interfejsu API painterResource. Nie musisz znać typu obiektu rysowalnego. Wystarczy, że użyjesz painterResource w Image funkcjach kompozycyjnych lub paint modyfikatorach.

// 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

Interfejs painterResource dekoduje i analizuje zawartość zasobu w wątku głównym.

Animowane obiekty rysowalne wektorowo

Aby wczytać animowany obiekt rysowalny wektorowo XML, użyj interfejsu API AnimatedImageVector.animatedVectorResource. Metoda zwraca instancję AnimatedImageVector. Aby wyświetlić animowany obraz, użyj rememberAnimatedVectorPainter metody, aby utworzyć Painter, którego można używać w elementach kompozycyjnych Image i Icon. Parametr logiczny atEnd metody rememberAnimatedVectorPainter wskazuje, czy obraz ma być rysowany na końcu wszystkich animacji. Jeśli jest używany ze stanem modyfikowalnym, zmiany tej wartości powodują uruchomienie odpowiedniej animacji.

// 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

Ikony

Jetpack Compose zawiera obiekt Icons, który jest punktem wejścia do używania ikon Material w Compose. Dostępnych jest 5 różnych motywów ikon: Filled, Outlined, Rounded, TwoTone i Sharp. Każdy motyw zawiera te same ikony, ale w innym stylu wizualnym. Zwykle należy wybrać jeden motyw i używać go w całej aplikacji, aby zachować spójność.

Aby narysować ikonę, możesz użyć elementu kompozycyjnego Icon , który stosuje odcień i zapewnia rozmiar układu pasujący do ikony.

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

Niektóre z najczęściej używanych ikon są dostępne w ramach zależności androidx.compose.material. Aby użyć dowolnej innej ikony Material, dodaj zależność material-icons-extended do pliku build.gradle.

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

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

Czcionki

Aby używać czcionek w Compose, pobierz i dołącz pliki czcionek bezpośrednio do plików APK, umieszczając je w folderze res/font.

Wczytaj każdą czcionkę za pomocą interfejsu API Font i utwórz z nich FontFamily, której możesz używać w instancjach TextStyle, aby utworzyć własną Typography. Poniższy kod pochodzi z przykładu Compose Crane i jego Typography.kt pliku.

// 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

Informacje o używaniu czcionek do pobrania w Compose znajdziesz na stronie Czcionki do pobrania.

Więcej informacji o typografii znajdziesz w dokumentacji Motywy w Compose.