Glance bietet eine API zur Verwaltung des Farbdesigns. Deklarieren Sie für andere Stilattribute wie TextStyle
Variablen der obersten Ebene.
Farben hinzufügen
Glance bietet eine vorkonfigurierte Implementierung von Material-Farben. Wenn Sie das integrierte Design verwenden möchten, umschließen Sie die zusammensetzbare Funktion der obersten Ebene mit GlanceTheme
, wie im folgenden Beispiel gezeigt.
Auf Geräten, die dynamische Farben unterstützen, wird dieses Design aus den nutzerspezifischen Plattformfarben abgeleitet. Auf anderen Geräten wird das Material-Basisthema verwendet. Mit GlanceTheme.colors
können Sie den Stil mit Farben aus dem umschlossenen Design gestalten. Sie können diese Werte aus dem Design überall verwenden, wo eine Farbe benötigt wird.
override suspend fun provideGlance(context: Context, id: GlanceId) { provideContent { GlanceTheme { MyContent() } } } @Composable private fun MyContent() { Image( colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary), // ... ) }
Wenn du das Design anpassen möchtest, kannst du colors
an GlanceTheme
übergeben. Glance bietet die Interoperabilitätsbibliothek androidx.glance:glance-material
für Material 2 und androidx.glance:glance-material3
für die Farbunterstützung von Material 3.
Sie können beispielsweise die vorhandenen Materialfarben Ihrer App an die ColorProviders
API senden, um ein Glance-Farbschema zu erstellen, wie im folgenden Snippet gezeigt:
// Remember, use the Glance imports // import androidx.glance.material3.ColorProviders // Example Imports from your own app // import com.example.myapp.ui.theme.DarkColors // import com.example.myapp.ui.theme.LightColors object MyAppWidgetGlanceColorScheme { val colors = ColorProviders( light = LightColors, dark = DarkColors ) }
Geben Sie die Farben aus dem Schema für das GlanceTheme
an, das alle zusammensetzbaren Funktionen umschließt, wie im folgenden Beispiel gezeigt:
override suspend fun provideGlance(context: Context, id: GlanceId) { // ... provideContent { GlanceTheme(colors = MyAppWidgetGlanceColorScheme.colors) { MyContent() } } } @Composable private fun MyContent() { Image( colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary), // ... ) }
Wenn Sie dynamische Farben aus dem Hintergrund verwenden möchten, sofern unterstützt, und ansonsten das Farbschema Ihrer App, können Sie das Farbschema Ihrer App bedingt in GlanceTheme
übergeben. Dies wird im folgenden Snippet gezeigt:
override suspend fun provideGlance(context: Context, id: GlanceId) { provideContent { GlanceTheme( if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) GlanceTheme.colors else MyAppWidgetGlanceColorScheme.colors ) { MyContent() } } } @Composable private fun MyContent() { // ... Image( colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary), // ... ) }
Formen hinzufügen
Wenn du deinem App-Widget spezielle Formen oder Schatten hinzufügen möchtest, verwende die Android Drrawables API.
Das folgende Snippet zeigt beispielsweise, wie ein Drawable (eine Form) erstellt wird:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="16dp"/>
<stroke android:color="@color/outline_color" android:width="1dp"/>
</shape>
Stellen Sie diese für die zusammensetzbare Zielfunktion bereit:
GlanceModifier.background( imageProvider = ImageProvider(R.drawable.button_outline) )