GoogleI/O2024 LT報告会資料

Transcript

1. Build widgets with Glance kintone開発チーム 藤⽥ 真輔
2. 概要 u 取り上げる動画「Build widgets with Glace」 https://youtu.be/jI1LKN7jBVk?si=zRH4o2LCwB7oxX6y
3. Jetpack Glanceとは︖ u Jetpack Compose Runtime上に 構築されたフレームワークで Kotlin APIを使⽤してウィジェッ トを開発できる（簡単に⾔うと、 Jetpack Composeを使ってウィ ジェットが作成可能、Googleが 推奨する⽅法）
4. Jetpack Glanceとは︖ u AppWidgetsやRemoteViewsの制限を受けるので、Jetpack Composeとは異なる コンポーザブルを使⽤する(つまり既存のJetpack Composeとは共存出来ない) u Material3のカラーシステムを利⽤可能なGlanceThemeがある u CompileSdk >= 34を要求されるっぽい
5. Glance⽤のComposableを使う必要があ る 実際にTextコンポーザブルを共存させようとしたりMaterial3のTextコン ポーザブルを使おうとすると、「java.lang.IllegalStateException」が発 ⽣した。
6. Jetpack Glanceの歴史 バージョン リリース⽇ 1.0.0-alpha01 2021/12/15 1.0.0-beta01 2023/03/10 1.0.0-rc01 2023/07/26 1.0.0 2023/09/06 1.1.0-alpha01 2024/02/07 1.1.0-beta01 2024/04/03 1.1.0-rc01 2024/05/14
7. Jetpack Glanceでウィジェット作る 1. setup 2. AppWidgetをManifestで宣⾔する 3. AppWidgetProviderInfoメタデータを追加する 4. GlanceAppWidgetを定義する 5. UIを作成する
8. Jetpack Glanceでウィジェット作る 1. setup Glanceの依存関係を追加（Compose Compilerも有効にします） dependencies { // For AppWidgets support implementation( "androidx.glance:glance-appwidget:1.0.0" ) // For interop APIs with Material 2 implementation( "androidx.glance:glance-material:1.0.0" ) // For interop APIs with Material 3 implementation( "androidx.glance:glance-material3:1.0.0" ) }
9. Jetpack Glanceでウィジェット作る 2. AppWidgetをManifestで宣⾔する 2-1. AppWidgetをManifestで宣⾔する <receiver android:name=".glance.GlanceReceiver" 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>
10. Jetpack Glanceでウィジェット作る 2. AppWidgetをManifestで宣⾔する 2-2. GlanceAppWidgetReceiverを拡張する class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget = GlanceWidget() }
11. Jetpack Glanceでウィジェット作る 3. AppWidgetProviderInfoメタデータを追加する <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android" android:initialLayout="@layout/glance_default_loading_layout"> </appwidget-provider> メタデータの詳細は以下。 https://developer.android.com/develop/ui/views/appwidgets#other- attributes minWidth/minHeightやresizeMode、 targetCellWidth/targetCellHeight(ウィジェットの初期サイズ)などが 指定できる
12. Jetpack Glanceでウィジェット作る 4. GlanceAppWidgetを定義する class MyAppWidget : GlanceAppWidget() { override suspend fun provideGlance(context: Context, id: GlanceId) { provideContent { // create your AppWidget here GlanceTheme { GlanceContent() } } } }
13. Jetpack Glanceでウィジェット作る 5. UIを作成する(Glance⽤のComposableを使う) @Composable private fun GlanceContent() { 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<MainActivity>()) Button(text = "Work", onClick = actionStartActivity<MainActivity>()) } } }
14. ユーザー操作を処理する 1. アクティビティの起動 2. サービスの起動 3. ブロードキャストイベントを送信 4. カスタム操作を実⾏ 1. ラムダアクションを実⾏ 2. ActionCallbackを実⾏ 5. アクションにパラメータを指定する
15. ユーザー操作を処理する u GlanceはActionクラスを介してユーザー操作の処理を簡素化している u Actionクラスはユーザーが実⾏できるアクションを定義しアクションに 応じて実⾏するオペレーションを指定できます （actionStartActivity/actionService/actionSendBroadcast/actionRunCal lなど） u GlanceModifier.clickableメソッドを使⽤してActionを定義する u ActionParametersでアクションに追加情報を指定できる
16. ユーザー操作を処理する u Activity起動+アクションパラメータの例 @Composable fun MyContent() { // .. Button( text = "Go Home", onClick = actionStartActivity<MainActivity>( actionParameterOf(key to “parameter”) ) ) }
17. ウィジェットの追加⽅法 1. ウィジェットピッカーを使⽤する 2. アプリからホーム画⾯に追加する 3. アプリアイコンのショートカットから追加する
18. Jetpack Glanceでウィジェット作る Demo（ウィジェットピッカーから作る）
19. ウィジェットの追加⽅法 Demo（アプリからホーム画⾯に追加する） AppWidgetManager#requestAppWidget(ComponentName, Bundle, PendingIntent) を実⾏する
20. ウィジェットの追加⽅法 Demo（アプリアイコンのショートカットから追加する）
21. ウィジェットの更新 1. ホーム画⾯にウィジェットが配置された後に更新するの はアプリケーションの責任となる 2. glanceIdを取得して、update()を呼ぶ必要がある val manager = GlanceAppWidgetManager(context) val widget = GlanceWidget() val glanceIds = manager.getGlanceIds(widget.javaClass) glanceIds.forEach { glanceId -> widget.update(context, glanceId) }
22. ウィジェットの更新 Demo（ウィジェットの更新）
23. ウィジェットのテスト dependencies testImplementation "androidx.glance:glance-testing:1.1.0-rc01" testImplementation "androidx.glance:glance-appwidget- testing:1.1.0-rc01"
24. 引⽤ https://developer.android.com/develop/ui/compose/glance https://developer.android.com/develop/ui/views/appwidgets?hl=ja#other- attributes