Design „Live-Anzeige“ implementieren

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),
        // ...

    )
}
GlanceSnippets.kt

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
    )
}
GlanceSnippets.kt

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),
        // ...
    )
}
GlanceSnippets.kt

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),
        // ...
    )
}
GlanceSnippets.kt

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>
button_outline.xml

Stellen Sie diese für die zusammensetzbare Zielfunktion bereit:

GlanceModifier.background(
    imageProvider = ImageProvider(R.drawable.button_outline)
)
GlanceSnippets.kt