Jetpack Compose ma dostęp do zasobów zdefiniowanych w projekcie Android. Z tego dokumentu dowiesz się, jak to zrobić za pomocą interfejsów API oferowanych przez Compose.
Zasoby to dodatkowe pliki i treści statyczne wykorzystywane w kodzie, takie jak jak mapy bitowe, definicje układu, ciągi znaków w interfejsie, instrukcje animacji i inne. Jeśli nie korzystasz jeszcze z zasobów na Androidzie, zapoznaj się z aplikacjami z omówieniem zasobów.
Strings
Najczęstszym 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) )
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) )
Liczba mnoga ciągu znaków (eksperymentalna)
Aby wczytać liczbę mnogą z określoną liczbą, 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 ) )
Jeśli ciąg tekstowy zawiera formatowanie ciągu 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 count wybiera odpowiedni ciąg znaków liczby mnogiej, a drugi parametr count jest wstawiany w miejscu obiektu zastępczego %1$d
.
Jeśli ciągi w liczbie mnogiej nie zawierają formatowania ciągów, nie musisz przekazywać
trzeci parametr do pluralStringResource
.
Więcej informacji o liczbie mnogiej znajdziesz w dokumentację ciągu znaków ilości.
Wymiary
Podobnie, aby uzyskać 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) )
Kolory
Jeśli wprowadzasz w swojej aplikacji funkcję tworzenia wiadomości stopniowo, stosuj colorResource
Interfejs API do pobierania kolorów z pliku XML zasobu.
// In the res/colors.xml file // <color name="purple_200">#FFBB86FC</color> // In your Compose code Divider(color = colorResource(R.color.purple_200))
Funkcja colorResource
działa zgodnie z oczekiwaniami w przypadku kolorów statycznych, ale wygładza kolory
zasobów z listą stanów.
Zasoby wektorowe i obrazy
Aby wczytać wektory lub rastrowe formaty zasobów, takie jak PNG, użyj interfejsu API painterResource
. Nie musisz znać typu obiektu, który można narysować,
użyj painterResource
w Image
elementach kompozycyjnych 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 )
painterResource
dekoduje i analizuje zawartość zasobu w wątku głównym.
Obiekty wektorowe z animacją
Użyj interfejsu API AnimatedImageVector.animatedVectorResource
, aby wczytać animowane obiekty wektorowe w formacie XML. Metoda zwraca instancję AnimatedImageVector
. Aby wyświetlić animowany obraz, użyj metody rememberAnimatedVectorPainter
do utworzenia Painter
, którego można używać w komponatach Image
i Icon
.
Parametr logiczny atEnd
metody rememberAnimatedVectorPainter
wskazuje, czy obraz ma być narysowany na końcu wszystkich animacji.
Jeśli jest używany w połączeniu ze stanem zmiennym, zmiany tej wartości powodują 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 )
Ikony
Jetpack Compose zawiera obiekt Icons
, który jest punktem wejścia do korzystania z ikon Material Design w Compose. Dostępnych jest 5 odrębnych motywów ikon: wypełnione, zarysowane, zaokrąglone, dwukolorowe i ostre. Każdy
motyw zawiera te same ikony, ale różniący się stylem wizualnym. Zalecenia
zwykle wybiera się jeden motyw i używa go w całej aplikacji, aby uzyskać spójność.
Aby narysować ikonę, możesz użyć komponentu Icon
, który stosuje odcień i dostarcza rozmiaru układu dopasowanego do ikony.
Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
Niektóre z najczęściej używanych ikon są dostępne jako część
Zależność androidx.compose.material
. Aby użyć innych ikon Material,
dodaj zależność material-icons-extended
do pliku build.gradle
.
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.09.03')
implementation composeBom
implementation 'androidx.compose.material:material-icons-extended'
}
Czcionki
Aby używać czcionek w Compose, pobierz i zpakuj pliki czcionek bezpośrednio w plikach APK, umieszczając je w folderze res/font
.
Załaduj każdy font za pomocą interfejsu API Font
i utwórz z nich FontFamily
, których możesz używać w przypadku instancji TextStyle
, aby tworzyć własne Typography
.
ten kod pochodzi z
Dźwig
kompozycja i jej fragment
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() } }
Informacje o używaniu w Compose czcionek do pobrania znajdziesz na stronie Czcionki do pobrania.
Więcej informacji o typografii znajdziesz w sekcji Motywy w tworzeniu wiadomości dokumentacja
Polecane dla Ciebie
- Uwaga: tekst linku wyświetla się, gdy JavaScript jest wyłączony
- Wczytuję obrazy {:#loading-images}
- Material Design 2 w Compose
- Niestandardowe systemy projektowania w Compose