Design „Live-Anzeige“ implementieren

Glance bietet eine API zum Verwalten des Farbdesigns. Bei anderen Stilattributen wie TextStyle, deklarieren Sie Top-Level-Variablen.

Farben hinzufügen

Glance bietet eine sofortige Implementierung von Material-Farben. So verwenden Sie die integriertes Design verwenden, umschließen Sie Ihre zusammensetzbare Funktion auf oberster Ebene mit GlanceTheme, wie in im folgenden Beispiel.

Auf Geräten, die dynamische Farben unterstützen, leitet sich dieses Design vom nutzerspezifische Plattformfarben. Auf anderen Geräten wird hierbei das Material Basisthema zu erstellen. Mit GlanceTheme.colors können Sie Stile mit Farben aus dem Zeilenumbruch erstellen aus. Sie können diese Werte aus dem Design überall dort 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. Überblick stellt die Interoperabilitätsbibliothek androidx.glance:glance-material für Material 2 und androidx.glance:glance-material3 für Material 3-Farben Support.

Stelle beispielsweise dem ColorProviders die vorhandenen Materialfarben deiner App zur Verfügung. API zum Erstellen eines Farbschemas für „ Glance“, 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

Stellen Sie die Farben aus dem Schema für das GlanceTheme bereit, das alle Ihre zusammensetzbaren Funktionen 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 vorzugsweise dynamische Farben für den Hintergrund verwenden möchten, sofern diese unterstützt werden, und Ihre Farbschema der App verwenden. Andernfalls können Sie das Farbschema Ihrer App bedingt übergeben. in GlanceTheme. 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

Um spezielle Formen oder Schatten für Ihr App-Widget zu verwenden, verwenden Sie die Drawables 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 sie für die zusammensetzbare Zieldatei bereit:

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