Glance でアプリ ウィジェットを作成する

以下のセクションでは、Glance を使用してシンプルなアプリ ウィジェットを作成する方法について説明します。

マニフェストで AppWidget を宣言する

設定手順を完了したら、AppWidget とその 追加できます。

  1. AndroidManifest.xml ファイルにアプリ ウィジェットのプロバイダを登録する および関連するメタデータ ファイル:
<receiver android:name=".glance.MyReceiver"
    android:exported="true">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data
        android:name="android.appwidget.provider"
        android:resource="@xml/my_app_widget_info" />
</receiver>
AndroidManifest.xml
  1. GlanceAppWidgetReceiver から AppWidget レシーバーを拡張します。

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {
    override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget")
}
GlanceSnippets.kt

AppWidgetProviderInfo メタデータを追加する

次に、次の手順に沿って AppWidgetProviderInfo メタデータを追加します。

  1. シンプルなウィジェットを作成するガイドに沿って、アプリを作成、定義します。 ウィジェット情報（@xml/my_app_widget_info ファイル内）です。

    Glance の唯一の違いは initialLayout XML がないことですが、 定義する必要があります。事前定義された読み込みレイアウトを使用できます。 使用できます。

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>
my_app_widget_info.xml

GlanceAppWidget を定義する

  1. GlanceAppWidget から拡張し、 provideGlance メソッドを使用します。この方法では、必要なデータを 次のように設定します。

class MyAppWidget : GlanceAppWidget() {

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

        // In this method, load data needed to render the AppWidget.
        // Use `withContext` to switch to another thread for long running
        // operations.

        provideContent {
            // create your AppWidget here
            Text("Hello World")
        }
    }
}
GlanceSnippets.kt

  1. GlanceAppWidgetReceiver の glanceAppWidget でインスタンス化します。

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

    // Let MyAppWidgetReceiver know which GlanceAppWidget to use
    override val glanceAppWidget: GlanceAppWidget = MyAppWidget()
}
GlanceSnippets.kt

これで、Glance を使用して AppWidget を設定できました。

UI を作成する

次のスニペットは、UI の作成方法を示しています。

/* Import Glance Composables
 In the event there is a name clash with the Compose classes of the same name,
 you may rename the imports per https://kotlinlang.org/docs/packages.html#imports
 using the `as` keyword.

import androidx.glance.Button
import androidx.glance.layout.Column
import androidx.glance.layout.Row
import androidx.glance.text.Text
*/
class MyAppWidget : GlanceAppWidget() {

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        // Load data needed to render the AppWidget.
        // Use `withContext` to switch to another thread for long running
        // operations.

        provideContent {
            // create your AppWidget here
            GlanceTheme {
                MyContent()
            }
        }
    }

    @Composable
    private fun MyContent() {
        Column(
            modifier = GlanceModifier.fillMaxSize()
                .background(GlanceTheme.colors.background),
            verticalAlignment = Alignment.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Where to?", modifier = GlanceModifier.padding(12.dp))
            Row(horizontalAlignment = Alignment.CenterHorizontally) {
                Button(
                    text = "Home",
                    onClick = actionStartActivity<MyActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MyActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

上記のコードサンプルでは、次のことを行います。

  • 最上位の Column では、アイテムが縦方向に並ぶごとに 1 つずつ配置されます。 あります。
  • Column は利用可能なスペースに合わせてサイズを拡大します（ GlanceModifier で、その内容を上（verticalAlignment）に揃えます。 水平方向に中央揃え（horizontalAlignment）します。
  • Column のコンテンツは、ラムダを使用して定義されます。順序が重要です。
    • Column の最初のアイテムは、12.dp を持つ Text コンポーネントです。 調整できます。
    • 2 つ目のアイテムは Row で、アイテムは横方向に 1 つずつ配置されます。 2 つの Buttons を横方向に中央揃え （horizontalAlignment）。最終的な表示は、使用可能なスペースによって異なります。 次の画像は、表示例です。
destination_widget
図 1. UI の例。

アライメント値を変更したり、さまざまな修飾子値（ コンポーネントの配置とサイズを変更します。リファレンス ドキュメントで、使用可能なコンポーネント、パラメータ、 修飾子を使用します。

前へ
Glance の設定
次へ
Glance でエラーを処理する