Implementare un tema Riepilogo

Il Glance offre un'API per gestire il tema a colori. Per altri attributi di stile, ad esempio TextStyle, dichiarano le variabili di primo livello.

Aggiungi colori

Il Glance offre un'implementazione immediata dei colori Material. Per utilizzare tema integrato, unisci il tuo componibile di primo livello con GlanceTheme, come mostrato in nell'esempio che segue.

Sui dispositivi che supportano i colori dinamici, questo tema deriva dal colori della piattaforma specifici per l'utente. Su altri dispositivi, invece, fa riferimento al Material tema di base. Usa GlanceTheme.colors per applicare uno stile con i colori del wrapper tema. Puoi utilizzare questi valori del tema ovunque sia necessario un colore.

override suspend fun provideGlance(context: Context, id: GlanceId) {

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...

    )
}
GlanceSnippets.kt

Per personalizzare il tema, puoi trasmettere colors all'GlanceTheme. Riepilogo fornisce la libreria di interoperabilità androidx.glance:glance-material per Material 2 e androidx.glance:glance-material3 per i colori Material 3 assistenza in tempo reale.

Ad esempio, fornisci i colori dei materiali esistenti dell'app al ColorProviders API per creare una combinazione di colori Riepilogo, come mostrato nello snippet seguente:

// 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

Fornisci i colori dallo schema al GlanceTheme che aggrega tutti i tuoi componibili, come illustrato nell'esempio seguente:

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

Se preferisci utilizzare i colori dinamici dello sfondo, quando supportati, e i tuoi la combinazione di colori dell'app, altrimenti puoi trasmettere la combinazione di colori dell'app in modo condizionale. in GlanceTheme. Questo viene mostrato nel seguente snippet:

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

Aggiungere forme

Per applicare forme o ombre speciali al widget dell'app, usa l'app Android API Drawables.

Ad esempio, il seguente snippet mostra come creare un elemento disegnabile (una forma):

<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

Forniscilo al componibile di destinazione:

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

Indietro
Creazione di una UI in sintesi
Avanti
Riepilogo interoperabilità