以下のセクションでは、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 の唯一の違いは
initialLayout
XML がないことですが、 定義する必要があります。事前定義された読み込みレイアウトを使用できます。 使用できます。
<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
のコンテンツは、ラムダを使用して定義されます。順序が重要です。
![destination_widget](https://developer.android.google.cn/static/develop/ui/compose/images/destination_widget.png?authuser=9&hl=ja)
アライメント値を変更したり、さまざまな修飾子値( コンポーネントの配置とサイズを変更します。リファレンス ドキュメントで、使用可能なコンポーネント、パラメータ、 修飾子を使用します。