Jetpack Compose ma dostęp do zasobów określonych w projekcie Androida. W tym dokumencie opisujemy niektóre z funkcji API Compose, które pozwalają to zrobić.
Zasoby to dodatkowe pliki i treści statyczne używane w kodzie, np. mapy bitowe, definicje układu, ciągi znaków interfejsu użytkownika, instrukcje animacji itp. Jeśli nie znasz jeszcze zasobów na Androidzie, zapoznaj się z przewodnikiem po zasobach aplikacji.
Strings
Najpopularniejszym typem zasobu są Strings. Użyj interfejsu API stringResource
, aby pobrać ciąg znaków statycznie zdefiniowany 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) )
Funkcja 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) )
Ciąg znaków w liczbie mnogiej (eksperymentalny)
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 ) )
Gdy używasz metody pluralStringResource
, musisz dwukrotnie przekazać wartość liczbową, jeśli ciąg zawiera wartość liczbową. Na przykład w przypadku ciągu %1$d minutes
pierwszy parametr licznika wybiera odpowiedni ciąg znaków, a drugi jest wstawiany do zmiennej %1$d
.
Jeśli ciągi mnogie nie zawierają formatowania ciągów, nie musisz przekazywać trzeciego parametru do funkcji pluralStringResource
.
Więcej informacji o liczbie mnogiej znajdziesz w dokumentacji ciągów ilościowych.
Wymiary
Wymiary możesz też pobierać z pliku XML zasobów za pomocą 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 stosujesz tworzenie wiadomości stopniowo w swojej aplikacji, użyj interfejsu colorResource
API, 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))
colorResource
działa zgodnie z oczekiwaniami w przypadku kolorów statycznych, ale spłaszcza zasoby listy kolorów.
Zasoby wektorowe i zasoby graficzne
Interfejs API painterResource
służy do wczytywania formatów zasobów rysowalnych w formie wektorowej lub zrastrowanych, np. PNG. Nie musisz znać typu elementu rysowalnego. Wystarczy, że użyjesz painterResource
w komponentach 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 )
painterResource
dekoduje i analizuje zawartość zasobu w wątku głównym.
Animowane elementy rysunkowe wektorowe
Interfejs API AnimatedImageVector.animatedVectorResource
umożliwia wczytanie animowanego pliku XML rysowalnego w formacie wektorowym. Metoda zwraca instancję AnimatedImageVector
. Aby wyświetlić animowany obraz, użyj metody rememberAnimatedVectorPainter
do utworzenia elementu Painter
, którego można używać w elementach kompozycyjnych Image
i Icon
.
Wartość logiczna atEnd
w metodzie rememberAnimatedVectorPainter
wskazuje, czy obraz powinien zostać narysowany na końcu wszystkich animacji.
Jeśli ten parametr jest używany ze zmiennym stanem, zmiana tej wartości aktywuje 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 wyjścia do korzystania z ikon materiałów w funkcji tworzenia wiadomości. Dostępnych jest 5 różnych motywów ikon: Wypełniony, Z konturem, Zaokrąglony, Dwukolorowy i Sharp. Każdy motyw zawiera te same ikony, ale ma odrębny styl wizualny. Aby zachować spójność, należy wybrać jeden motyw i używać go w aplikacji.
Aby narysować ikonę, możesz użyć funkcji kompozycyjnej Icon
, która stosuje odcień i określa rozmiar układu odpowiadający tej ikonie.
Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
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:2024.05.00')
implementation composeBom
implementation 'androidx.compose.material:material-icons-extended'
}
Czcionki
Aby używać czcionek w aplikacji Compose, pobierz i połącz pliki czcionek bezpośrednio w plikach APK, umieszczając je w folderze res/font
.
Wczytaj każdą czcionkę za pomocą interfejsu API Font
i utwórz element FontFamily
, którego można używać w instancjach TextStyle
do tworzenia własnychTypography
. Poniżej znajduje się kod pobrany z przykładowego pliku Crane oraz jego 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() } }
Informacje o tym, jak używać czcionek do pobrania w sekcji Utwórz, znajdziesz na stronie Czcionki do pobrania.
Więcej informacji o typografii znajdziesz w dokumentacji tematów w oknie tworzenia wiadomości.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Wczytywanie obrazów {:#loading-images}
- Material Design 2 w obszarze Utwórz
- Niestandardowe systemy projektowania w usłudze Compose