Ressourcen in Compose

Jetpack Compose kann auf die in Ihrem Android-Projekt definierten Ressourcen zugreifen. In diesem Dokument werden einige der APIs beschrieben, die Compose für diesen Zweck bietet.

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. Verwenden Sie die stringResource API, um einen String abzurufen, der in Ihren XML-Ressourcen statisch definiert ist.

// 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 funktioniert auch mit der 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)
)
ResourcesSnippets.kt

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

Wenn Sie die Methode pluralStringResource verwenden, müssen Sie die Anzahl zweimal übergeben, wenn Ihr String eine Stringformatierung mit einer Zahl enthält. Für den String %1$d minutes wird beispielsweise mit dem ersten Zählparameter der entsprechende Pluralstring ausgewählt und der zweite Zählparameter wird in den Platzhalter %1$d eingefügt. Wenn Ihre Mehrzahl-Strings keine Stringformatierung enthalten, müssen Sie pluralStringResource nicht den dritten Parameter übergeben.

Weitere Informationen zu Pluralformen finden Sie in der Dokumentation zu Mengenstrings.

Abmessungen

Verwenden Sie die dimensionResource API, um Dimensionen aus einer Ressourcen-XML-Datei abzurufen.

// 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 Compose in Ihrer App schrittweise einführen, verwenden Sie die colorResource API, um Farben aus einer Ressourcen-XML-Datei abzurufen.

// 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, aber Liste mit Farbstatusressourcen werden flach.

Warnung :Verwenden Sie lieber Farben aus dem Design als hartcodierte Farben. Es ist zwar möglich, mit der Funktion colorResource auf Farben zuzugreifen, wir empfehlen jedoch, die Farben Ihrer App in einer MaterialTheme zu definieren, auf die über Ihre zusammensetzbaren Funktionen wie MaterialTheme.colors.primary zugegriffen werden kann. Weitere Informationen finden Sie in der Dokumentation zu Designsystemen in Compose.

Vektor-Assets und Bildressourcen

Verwenden Sie die painterResource API, um entweder Vektorgrafiken oder gerasterte Asset-Formate wie PNGs zu laden. Sie müssen den Typ des drawable nicht kennen. Verwenden Sie einfach painterResource in Image-Kompositen oder paint-Modifizierern.

// 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 analysiert den Inhalt der Ressource im Haupt-Thread.

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

Animierte Vektor-Drawables

Verwenden Sie die AnimatedImageVector.animatedVectorResource API, um eine animierte XML-Datei mit beweglichen Vektorgrafiken zu laden. Die Methode gibt eine AnimatedImageVector-Instanz zurück. Um das animierte Bild anzuzeigen, erstellen Sie mit der rememberAnimatedVectorPainter-Methode ein Painter, das in Image- und Icon-Kompositen verwendet werden kann. Der boolesche Parameter atEnd der Methode rememberAnimatedVectorPainter gibt an, ob das Bild am Ende aller Animationen zu zeichnen ist. 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 Symboldesigns: Ausgefüllt, Umrandet, Abgerundet, Zweifarbig und Schnell. Jedes Thema enthält die gleichen Symbole, aber mit einem unverwechselbaren 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 als Teil der androidx.compose.material-Abhängigkeit verfügbar. Wenn Sie eines der anderen Material Icons verwenden möchten, fügen Sie der build.gradle-Datei die Abhängigkeit material-icons-extended hinzu.

dependencies {
  def composeBom = platform('androidx.compose:compose-bom:2024.10.01')
  implementation composeBom

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

Hinweis :Die Symbole behalten die von Material definierten Namen bei, wobei der SnakeCase-Name in PascalCase umgewandelt wird. Aus „add_alarm“ wird beispielsweise „AddAlarm“. Symbolen, die mit einer Zahl beginnen, z. B. 360, wird _ vorangestellt. Das Präfix wird _360.

Warnung: material-icons-extended ist eine große Bibliothek und kann die APK-Größe beeinflussen. Verwenden Sie daher R8/Proguard in Produktions-Builds, um nicht verwendete Ressourcen zu entfernen. Außerdem kann sich aufgrund der großen Größe die Buildzeit Ihres Projekts und die Ladezeit der Vorschau in Android Studio während der Entwicklung verlängern. Mit material-icons-extended können Sie dagegen schneller iterieren, da Sie schnell auf die neuesten Versionen aller Symbole zugreifen können. 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

Wenn Sie Schriftarten in Compose verwenden möchten, laden Sie die Schriftdateien herunter und bündeln Sie sie direkt in Ihren APKs, indem Sie sie in den Ordner res/font legen.

Laden Sie jede Schriftart mit der Font API und erstellen Sie damit eine FontFamily, die Sie in TextStyle-Instanzen verwenden können, um Ihre eigene Typography zu erstellen. 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 herunterladbarer Schriftarten in der Google Textvorlage finden Sie auf der Seite Herunterladbare Schriftarten.

Weitere Informationen zur Typografie finden Sie in der Dokumentation zu Designthemen in Compose.