Ressourcen in Compose

Jetpack Compose kann auf die in Ihrem Android-Projekt definierten Ressourcen zugreifen. In diesem Dokument werden einige der dafür angebotenen Angebote von APIs Compose beschrieben.

Ressourcen sind zusätzliche Dateien und statische Inhalte, die Ihr Code verwendet, z. B. Bitmaps, Layoutdefinitionen, Benutzeroberflächenstrings, Animationsanweisungen und mehr. Wenn du mit Ressourcen in Android nicht vertraut bist, lies die Übersicht über App-Ressourcen.

Strings

Der gängigste Ressourcentyp sind Ihre Strings. Verwenden Sie die stringResource API, um einen String abzurufen, der statisch in Ihren XML-Ressourcen 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 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 wählt der erste Count-Parameter beispielsweise den entsprechenden Pluralstring aus. Der zweite Count-Parameter 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 auf ähnliche 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 die Funktion „Compose“ schrittweise in Ihrer App verwenden, können Sie die colorResource API verwenden, 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 die Ressourcen für die Farbstatusliste.

Vektor-Assets und Bildressourcen

Verwende die painterResource API, um entweder Vektor-Drawables oder Raster-Asset-Formate wie PNGs zu laden. Du brauchst den Typ des Drawable nicht zu kennen. Verwende einfach painterResource in zusammensetzbaren Image-Elementen 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

Verwende die AnimatedImageVector.animatedVectorResource API, um eine animierte Vektor-Drawable-XML-Datei zu laden. Die Methode gibt eine AnimatedImageVector-Instanz zurück. Damit das animierte Bild angezeigt werden kann, verwenden Sie die Methode rememberAnimatedVectorPainter, um eine Painter zu erstellen, die in zusammensetzbaren Funktionen für Image und Icon verwendet werden kann. Der boolesche Parameter atEnd der Methode rememberAnimatedVectorPainter gibt an, ob das Bild am Ende aller Animationen zu zeichnen ist. Bei Verwendung mit 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 verschiedene Symbolthemen: Filled, Outlined, Rounded, TwoTone und Sharp. Jedes Thema enthält die gleichen Symbole, aber mit einem unverwechselbaren visuellen Stil. Aus Konsistenzgründen sollten Sie in der Regel ein Design auswählen und in Ihrer gesamten Anwendung verwenden.

Um ein Symbol zu zeichnen, kannst du die zusammensetzbare Funktion Icon verwenden, bei der eine Färbung angewendet wird und die Layoutgröße 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 Material-Symbole 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

Wenn du Schriftarten in Compose verwenden möchtest, lade die Schriftartdateien direkt in deine APKs herunter und bündele sie im Ordner res/font.

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 Erstellungsbeispiel von Crane 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 Schriftarten zum Herunterladen in Compose finden Sie auf der Seite Herunterladbare Schriftarten.

Weitere Informationen zur Typografie finden Sie in der Dokumentation zum Thema „Designs in Compose“.