Modifier.Nodeに移行してパフォーマンスを比べてみた

YUMEMI.grow Mobile #9
https://yumemi.connpass.com/event/302462/

Transcript

1. Modifier.Nodeに移行して パフォーマンスを比べてみた 2023.12.13 YUMEMI.grow Mobile #9 usuiat
2. usuiat 自己紹介 Atsushi Usui / うっすぃ～ / usuiat Androidエンジニア 静岡県在住 X/GitHub : usuiat Blog : https://engawapg.net/
3. usuiat 本日の発表内容 ZoomableというJetpack Composeのライブラリを Modifier.Nodeに移行したので 移行方法の概要と 移行前後のパフォーマンスの比較結果を 共有します Modifier.Node移行の具体例はまだまだ情報が少ないので、これから移行する人の参考になれば幸いです
4. usuiat Zoomable Jetpack Composeライブラリ 最短1行で画像などをズーム可能にする ピンチジェスチャー、ダブルタップ、タップ&ドラッグ対応 HorizontalPagerと組み合わせ可 https://github.com/usuiat/Zoomable
5. usuiat Modifier.Node Modifier: Composeの見た目や振る舞いを変更するためのインターフェース 状態を持つModifier: これまではModifier.composedで実装されてきた 現在はパフォーマンスに優れるModifier.Nodeへの移行が進みつつある （参考） Modifier.Nodeを使いましょう Compose Modifiers deep dive 実践 脱Modifier.composed / Let's Modifier.Node Create custom modifiers
6. usuiat ZoomableのModifier.Node移行 ZoomableもModifier.composedを使っていたので、 Modifier.Nodeに移行しました。 本日は実装の概要を紹介します。 ソースコード詳しく見たい方はGitHubのPRをご覧ください。 https://github.com/usuiat/Zoomable/pull/131/files
7. usuiat fun Modifier.zoomable(): Modifier = composed { Modifier .onSizeChanged { size -> zoomState.setLayoutSize(size.toSize()) } .nestedScroll(connection, dispatcher) .pointerInput(zoomState) { detectTransformGestures( onGesture = { centroid, pan, zoom -> scope.launch { zoomState.applyGesture( pan = pan, zoom = zoom, position = centroid, ) } }, ) } .graphicsLayer { scaleX = zoomState.scale scaleY = zoomState.scale translationX = zoomState.offsetX translationY = zoomState.offsetY } } Modifier.zoomable (composed版)の構造 1) pointerInput()でジェスチャーを検出し、ZoomStateを変更 2) graphicsLayer()でZoomStateの状態をレイアウトに反映 4) nestedScroll()で上位のPagerなどにスクロールイベントを伝達 3) onSizeChanged()でコンポーネントのサイズを取得 （ドラッグ可能な範囲の算出に使う） Modifier.composed()を使用
8. usuiat ZoomableNodeの実装方針 1) pointerInput()でジェスチャーを検出し、ZoomStateを変更 2) graphicsLayer()でZoomStateの状態をレイアウトに反映 4) nestedScroll()で上位のPagerなどにスクロールイベントを伝達 3) onSizeChanged()でコンポーネントのサイズを取得 （ドラッグ可能な範囲の算出に使う） PointerInputModifierNodeを実装 LayoutModifierNodeを実装 nestedScrollModifierNodeに委任 private class ZoomableNode(): PointerInputModifierNode, LayoutModifierNode, DelegatingNode() { ... }
9. usuiat private class ZoomableNode(): PointerInputModifierNode, DelegatingNode() { override fun onPointerEvent( pointerEvent: PointerEvent, pass: PointerEventPass, bounds: IntSize ) { pointerInputNode.onPointerEvent(pointerEvent, pass, bounds) } override fun onCancelPointerInput() { pointerInputNode.onCancelPointerInput() } val pointerInputNode = delegate(SuspendingPointerInputModifierNode { detectTransformGestures( onGesture = { centroid, pan, zoom -> coroutineScope.launch { zoomState.applyGesture(pan, zoom, centroid) } }, ) }) } 1) ジェスチャーを検出し、ZoomStateを変更 PointerInputModifierNodeのonPointerEvent()と onCancelPointerInput()をoverride pointerInputNodeの処理を呼び出す SuspendingPointerInputModifierNodeにはPointerInputScopeの 処理を渡せるので、Modifier.pointerInputに書いていた処理を ほぼそのまま書ける。 pointerInputNodeはSuspendingPointerInputModifierNode 実際の処理はSuspendingPointerInputModifierNodeに 委任する PointerInputModifierNodeを実装
10. usuiat private class ZoomableNode(): LayoutModifierNode, DelegatingNode() { var measuredSize = Size.Zero override fun MeasureScope.measure( measurable: Measurable, constraints: Constraints ): MeasureResult { val placeable = measurable.measure(constraints) measuredSize = IntSize(placeable.measuredWidth, placeable.measuredHeight).toSize() zoomState.setLayoutSize(measuredSize) return layout(placeable.width, placeable.height) { placeable.placeWithLayer(x = 0, y = 0) { scaleX = zoomState.scale scaleY = zoomState.scale translationX = zoomState.offsetX translationY = zoomState.offsetY } } } } 2) ZoomStateの状態をレイアウトに反映 3) コンポーネントのサイズを取得 MeasureScope.measure()をoverride placeableからコンポーネントのサイズを取得できる placeWithLayer()に、Modifier.graphicsLayer()の処理を そのまま書ける LayoutModifierNodeを実装
11. usuiat private class ZoomableNode(): DelegatingNode() { val connection = object : NestedScrollConnection{} val dispatcher = NestedScrollDispatcher() init { delegate(nestedScrollModifierNode(connection, dispatcher)) } } 4) スクロールイベントを伝達 initブロックでnestedScrollModifierNodeを作成し、 delegateで委任する DelegatingNodeを継承
12. usuiat このほか、ModifierNodeElementの実装などが必要ですが、 今日は省略します。 ソースコード詳しく見たい方はGitHubのPRをご覧ください。 https://github.com/usuiat/Zoomable/pull/131/files
13. usuiat パフォーマンスは良くなったのか？？？
14. usuiat 見た目には何も変わらなかった もともとパフォーマンス悪かったわけではないので、それはそう🙄
15. usuiat 見た目で分からないなら計測しよう！ Android Studio Flamingo以降ではProfilerでComposable関数をトレースできる😎
16. usuiat 再コンポーズの処理時間を計測 @Composable fun Sample() { var offset by remember { mutableStateOf(0.dp) } Image( painter = painter, contentDescription = null, contentScale = ContentScale.Fit, modifier = Modifier .fillMaxSize() .offset(y = offset) .zoomable( zoomState = rememberZoomState(), onTap = { offset += 10.dp } ), ) } Modifier.Nodeでは、再コンポーズ時のパフォーマンスが改善しているはず！ onTapでoffsetを変更することによって再コンポーズを発生させて、 Image()の実行時間を測定する。
17. usuiat トレース結果はこんな感じ 指が触れ た 指が離れ た ダブルタップかどうかの 判定のための待ち時間 再コンポー ズ このあたりにImage()がある
18. usuiat Modifier.composed版 10回平均 8.2ms 最大 20.78ms 最小 4.16ms materializeModifierの処理時間が Image()全体の半分程度を占めて いる。 materializeがいかに大変かとい う話は、この動画で説明されて います。 https://www.youtube.com/watch? v=BjGX2RftXsU Image()の処理時間
19. usuiat Modifier.Node版 10回平均 3.72ms 最大 5.24ms 最小 1.98ms Image()の処理時間 materialize処理が 消えている
20. usuiat 速くなった！ Modifier.composed Modifier.Node 10回平均 8.2ms 3.72ms 最大 20.78ms 5.24ms 最小 4.16ms 1.98ms 平均処理時間が約半分になった
21. usuiat ベータ版提供中 Zoomable v1.6.0-beta2提供中です。 不具合等あればご連絡お願いします https://github.com/usuiat/Zoomable/releases/tag/v1.6.0-beta2