Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

ComposeでWidgetを実装できるライブラリ「Glance」がbetaになったので触って...

ComposeでWidgetを実装できるライブラリ「Glance」がbetaになったので触ってみる / Glance is now in beta

https://zozotech-inc.connpass.com/event/287354/

[Android] ComposeでWidgetを実装できるライブラリ「Glance」がbetaになったので触ってみる

T.Nonomura

July 11, 2023
Tweet

Other Decks in Programming

Transcript

  1. ComposeでWidgetを実装できるライブ ラリ「Glance」がbetaになったので触っ てみる
 ZOZO Tech Meetup - iOS/Android (2023/07/11)
 株式会社ZOZO


    ブランドソリューション開発本部 フロントエンド部 WEARAndroidブロック
 ブロック長
 野々村 樹 Copyright © ZOZO, Inc. 1
  2. © ZOZO, Inc. 株式会社ZOZO
 ブランドソリューション開発本部 フロントエンド部 WEARAndroidブロッ ク
 ブロック長 野々村

    樹
 Twitter:@nono_develop
 2023年入社
 3歳の娘がいます
 趣味はゲーム、謎解き
 2
  3. © ZOZO, Inc. 話すこと
 3 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ
 

  4. © ZOZO, Inc. 話すこと
 5 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ
 

  5. © ZOZO, Inc. 話すこと
 9 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ
 

  6. © ZOZO, Inc. 話すこと
 10 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ
 

  7. © ZOZO, Inc. 話すこと
 12 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ
 

  8. © ZOZO, Inc. 話すこと
 13 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ
 

  9. © ZOZO, Inc. class MyGlanceAppWidget : GlanceAppWidget() { override suspend

    fun provideGlance(context: Context, id: GlanceId) { // Widgetのレンダリングに必要なデータを読み込む // 時間がかかる操作を実行する場合はwithContextで別スレッドに切り替えること provideContent { // ComposeでWidgetを作成 HelloGlance() } } } 16 GlanceAppWidget

  10. © ZOZO, Inc. @Composable fun HelloGlance() { Box( modifier =

    GlanceModifier.fillMaxSize() .background(Color.White), contentAlignment = Alignment.Center ) { Text( text = "Hello Glance!", style = TextStyle( fontWeight = FontWeight.Bold, fontSize = 24.sp ) ) } } 17 Compose部分

  11. © ZOZO, Inc. @Composable fun HelloGlance() { Box( modifier =

    GlanceModifier.fillMaxSize() .background(Color.White), contentAlignment = Alignment.Center ) { Text( text = "Hello Glance!", style = TextStyle( fontWeight = FontWeight.Bold, fontSize = 24.sp ) ) } } 18 Compose部分
 import androidx.glance.text.Text
  12. © ZOZO, Inc. class MyGlanceAppWidgetReceiver : GlanceAppWidgetReceiver() { override val

    glanceAppWidget: GlanceAppWidget get() = MyGlanceAppWidget() } 19 GlanceAppWidgetReceiver

  13. © ZOZO, Inc. 20 <receiver android:name=".MyGlanceAppWidgetReceiver" 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_glance_app_widget_info" /> </receiver> AndroidManifest.xml

  14. © ZOZO, Inc. 21 <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android" android:minWidth="40dp" android:minHeight="40dp" android:updatePeriodMillis="0" android:initialLayout="@layout/glance_default_loading_layout"

    android:configure="com.example.android.ExampleAppWidgetConfigure" android:resizeMode="horizontal|vertical" android:widgetCategory="home_screen"> </appwidget-provider> メタデータ追加

  15. © ZOZO, Inc. 話すこと
 23 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ
 

  16. © ZOZO, Inc. 話すこと
 24 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ
 

  17. © ZOZO, Inc. GlanceTheme
 @Composable fun GlanceTheme( colors: ColorProviders =

    LocalColors.current, content: @GlanceComposable @Composable () -> Unit ) { CompositionLocalProvider( LocalColors provides colors, content = content ) } 
 25 GlanceTheme.kt 引用 : https://android.googlesource.com/platform/frameworks/support/+/bd66997874293bcf20cfaf6e7d20633d15cefb62/glance/glance/src/main/java/androidx/glance/GlanceTheme.kt
  18. © ZOZO, Inc. GlanceTheme
 dependencies { // Material 2 implementation

    "androidx.glance:glance-material:1.0.0-beta01" // Material 3 implementation "androidx.glance:glance-material3:1.0.0-beta01" } 26
  19. © ZOZO, Inc. 更新のメカニズムをWorkManagerに移行
 internal suspend fun update( context: Context,

    appWidgetId: Int, options: Bundle? = null, ) { Tracing.beginGlanceAppWidgetUpdate() val glanceId = AppWidgetId(appWidgetId) if (!sessionManager.isSessionRunning(context, glanceId.toSessionKey())) { sessionManager.startSession(context, AppWidgetSession(this, glanceId, options)) } else { val session = sessionManager.getSession(glanceId.toSessionKey()) as AppWidgetSession session.updateGlance() } } 
 30 GlanceAppWidget.kt 引用 : https://android.googlesource.com/platform/frameworks/support/+/bd66997874293bcf20cfaf6e7d20633d15cefb62/glance/glance-appwidget/src/main/java/androidx/glance/appwidget/GlanceAppWidget.kt
  20. © ZOZO, Inc. 更新のメカニズムをWorkManagerに移行
 override suspend fun startSession(context: Context, session:

    Session) { if (DEBUG) Log.d(TAG, "startSession(${session.key})") synchronized(sessions) { sessions.put(session.key, session) }?.close() val workRequest = OneTimeWorkRequest.Builder(workerClass) .setInputData( workDataOf( keyParam to session.key ) ) .build() WorkManager.getInstance(context) .enqueueUniqueWork(session.key, ExistingWorkPolicy.REPLACE, workRequest) .result.await() enqueueDelayedWorker(context) } 
 31 SessionManager.kt 引用 : https://android.googlesource.com/platform/frameworks/support/+/bd66997874293bcf20cfaf6e7d20633d15cefb62/glance/glance/src/main/java/androidx/glance/session/SessionManager.kt
  21. © ZOZO, Inc. 更新のメカニズムをWorkManagerに移行
 これに伴って、Widget描画のエントリーポイントが変更
 32 class MyGlanceAppWidget : GlanceAppWidget()

    { @Composable override fun Content() { HelloGlance() } } class MyGlanceAppWidget : GlanceAppWidget() { override suspend fun provideGlance(context: Context, id: GlanceId) { provideContent { HelloGlance() } } } alpha beta
  22. © ZOZO, Inc. 話すこと
 33 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ
 

  23. © ZOZO, Inc. 話すこと
 34 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ
 

  24. © ZOZO, Inc. AppWidgetProviderのonUpdate()無限ループ問題について
 
 36 AppWidgetProvider onUpdate() WorkManager 起動

    RescheduleReceiver スケジューリング ACTION_PACKAGE_CHANGEDがブロードキャストされ、onUpdate()が発火
  25. © ZOZO, Inc. AppWidgetProviderのonUpdate()無限ループ問題について
 
 37 AppWidgetProvider onUpdate() WorkManager 起動

    RescheduleReceiver スケジューリング ACTION_PACKAGE_CHANGEDがブロードキャストされ、onUpdate()が発火
  26. © ZOZO, Inc. 話すこと
 41 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ
 

  27. © ZOZO, Inc. 話すこと
 42 • 従来のWidgetについてざっくりと
 • Glanceとは
 •

    実際にGlanceを触ってみる
 • betaの変更点
 • 更新処理の無限ループ問題
 • まとめ