以下のセクションでは、Glance を使用してシンプルなアプリ ウィジェットを作成する方法について説明します。
マニフェストで AppWidget を宣言する
設定手順を完了したら、AppWidget とその
追加できます。
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>
GlanceAppWidgetReceiverからAppWidgetレシーバーを拡張します。
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {
override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget")
}
AppWidgetProviderInfo メタデータを追加する
次に、次の手順に沿って AppWidgetProviderInfo メタデータを追加します。
シンプルなウィジェットを作成するガイドに沿って、アプリを作成、定義します。 ウィジェット情報（
@xml/my_app_widget_infoファイル内）です。Glance の唯一の違いは
initialLayoutXML がないことですが、 定義する必要があります。事前定義された読み込みレイアウトを使用できます。 使用できます。
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>
GlanceAppWidget を定義する
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")
}
}
}
GlanceAppWidgetReceiverのglanceAppWidgetでインスタンス化します。
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {
// Let MyAppWidgetReceiver know which GlanceAppWidget to use
override val glanceAppWidget: GlanceAppWidget = MyAppWidget()
}
これで、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>()
)
}
}
}
}
上記のコードサンプルでは、次のことを行います。
- 最上位の
Columnでは、アイテムが縦方向に並ぶごとに 1 つずつ配置されます。 あります。 Columnは利用可能なスペースに合わせてサイズを拡大します（GlanceModifierで、その内容を上（verticalAlignment）に揃えます。 水平方向に中央揃え（horizontalAlignment）します。Columnのコンテンツは、ラムダを使用して定義されます。順序が重要です。
アライメント値を変更したり、さまざまな修飾子値（ コンポーネントの配置とサイズを変更します。リファレンス ドキュメントで、使用可能なコンポーネント、パラメータ、 修飾子を使用します。