Ressourcen in Compose

Jetpack Compose kann auf die in Ihrem Android-Projekt definierten Ressourcen zugreifen. In diesem Dokument werden einige der Funktionen von APIs Compose erläutert.

Ressourcen sind die zusätzlichen Dateien und statischen Inhalte, die Ihr Code verwendet, z. B. Bitmaps, Layoutdefinitionen, Benutzeroberflächen-Strings, Animationsanleitungen und mehr. Wenn Sie mit Ressourcen in Android nicht vertraut sind, sehen Sie sich die Übersicht über App-Ressourcen an.

Strings

Der gängigste Ressourcentyp sind Ihre Strings. Verwenden Sie die stringResource API, um einen in Ihren XML-Ressourcen statisch definierten String 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 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)
)
ResourcesSnippets.kt

Zeichenfolgen-Pluralformen (experimentell)

Verwende 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

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

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

Abmessungen

Verwenden Sie in ähnlicher Weise 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 inkrementell in Ihrer Anwendung verwenden, 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, vereinfacht jedoch Ressourcen für Farbstatuslisten.

Vektor-Assets und Bildressourcen

Mit der painterResource API kannst du entweder Vektor-Drawables oder Raster-Asset-Formate wie PNGs laden. Du musst nicht den Typ des Drawables kennen. Verwende einfach painterResource in Image-zusammensetzbaren 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 im Hauptthread.

Animierte Vektor-Drawables

Mit der AnimatedImageVector.animatedVectorResource API kannst du eine animierte Vektor-Drawable-XML laden. Die Methode gibt eine AnimatedImageVector-Instanz zurück. Verwenden Sie zum Anzeigen des animierten Bilds die Methode rememberAnimatedVectorPainter, um ein Painter zu erstellen, das in zusammensetzbaren Funktionen von Image und Icon verwendet werden kann. Der boolesche Parameter atEnd der rememberAnimatedVectorPainter-Methode gibt an, ob das Bild am Ende aller Animationen gezeichnet werden soll. Bei Verwendung in einem änderbaren Status 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 Composer ist. Es gibt fünf unterschiedliche Symbolthemen: Ausgefüllt, Umrissen, Abgerundet, Zweifarbig und Scharf. Jedes Design enthält die gleichen Symbole, aber mit einem unterschiedlichen visuellen Stil. Aus Gründen der Einheitlichkeit sollten Sie in der Regel ein Thema auswählen und dieses in Ihrer gesamten Anwendung verwenden.

Zum Zeichnen eines Symbols können Sie die zusammensetzbare Funktion Icon verwenden, die eine Färbung anwendet und eine Layoutgröße angibt, die dem Symbol entspricht.

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 Materialsymbole verwenden möchten, fügen Sie die Abhängigkeit material-icons-extended zur Datei build.gradle hinzu.

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

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

Schriftarten

Wenn Sie Schriftarten in Compose verwenden möchten, laden Sie die Schriftartdateien herunter und bündeln Sie sie direkt in Ihren APKs. Legen Sie sie dazu im Ordner res/font ab.

Laden Sie jede Schriftart mit der Font API und erstellen Sie damit einen FontFamily, den Sie in TextStyle-Instanzen verwenden können, um Ihre eigenen Typography zu erstellen. Der folgende Code stammt aus dem Crane-Compose-Beispiel und der zugehörigen Datei 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()
    }
}
ResourcesSnippets.kt

Informationen zur Verwendung von herunterladbaren Schriftarten in Compose finden Sie auf der Seite Herunterladbare Schriftarten.

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