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 に渡します。ひと目でわかる androidx.glance:glance-material 相互運用ライブラリを提供します。 マテリアル 2、マテリアル 3 カラーの場合は androidx.glance:glance-material3 サポート。

たとえば、アプリの既存のマテリアル カラーを ColorProviders に指定します。 API を使用して 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

シェイプを追加する

アプリ ウィジェットに特別なシェイプやシャドウを付けるには、Android の Drawables API。

たとえば、次のスニペットはドローアブル（シェイプ）を作成する方法を示しています。

<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 で UI を作成する
次へ
Glance の相互運用性