Zasoby w sekcji Utwórz

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

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

Strings

Najpopularniejszym typem zasobu są ciągi znaków. Użyj interfejsu stringResource API , aby pobrać ciąg znaków zdefiniowany statycznie w zasobach 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 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 (eksperymentalna)

Użyj interfejsu pluralStringResource API, aby wczytać liczbę mnogą z określoną ilością.

// 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ągu znaków z liczbą, musisz przekazać liczbę 2 razy, gdy używasz metody pluralStringResource. 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 obiektu zastępczego %1$d. Jeśli ciągi w liczbie mnogiej nie zawierają formatowania, nie musisz przekazywać trzeciego parametru do funkcji pluralStringResource.

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

Wymiary

Podobnie za pomocą interfejsu dimensionResource API możesz pobrać wymiary z pliku XML zasobu.

// 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 colorResourceAPI, aby pobrać kolory z pliku XML zasobów.

// 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 działa zgodnie z oczekiwaniami w przypadku statycznych kolorów, ale spłaszcza zasoby listy stanów kolorów.

Komponenty wektorowe i zasoby graficzne

Użyj interfejsu painterResource API, aby wczytać rysunki wektorowe lub formaty zasobów rastrowych, takie jak PNG. Nie musisz znać typu elementu rysowalnego. Wystarczy, że użyjesz painterResource w funkcjach kompozycyjnych Image lub modyfikatorach 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 dekoduje i analizuje zawartość zasobu w głównym wątku.

Animowane obiekty rysowalne wektorowo

Użyj interfejsu AnimatedImageVector.animatedVectorResource API, aby wczytać animowany plik XML z wektorowym obrazem do rysowania. Metoda zwraca instancję AnimatedImageVector. Aby wyświetlić animowany obraz, użyj metody rememberAnimatedVectorPainter do utworzenia obiektu Painter, którego można używać w funkcjach kompozycyjnych Image i Icon. Parametr logiczny atEnd metody rememberAnimatedVectorPainter określa, czy obraz ma być rysowany na końcu wszystkich animacji. Jeśli jest używana ze stanem modyfikowalnym, zmiany tej wartości wywołują odpowiednią animację.

// 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 korzystania z ikon Material w Compose. Dostępnych jest 5 motywów ikon: wypełnione, obrysowane, zaokrąglone, dwukolorowe i ostre. 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ć komponentu 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 z pozostałych ikon Material, dodaj zależność material-icons-extended do pliku build.gradle.

dependencies {
  def composeBom = platform('androidx.compose:compose-bom:2025.05.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.

Załaduj każdą czcionkę za pomocą interfejsu API Font i utwórz za ich pomocą obiekt FontFamily, którego możesz używać w instancjach TextStyle do tworzenia własnych obiektów Typography. Poniższy kod pochodzi z przykładowej aplikacji Crane w Compose i z jej pliku 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

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

Więcej informacji o typografii znajdziesz w dokumentacji dotyczącej motywów w Compose.