Jetpack Compose kann auf die in Ihrem Android-Projekt definierten Ressourcen zugreifen. Dieses werden einige der dafür angebotenen APIs von Compose beschrieben.
Ressourcen sind zusätzliche Dateien und statische Inhalte, die Ihr Code verwendet, wie wie Bitmaps, Layout-Definitionen, Benutzeroberflächen-Strings, Animationsanweisungen, und vieles mehr. Wenn Sie mit Ressourcen in Android nicht vertraut sind, sehen Sie sich die App Leitfaden zu Ressourcen.
Strings
Der gängigste Ressourcentyp sind Ihre Strings. stringResource
API verwenden
, um einen statisch definierten String in Ihren XML-Ressourcen abzurufen.
// In the res/values/strings.xml file // <string name="compose">Jetpack Compose</string> // In your Compose code Text( text = stringResource(R.string.compose) )
stringResource
funktioniert auch mit Positionsformatierung.
// 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) )
String-Pluralformen (experimentell)
Verwenden Sie die pluralStringResource
API, um eine Pluralform mit einer bestimmten Anzahl zu laden.
// 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 ) )
Bei Verwendung der Methode pluralStringResource
müssen Sie die Zählung zweimal übergeben.
Ihre Zeichenfolge enthält eine Zahlenformatierung. Für das Feld
String %1$d minutes
enthält, wird mit dem ersten Zählparameter die entsprechende Pluralform ausgewählt.
String und der zweite Count-Parameter wird in den Platzhalter %1$d
eingefügt.
Wenn Ihre Pluralzeichenfolgen keine Zeichenfolgenformatierung enthalten, müssen Sie keine
den dritten Parameter auf pluralStringResource
.
Weitere Informationen zu Pluralformen finden Sie in der Dokumentation zum Mengenstring
Abmessungen
Verwenden Sie auf ähnliche Weise die dimensionResource
API, um Dimensionen aus einer Ressourcen-XML-Datei abzurufen.
-Datei.
// 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) )
Farben
Wenn Sie in Ihrer App die Funktion „Schreiben“ schrittweise einführen, verwenden Sie die colorResource
API zum Abrufen von Farben aus einer Ressourcen-XML-Datei.
// In the res/colors.xml file // <color name="purple_200">#FFBB86FC</color> // In your Compose code Divider(color = colorResource(R.color.purple_200))
colorResource
funktioniert wie erwartet mit statischen Farben, verringert jedoch die Farbe
Statuslistenressourcen.
Vektor-Assets und Bildressourcen
Verwende die painterResource
API, um Vektor-Drawables oder Raster zu laden
wie PNGs. Sie müssen nicht die Art des Drawable kennen,
Verwenden Sie painterResource
in zusammensetzbaren Image
-Funktionen oder paint
-Modifikatoren.
// 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
decodiert und parst den Inhalt der Ressource auf der Hauptseite
Diskussions-Thread.
Animierte Vektor-Drawables
Verwenden Sie die AnimatedImageVector.animatedVectorResource
API, um ein animiertes
Vektor-Drawable-XML. Die Methode gibt eine AnimatedImageVector
-Instanz zurück. In
um das animierte Bild anzuzeigen, rememberAnimatedVectorPainter
.
Methode zum Erstellen einer Painter
, die in zusammensetzbaren Funktionen Image
und Icon
verwendet werden kann.
Der boolesche Parameter atEnd
der Methode rememberAnimatedVectorPainter
gibt an, ob das Bild am Ende aller Animationen gezeichnet werden soll.
Bei Verwendung mit einem änderbaren Status lösen Änderungen an diesem Wert die entsprechende
Animation.
// 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 )
Symbole
Jetpack Compose enthält das Icons
-Objekt, das der Einstiegspunkt für die Verwendung von
Material-Symbole in
Schreiben. Es gibt fünf verschiedene Symbolthemen:
Ausgefüllt,
Umrissen,
Rund,
TwoTone und
Scharf. Jedes
dieselben Symbole, aber über einen unverwechselbaren visuellen Stil. Sie sollten
wählen Sie in der Regel ein Design aus und verwenden es aus Gründen der Einheitlichkeit in Ihrer gesamten Anwendung.
Um ein Symbol zu zeichnen, können Sie die
Icon
zusammensetzbar, bei der eine Färbung angewendet wird und die Layoutgröße dem Symbol entspricht.
Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
Einige der am häufigsten verwendeten Symbole sind im
androidx.compose.material
-Abhängigkeit. Wenn Sie andere Materialsymbole verwenden möchten,
Fügen Sie der Datei build.gradle
die Abhängigkeit material-icons-extended
hinzu.
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.06.00')
implementation composeBom
implementation 'androidx.compose.material:material-icons-extended'
}
Schriftarten
Um Schriftarten in Compose verwenden zu können, laden Sie die Schriftartdateien direkt in der
APKs, indem du sie im Ordner res/font
abspeicherst.
Laden Sie jede Schriftart mithilfe der
Font
API und erstellen Sie eine
FontFamily
mit
die Sie in Ihren
TextStyle
Instanzen zu
erstelle deine eigenen
Typography
Die
Der folgende Code stammt aus dem
Kran
und der zugehörigen
Typography.kt
-Datei.
// 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() } }
Informationen zur Verwendung von Schriftarten zum Herunterladen in Compose findest du in der Seite Schriftarten zum Herunterladen:
Weitere Informationen zur Typografie finden Sie unter Designs beim Verfassen von Texten. Dokumentation
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Bilder werden geladen {:#loading-images}
- Material Design 2 in Compose
- Benutzerdefinierte Designsysteme in Compose