Ressourcen in Compose

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 die zusätzlichen Dateien und statischen Inhalte, die in Ihrem Code verwendet werden, z. B. Bitmaps, Layoutdefinitionen, Benutzeroberflächenstrings und Animationsanweisungen. Wenn Sie mit Ressourcen in Android nicht vertraut sind, lesen Sie den Leitfaden zu App-Ressourcen.

Strings

Der häufigste Ressourcentyp sind 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)
)
ResourcesSnippets.kt

stringResource kann auch mit positioneller Formatierung verwendet werden.

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

Mehrzahl von Strings (experimentell)

Verwenden Sie die pluralStringResource API, um ein Pluralwort mit einer bestimmten Menge 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
    )
)
ResourcesSnippets.kt

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)
)
ResourcesSnippets.kt

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))
ResourcesSnippets.kt

colorResource funktioniert wie erwartet mit statischen Farben, verringert jedoch die Farbe Statuslistenressourcen.

Achtung :Sie bevorzugen Farben aus dem Design gegenüber hartcodierten Farben. Obwohl mit der Funktion colorResource auf Farben zugreifen, die Farben deiner App in einem MaterialTheme definiert sind, kann über zusammensetzbare Funktionen wie MaterialTheme.colors.primary aufgerufen werden. Weitere Informationen Weitere Informationen dazu finden Sie unter Systemdesigns in Compose Dokumentation.

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
)
ResourcesSnippets.kt

painterResource decodiert und parst den Inhalt der Ressource auf der Hauptseite Diskussions-Thread.

Hinweis: Im Gegensatz zu Context.getDrawable kann painterResource nur Plattformtypen vom Typ BitmapDrawable und VectorDrawable Drawable laden.

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. Wenn „on“ mit einem veränderbaren Status verwendet wird, lösen Änderungen an diesem Wert die entsprechende Animation aus.

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

Symbole

Jetpack Compose enthält das Icons-Objekt, das der Einstiegspunkt für die Verwendung von Material Icons in Compose ist. Es gibt fünf verschiedene Symbolthemen: Ausgefüllt, Umrissen, Rund, TwoTone und Scharf. Jedes Design enthält dieselben Symbole, aber in einem eigenen visuellen Stil. Sie sollten in der Regel ein Design auswählen und es für Einheitlichkeit in Ihrer Anwendung verwenden.

Zum Zeichnen eines Symbols können Sie das Icon-Kompositelement verwenden, das eine Färbung anwendet und die Layoutgröße an das Symbol anpasst.

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

Einige der am häufigsten verwendeten Symbole sind im androidx.compose.material-Abhängigkeit. Wenn Sie eines der anderen Material Icons 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.09.00')
  implementation composeBom

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

Hinweis: Symbole behalten die von Material definierten Namen, aber ihre snake_case-Name in PascalCase konvertiert. Beispiel: add_alarm wird zu AddAlarm Symbole, die mit einer Zahl beginnen, z. B. 360, haben das Präfix _. wird zu _360.

Warnung: material-icons-extended ist eine große Bibliothek und kann sich auf Ihr APK auswirken. Größe. Ziehen Sie daher die Verwendung von R8/Proguard in Produktions-Builds in Betracht, um die nicht verwendet werden. Außerdem können Ihre die Build-Zeit des Projekts und die Ladezeiten der Vorschauen in Android Studio während der Entwicklung. Mit material-icons-extended können Sie dagegen durch Schnellzugriff auf die neuesten Versionen aller Symbole schneller iterieren. Sie können diese Bibliothek auch verwenden, um den Quellcode des Symbols zu kopieren, um eine feste Kopie in Ihrer App zu haben, oder die Symbole mit der Funktion „Vektor-Assets importieren“ in Android Studio importieren.

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 Der folgende Code stammt aus dem Crane-Kompositionsbeispiel 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()
    }
}
ResourcesSnippets.kt

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