以下のセクションでは、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
のコンテンツは、ラムダを使用して定義されます。順序は重要です。
配置値を変更するか、さまざまな修飾子値(パディングなど)を適用して、コンポーネントの配置とサイズを変更できます。各クラスで利用できるコンポーネント、パラメータ、修飾子の一覧については、リファレンス ドキュメントをご覧ください。