Эта страница переведена с помощью Cloud Translation API.

Реализация темы Glance

Glance предоставляет API для управления цветовой темой. Для других атрибутов стиля, таких как TextStyle , объявите переменные верхнего уровня.

Добавить цвета

Glance обеспечивает реализацию цветов материала «из коробки». Чтобы использовать встроенную тему, оберните компоновку верхнего уровня GlanceTheme , как показано в следующем примере.

На устройствах, поддерживающих динамические цвета, эта тема основана на цветах платформы, специфичных для пользователя. На других устройствах это возвращается к теме базовой линии материала. Используйте GlanceTheme.colors для стилизации с использованием цветов из завернутой темы. Вы можете использовать эти значения из темы везде, где требуется цвет.

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

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

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

    )
}GlanceSnippets.kt

Чтобы настроить тему, вы можете передать colors в GlanceTheme . Glance предоставляет библиотеку совместимости androidx.glance:glance-material для Material 2 и androidx.glance:glance-material3 для поддержки цветов Material 3.

Например, предоставьте существующие цвета материала вашего приложения API ColorProviders , чтобы создать цветовую схему Glance, как показано в следующем фрагменте:

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

Предоставьте цвета из схемы в GlanceTheme , который обертывает все ваши составные элементы, как показано в следующем примере:

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

Если вы предпочитаете использовать динамические цвета обоев, если они поддерживаются, и цветовую схему вашего приложения в противном случае, вы можете условно передать цветовую схему вашего приложения в GlanceTheme . Это показано в следующем фрагменте:

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

Добавить фигуры

Чтобы придать виджету приложения особые формы или тени, используйте API Android Drawables.

Например, в следующем фрагменте показано, как создать объект рисования (фигуру):

<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

Предоставьте его целевому составному объекту:

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

Создайте пользовательский интерфейс с помощью Glance

Совместимость с Glance