Wdrażanie motywu W skrócie

Aplikacja 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

Aplikacja Glance udostępnia gotowe funkcje kolorów Material Design. Aby użyć wbudowanego motywu, spakuj element kompozycyjny najwyższego poziomu za pomocą właściwości GlanceTheme, jak pokazano w przykładzie poniżej.

Na urządzeniach, które obsługują dynamiczne kolory, ten motyw jest wybierany na podstawie kolorów platformy właściwych dla użytkownika. Na innych urządzeniach przywracamy motyw podstawowy Material. Użyj właściwości GlanceTheme.colors, aby dostosować styl za pomocą kolorów z zawijanego motywu. Możesz użyć tych wartości z motywu wszędzie tam, gdzie potrzebujesz koloru.

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. Glance udostępnia bibliotekę interoperacyjności androidx.glance:glance-material w przypadku Material 2 i androidx.glance:glance-material3 do obsługi kolorów Material 3.

Na przykład podaj dotychczasowe kolory materiału aplikacji do interfejsu ColorProviders, aby utworzyć schemat 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

Prześlij kolory ze schematu do elementu GlanceTheme, który uwzględnia wszystkie elementy kompozycyjne, tak 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żyć dynamicznych kolorów z tapety (jeśli jest ona obsługiwana), a schematu kolorów aplikacji – jeśli tego nie zrobisz, możesz warunkowo przekazać schemat kolorów swojej 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 interfejsu AndroidDrawables API.

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 go w docelowym elemencie kompozycyjnym:

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