Wdrażanie motywu W skrócie

Glance udostępnia interfejs API do zarządzania motywem kolorystycznym. W przypadku innych atrybutów stylu np. TextStyle, zadeklaruj zmienne najwyższego poziomu.

Dodaj kolory

Glance umożliwia bezpośrednią implementację kolorów Material. Aby użyć funkcji z wbudowanym motywem, uzupełnij funkcję kompozycyjną najwyższego poziomu za pomocą funkcji GlanceTheme, jak pokazano to tutaj: następujący przykład.

Na urządzeniach obsługujących kolory dynamiczne motyw ten jest generowany na podstawie charakterystyczne dla użytkownika. Na innych urządzeniach wartość domyślna to Material. motyw bazowy. Użyj kodu GlanceTheme.colors, aby dodać styl do kolorów z zapakowanego produktu motyw. Tych wartości możesz używać z motywu wszędzie tam, gdzie potrzebny jest kolor.

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

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

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

    )
}
GlanceSnippets.kt

Aby dostosować motyw, możesz przekazać colors do GlanceTheme. W skrócie udostępnia bibliotekę interoperacyjności androidx.glance:glance-material dla Kolor Material 2 i androidx.glance:glance-material3 w przypadku koloru Material 3 .

Na przykład w tabeli ColorProviders podaj dotychczasowe kolory materiału aplikacji API do tworzenia schematu kolorów Glance, jak pokazano w tym fragmencie:

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

Podaj kolory od schematu do elementu GlanceTheme, który pasuje do elementów kompozycyjnych, jak w tym przykładzie:

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

Jeśli wolisz używać dynamicznych kolorów tapety, gdy jest ona obsługiwana, schemat kolorów aplikacji, w przeciwnym razie możesz warunkowo przekazać schemat kolorów aplikacji w GlanceTheme. Widać to w tym fragmencie:

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

Dodaj kształty

Aby dodać specjalne kształty lub cienie do widżetu aplikacji, użyj Androida Interfejs API Drawables.

Na przykład ten fragment kodu pokazuje, jak utworzyć obiekt rysowalny (kształt):

<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

Podaj ją do docelowej funkcji kompozycyjnej:

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

Wstecz
Tworzenie interfejsu użytkownika za pomocą Glance
Dalej
Interoperacyjność w funkcji Glance