Materialsymbole

Die zusammensetzbare Funktion Icon ist eine bequeme Möglichkeit, ein einfarbiges Symbol auf dem Bildschirm zu zeichnen die den Material Design-Richtlinien entspricht. Um Icon zu verwenden, fügen Sie Compose Material-Bibliothek (oder Compose Material 3-Bibliothek) aufrufen.

Wenn Sie beispielsweise ein Vektor-Drawable haben, das Sie mit Material-Standardeinstellungen können Sie die zusammensetzbare Funktion Icon so verwenden:

Icon(
    painter = painterResource(R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description)
)

Die zusammensetzbare Funktion Icon ist standardmäßig mit LocalContentColor.current und ist 24.dp groß. Außerdem ist der Farbparameter tint verfügbar, mit dem denselben Mechanismus zum Färben, wie im Abschnitt Bildfärbung beschrieben. Die zusammensetzbare Funktion Icon ist für kleine Symbolelemente vorgesehen. Ich sollten Sie für weitere Anpassungsoptionen die zusammensetzbare Funktion Image verwenden.

Die Material Icon-Bibliothek enthält auch eine Reihe vordefinierter Icons-Elemente, die können in Compose verwendet werden, ohne dass ein SVG manuell importiert werden muss. Um das Symbol abgerundete Version des Warenkorbs Symbol:

Icon(
    Icons.Rounded.ShoppingCart,
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)

Einkaufswagenvektor mit Symbol
Abbildung 1: Einkaufswagenvektor mit Symbol

Es ist nicht erforderlich, Icon zu verwenden, um eine VectorDrawable auf dem Bildschirm zu rendern. Im Hintergrund verwendet Icon Modifier.paint(painterResource(R.drawable.ic_bus_stop), um die Icon auf dem Bildschirm zu zeichnen. Weitere Informationen zu den verfügbaren Symbolen finden Sie in der Icons-Dokumentation