[DroidKaigi 2023] Modifier.Node を使いましょう！

Modifier.Nodeを使いましょう
DroidKaigi 2023

View Slide

@_SUR4J_
Suraj (すーじ)
株式会社サイバーエージェント
株式会社AbemaTV
ABEMA の AndroidTV アプリ開発。

View Slide

Modifier.composed のパフォーマンス問題
Modifier.Node の紹介
既存の Modifier.composed を移行する
目次

View Slide


View Slide

Runtime の Smart Recomposition

View Slide

@Composable
fun Sample(){
var x by remember {..}
Text("Hi")
Row{
Text("App")
Image(..)
}
}
「Composition」は @Composable 関数が
ノードになっているツリーです。
Row
Text(Hi)
Sample
Text(App)
remember
Image

View Slide

Row
Text(Hi)
Sample
Text(App)
remember
Image
@Composable
fun Sample(){
var x by remember {*.}
Text("Hi")
Row{
Text("App")
Image(*.)
}
}

View Slide

Row
Text(Hi)
Sample
Text(App)
remember
Image
Hi
@Composable
fun Sample(){
Text("Hi")
Row{
Text("App")
Image(*.)
}
}

View Slide

@Composable
fun Sample(y: String){
Text("Hi")
Row{
Text("App")
Image(*.)
}
}
App
Hi
Row
Text(Hi)
Sample
Text(App)
remember
Image

View Slide

毎回ツリーの全てのノードを訪れるより、
Runtime が Composition ツリー全体を観察し、
変更が行った @Composable関数のみを再呼び出しします。
Runtime が Composition ツリー全体を観察し、

View Slide

@Composable
Text("Hi")
Row{
Text("App")
Image(*.)
}
}
Text("Hello")
App
Hi
Row
Sample
Text(App)
remember
Image
Text(Hi)

View Slide

@Composable
Text("Hello")
Row{
Text("App")
Image(*.)
}
}
App
Hello
Row
Text(Hi)
Sample
Text(App)
remember
Image
Smart Recomposition の軽く紹介

View Slide

「変更が行った」と判断された @Composable のみが選択的な再呼び出され、
他の @Composable の呼び出しスキップさせることを
一般的にスマートな Recomposition と呼ばれてます。

View Slide

Smart Recomposition の条件

View Slide

Unit を返す @Composable のパラメーターが
変更されなかったらスキップされます。

View Slide

@Composable fun Text(text: String, *.)
Text(text = "Hi") → Text(text = "Hi")
Text(text = "Hi") → Text(text = "Hello")
スキップされます
スキップされない

View Slide

Unit 以外の値を返す @Composable を
スキップできない。

View Slide

@Composable
fun Button(*.)
@Composable
fun rememberLazyListState(): LazyListState
スキップすることが可能
スキップされない

View Slide

旧 Modifier 仕組み

View Slide

Modifier.background(color: Color, *.)
= this.then(Background(color, ..))
Background
Modifier はそれぞれの Modifier.Element をオブジェクト
を発行しました。

View Slide

Modifier.background(color: Color, *.)
.padding(start: Dp, *.)
= this.then(Background(color, ..))
.then(PaddingElement(start, ..))
PaddingElement
Background
複数の場合、発行されたそれぞれの Modifier.Element が
順次的に連結されました。

View Slide

Modifier チェーンの 2つの役割がありました。

View Slide

Background(Red)
PointerInputElement
PaddingElement(16)
drawRect(color = Red)
onPointerEvent { .. }
it.placeRelative(x = 16, ..)
Red 色の背後
タップイベントを対応
コンテンツ周り空白
Box

View Slide

Modifier.Element のチェーンがレイアウトに
それぞれの特定なプロパティを提供しました。
役割 #1

View Slide

Box(modifier = Modifier
.background(Color.Blue)
..
.padding(16.dp)
)
Color.Red

View Slide

Box
=
=
≠
. . .
Background(Red)
PaddingElement
. . .
Background(Blue)
PaddingElement

View Slide

Smart Recomposition のため
Modifier のチェーンが比較されました。
役割 #2

View Slide

Modifier.composed

View Slide

毎回新しいインスタンス生成されましたので、
レイアウト毎のstate を保持することができなかったです。
毎回新しいインスタンス生成されましたので、
Modifier.composed が追加された理由
Modifier.background(*.) = this.then(Background(..))
class Background (val color: Color..): Modifier.Element {
** *. */
}

View Slide

Modifier.composed(
factory: @Composable () *> Modifier, *.
) = this.then(ComposedModifier(factory, *.))
Modifier に state を持たせるため、
Modifier.composed が追加されました。

View Slide

fun Modifier.clickable(*.) = this.composed {
var enabled by remember{ mutableStateOf(false) }
val clickableState by remember{ ClickableState() }
return Modifier**.onPointerEvent{ ** *. */ }
}
Compose Runtime を活用して
レイアウト毎のstate を保持することができました。

View Slide

Modifier.composed の２つの問題が発生しました。

View Slide

Modifier.composed を比較できない

View Slide

@Composable
fun Box(*., content: @Composable () .> Unit)
キャッシュされます
Compose Runtime が @Composable 関数に渡される
@Composable ラムダをキャッシュします。

View Slide

fun Modifier.composed(
factory: @Composable () .> Modifier
): Modifier { ** *. */ }
Modifier.composed は @Composable 関数に渡される
@Composable ラムダをキャッシュします。
キャッシュされない

View Slide

.background(Color.Red)
.composed{ /*..*/ }
.padding(16.dp)
)

View Slide

background (Red)
composed(Factory@xyz456)
padding (16.dp)
=
=
≠
Box
Background (Red)
composed(Factory@abc123)
PaddingElement(16.dp)
background (Red)
padding (16.dp)
composed(Factory@xyz456)
Background (Red)
PaddingElement(16.dp)
background (Red)
padding (16.dp)

View Slide

Modifier.composed を比較できないので
変更がなくても不必要な Recomposition 発生されました。
問題 #1

View Slide

Modifier.composed で Compositionツリーが大きく
なった

View Slide

fun Modifier.composed(
factory: @Composable () .> Modifier
): Modifier { ** *. */ }
Compositionツリーが大きくなった
値を返す @Composable なので、Smart Recomposition によって
呼び出しをスキップできない。

View Slide

fun Modifier.clickable() = composed {
var enabled by remember{ mutableStateOf(*.) }
val state = remember{ ClickableState() }
LaunchedEffect{ ** *. */ }
** *. */
}
@Composable 関数が Composition ツリーに追加され、
Runtime の観察するコストが増えました。

View Slide

Compose Modifiers deep dive | Android Dev Summit’22
https://youtu.be/BjGX2RftXsU?si=uHkVADOwnWCkFYmf&t=713

View Slide

Box
Box
34 remember + 11 Side effects..
Box(modifier = Modifier..clickable{..})

View Slide

Composition ツリーのサイズが増えて、
Runtime の観察コストが大きくなりました。
Composition ツリーのサイズが増えて、
Runtime の観察コストが大きくなりました。
問題 #2

View Slide

LazyList{
items(list.size) {
ListItem(modifier = Modifier.clickable{}, *.)
}
** *. */
}

View Slide

Box
Box Box Box
Box
Box
Box Box Box
Box

View Slide

Enter QR HERE
最初のCLのリンク

View Slide

Enter QR HERE
動画リンク

View Slide

Modifier チェーンの役割
● レイアウトにそれぞれの特定なプロパティを提供。
● 「Modifier が変更された」の判断のため比較。
Modifier に state を持たせるために Modifier.composed が追加されました。
Modifier.composed で Compose Runtime のパフォーマンスが影響されました。
Modifier に state を持たせるために Modifier.composed が追加されました。
まとめ

View Slide


View Slide

２つのチェーン

View Slide

Box
BackgroundElement
PointerInputElement
PaddingElement
BackgroundNode
PointerInputNode
PaddingNode
Element チェーン Node チェーン
2つのチェーン
新しい Modifier 仕組みで
旧 Modifier チェーンが２つのチェーンに分けられました。

View Slide

ModifierNodeElement チェーン
BackgroundElement
PointerInputElement
PaddingElement
BackgroundNode
PointerInputNode
PaddingNode
Box
レイアウトにそれぞれの特定なプロパ
ティを提供します。
レイアウトが Node チェーンの1つのイン
スタンスを持ち続けます。
Node チェーン
2つのチェーン

View Slide

Node チェーン
BackgroundElement
PointerInputElement
PaddingElement
Box
Element チェーン
BackgroundNode
PointerInputNode
PaddingNode
「Modifier が変更された」の判断のため
に比較されます。
毎回 Element 新しいインスタンスが生
成されます。
2つのチェーン

View Slide

Modifier
.padding(16.dp)
Modifier
.then(BackgroundElement(Color.Blue))
.then(PaddingElement(16.dp))
PaddingElement
BackgroundElement
2つのチェーン

View Slide

)
2つのチェーン
Modifier

View Slide

Box
PaddingElement
BackgroundElement
PaddingNode
BackgroundNode
2つのチェーン

View Slide

Modifier.Node

View Slide

● レイアウトにそれぞれの特定なプロパティーを提供します。
● レイアウトと同じ寿命を持ちますので、state を保持することができます。
Modifier.Node
interface Modifier {
abstract class Node { ** *. */ }
interface Element { ** *. */ }
}

View Slide

abstract class Node {
open fun onAttach() {}
open fun onDetach() {}
var isAttached: Boolean
private set
** *. */
}
}
Modifier.Node がチェーンに追加さ
れる直後に呼び出されます。
Modifier.Node

View Slide

.clickable{ .* .. ./ }
.padding(16.dp))
.padding(16.dp))
Modifier.Node

View Slide

PaddingNode
onAttach()
ClickableNode
PaddingNode
BackgroundNode
Box
PaddingNode
BackgroundNode
Box
Modifier.Node

View Slide

private set
** *. */
}
}
Modifier.Node チェーンから外れた
直前に呼び出されます。
Modifier.Node

View Slide

.clickable{ ** *. */ }
.padding(16.dp))
./.clickable{ .* .. ./ }
.padding(16.dp))
Modifier.Node

View Slide

PaddingNode
onDetach()
ClickableNode PaddingNode
BackgroundNode
Box
ClickableNode
BackgroundNode
Box
Modifier.Node

View Slide

private set
** *. */
}
}
いくつかの API が onAttach と
onDetach の間でしか呼び出されな
い。
isAttached が onAttach と
onDetach の間で true になってま
す。
いくつかの API が onAttach と
onDetach の間でしか呼び出されな
い。
Modifier.Node

View Slide

ModifierNodeElement

View Slide

abstract class ModifierNodeElement
: Modifier.Element { ** *. */ }
ModifierNodeElement
● レイアウトを直接的に影響しないです。
● 「Modifier が変更された」の判断のために比較されます。

View Slide

abstract class ModifierNodeElement {
abstract fun create(): N
abstract fun update(node: N)
abstract fun equals(other: Any?)
abstract fun hashCode(): Int
** *. */
}
Modifier がはじめてレイアウトに設定された時呼び出されます。
新しい Modifier.Node のインスタンスを返します。
ModifierNodeElement

View Slide

..
)
..
.clickable{ .* .. ./ }
)
ModifierNodeElement

View Slide

Background..(Blue)
Box
Background..(Blue)
ClickableElement
ClickableNode
BackgroundNode
create()
Background..(Blue)
ClickableElement
ModifierNodeElement

View Slide

Modifier が変更された時呼び出されます。
既存の Modifier.Node で保持されてる state を更新するチャンスです。
Modifier が変更された時呼び出されます。
** *. */
}
ModifierNodeElement

View Slide

Color.Red
.padding(16.dp)
..
)
ModifierNodeElement

View Slide

PaddingNode
BackgroundNode
Box
PaddingElement
Background..(Red)
update()
PaddingElement
Background..(Blue)
BackgroundNode
Background..(Red)
ModifierNodeElement

View Slide

}
このメソッドで update を呼び出すかどうかの判断行われます。
ModifierNodeElement

View Slide

Color.Red
.padding(16.dp)
..
)
ModifierNodeElement

View Slide

equals()
PaddingElement
BackgroundElement
update()
PaddingElement
BackgroundElement
equals() false
true
PaddingElement
BackgroundElement
ModifierNodeElement

View Slide

Enter QR HERE
記事リンク
ModifierNodeElement

View Slide


View Slide

基本手順

View Slide

ModifierNodeElement、Modifier.Nodeクラス
の作成
基本手順

View Slide

private class FocusableNode(..)
: Modifier.Node() { ** *. */ }
fun Modifier.focusable(
interactionSource: MutableInteractionSource? = null
) = composed { ** *. */ }
private class FocusableElement(..)
: ModifierNodeElement{ ** *. * / }
ModifierNodeElement、Modifier.Nodeクラスの作成

View Slide

private class FocusableElement(
val interactionSource: MutableInteractionSource?
) : ModifierNodeElement{ ** *. * / }
) = composed { ** *. */ }
Modifier 関数のパラメータを、ModifierNodeElement クラスの
コンストラクタパラメータとして設定します。

View Slide

) = this.then(FocusableElement(interactionSource))
Modifier 関数自体で Modifier.then に
ModifierNodeElement のインスタンスを渡します。

View Slide

Modifier.Node の実装
Modifier.Node 作成の基本

View Slide

Modifier.Node はレイアウトにプロパティを提供する役割持ってるので、
　Modifier.composed の内部実装を複製するような実装を行われます。

View Slide

fun Modifier.focusable(*.) = composed {
var isFocused = remember { mutableStateOf(false) }
DisposableEffect(isFocused) { .* .. ./ }
Modifier*.
}
＠Composable コンテキストが
ないと呼び出せない

View Slide

var isFocused = remember { mutableStateOf(false) }
DisposableEffect(isFocused) { ** *. */ }
Modifier
.semantics { .* .. ./ }
.then(FocusedBoundsModifier())
.onFocusChanged { .* .. ./ }
}

View Slide

private class FocusChangedNode(*.) : FocusEventModifierNode {
override fun onFocusEvent(focusState: FocusState) {
** *. */
}
}
Modifier.onFocusChanged の Modifier.Node は
FocusEventModifierNode に拡張され、onFocusEvent で実装が行われてます。

View Slide

private class FocusableNode(*.)
: FocusEventModifierNode, Modifier.Node() {
** *. */
}
}
同様で新しい Modifier.Node を
FocusEventModifierNode に拡張され、onFocusEvent で実装が行われてます。

View Slide

Modifier.onFocusChanged { state *> isFocused = state.isFocused }
}
private class FocusChangedNode(var onFocusChanged: (FocusState) .> Unit)
: FocusEventModifierNode {
onFocusChanged.invoke(focusState)
}
}

View Slide

** *. */
Modifier
.onFocusChanged { state .> isFocused = state.isFocused }
}
private class FocusableNode(*.) : SemanticsModifierNode, *. {
override fun onFocusEvent(state: FocusState) {
this.isFocused = state.isFocused
}
}
onFocusEvent で Modifier.onFocusChanged に渡されたラムダ
の実装が行われます。

View Slide

Enter QR HERE
記事リンク
FocusEventModifierNode を含めていくつかの
Modifier.Node interface をこの記事で紹介してます。

View Slide

ModifierNodeElement の実装
基本手順

View Slide

val interactionSource : MutableInteractionSource?
) : ModifierNodeElement {
override fun create(): FocusableNode
= FocusableNode(this.interactionSource)
** *. */
}

View Slide

** *. */
override fun update(node: FocusableNode) {
node.interactionSource = this.interactionSource
}
}

View Slide

** *. */
override fun equals(other: Any?); Boolean { .* .. ./ }
override fun hashCode(): Int { .* .. ./ }
}

View Slide

** *. */
override fun equals(other: Any?): Boolean {
return other is FocusableElement .&
other.interactionSource
.= this.interactionSource
}
}

View Slide

基本手順
● Modifier.Node と ModifierNodeElement クラスを作成する。
● Modifier の内部実装と組み合わて作られてる Modifier の内部実装を複製する
ような実装を Modifier.Node で行う。
● ModifierNodeElement の create で Modifier.Node の作成、update で
Modifier.Node の state を更新とModifier が比較される判断実装を行う。
● Modifier.composed の代わりに Modifier.then 使って、
ModifierNodeElement のインスタンスを渡す。
まとめ

View Slide

Modifier.Node に移行するチップス
Modifier.Node 作成の基本

View Slide

Enter QR HERE
Modifier.Node 移行
の CL のリンク
Modifier.Node に書き換えるチップス

View Slide

Official best practices in plans
公式ガイドラインが作成中

View Slide

Enter QR HERE
記事のリンク

View Slide

remember{..}

View Slide

val bringIntoViewRequester
= remember { BringIntoViewRequester() }
}
class FocusableNode : Modifier.Node, *. {
private val bringIntoViewRequester
= BringIntoViewRequester()
}
remember{..}

View Slide

var isFocused by remember { mutableStateOf(false) }
}
class FocusableNode : Modifier.Node, *. {
private var isFocused = false
// private var isFocused by mutableStateOf(false)
}
Recompositionを実行させたい場合
remember{..}

View Slide

CompositionLocalの値を取得

View Slide

val context = LocalContext.current
** *. */
}
CompositionLocal の値を取得
class FocusableNode : Modifier.Node(),
CompositionLocalConsumerModifierNode, *. {
fun update() {
val context = currentValueOf(LocalContext)
}
}

View Slide

val context = currentValueOf(LocalContext)
currentValueOf を onAttach と onDetach の間でしか呼び出せない。

View Slide

class FocusableNode() : Modifier.Node(),
init { currentValueOf(LocalContext) }
override fun onAttach() { currentValueOf(LocalContext) }
fun someMethod() {
if (isAttached) { currentValueOf(LocalContext) }
}
}
“Cannot read CompositionLocal because the
Modifier node is not currently attached.”

View Slide

class FocusableNode() : Modifier.Node(),
init { currentValueOf(LocalContext) }
override fun onAttach() { currentValueOf(LocalContext) }
fun someMethod() {
if (isAttached) { currentValueOf(LocalContext) }
}
}

View Slide

関数パラメータは DisposableEffect の key

View Slide

interactionSource: MutableInteractionSource?
) = composed {
DisposableEffect(interactionSource) {
interactionSource.tryEmit(Focus)
onDispose {
interactionSource*.tryEmit(UnFocus)
}
}
}
関数パラメーターは DisposableEffect のキー

View Slide

internal class FocusableElement(
val interactionSource: MutableInteractionSource?
): ModifierNodeElement() {
override fun update(node: FocusableNode) {
node.update(interactionSource)
}
}

View Slide

private class FocusableNode(
var interactionSource: MutableInteractionSource?
): Modifier.Node() {
fun update(interactionSource: MutableInteractionSource?) {
*/ onDispose ブロック
*/ メインブロック
}
}

View Slide

interactionSource..tryEmit(UnFocus)
interactionSource..tryEmit(Focus)
}
}

View Slide

if (this.interactionSource .= interactionSource) {
** interactionSource*.tryEmit(UnFocus) *. */
this.interactionSource = interactionSource
}
}
}

View Slide

LaunchedEffect{..}

View Slide

fun Modifier.draggable(state: DraggableState) = composed {
LaunchedEffect(state) {
interactionSource*.emit(Start())
** *. */
}
}
LaunchedEffect{..}
DisposableEffect と同様で LaunchefEffect の key
が変更されたら、LaunchedEffect の中の coroutine が実行されます。

View Slide

class DraggableNode(var state: DraggableState): *. {
fun update(state: DraggableState) {
if(this.state *= state) {
coroutineScope.launch {
interactionSource*.emit(Start())
}
}
}
}
LaunchedEffect{..}

View Slide

coroutineScope を使って onAttach と onDetach の間でしか
coroutine を実行することができないです。
val coroutineScope: CoroutineScope
** *. */
}
}
val coroutineScope: CoroutineScope
** *. */
}
}
LaunchedEffect{..}

View Slide

class FocusableNode() : Modifier.Node(), *. {
init { coroutineScope.launch{*.} }
override fun onAttach() { coroutineScope.launch{*.} }
fun update() {
if (isAttached) { coroutineScope.launch{*.} }
}
}
“Cannot obtain node coordinator. Is
the Modifier.Node attached?”
LaunchedEffect{..}

View Slide

class FocusableNode() : Modifier.Node(), *. {
init { coroutineScope.launch{*.} }
override fun onAttach() { coroutineScope.launch{*.} }
fun update() {
if (isAttached) { coroutineScope.launch{*.} }
}
}
LaunchedEffect{..}

View Slide

複雑な @Composable 関数

View Slide

fun Modifier.tabIndicatorOffset(*.) = composed {
val currentTabWidth by animateDpAsState(target)
** *. */
}

View Slide

@Composable
fun animateDpAsState(targetValue: Dp): State {
val animatable = remember { Animatable(targetValue, *.) }
LaunchedEffect(targetValue) { ** *. */ }
}

View Slide

val currentTabWidth by animateDpAsState(target)
** *. */
}
val currentTabWidthAnim = remember{ Animatable(target) }
LaunchedEffect(target){ .* .. ./ }
}

View Slide

** *. */
}
class TabIndicatorOffsetNode(var target: Dp):Modifier.Node() {
val currentTabWidthAnim = Animatable(..)
** *. */
}

View Slide

LaunchedEffect(target){ .* .. ./ }
}
class TabIndicatorOffsetNode(var target: Dp):Modifier.Node() {
val currentTabWidthAnim = Animatable(*.)
fun update(target: Dp) {
if (target .= this.target) {
coroutineScope.launch { .* .. ./ }
}
}
}

View Slide

● remember されてるオブジェクトを var や val として保持します。
● 関数パラメータに関する実装を ModifierNodeElement.update メソッドで行い
ます。
● key になっている変数を state として保持する
● CompositionLocalConsumerModifierNode を拡張して
CompositionLocal の値を取得します。
● 複雑な @Composable の場合、関数を内部実装に置き換えるように想像して複
製してみる。
まとめ

View Slide

移行の事例

View Slide

Enter QR HERE
fun Modifier.tabIndicatorOffset(
tabPosition: TabPosition
) = composed { ** *. */ }
PRのリンク
移行の事例

View Slide

class TabIndicatorOffsetElement
: ModifierNodeElement()
class TabIndicatorOffsetNode(..) : Modifier.Node()
fun Modifier.tabIndicatorOffset(tabPosition: TabPosition)
= composed { ** *. */ }
移行の事例
ModifierNodeElement と Modifier.Node クラスを作ります。

View Slide

class TabIndicatorOffsetElement(val tabPosition: TabPosition)
: ModifierNodeElement()
class TabIndicatorOffsetNode(*.) : Modifier.Node()
= composed { ** *. */ }
= composed { ** *. */ }
= then(TabIndicatorOffsetElement(tabPosition))
移行の事例
ModifierNodeElement に関数パラメータの tabPosition を
コンストラクターパラメータとして設定

View Slide

val currentTabWidth by animateDpAsState(..)
** *. */
Modifier*.
.width(currentTabWidth)
}
移行の事例

View Slide

@Composable
** *. */
return animatable.asState()
}
移行の事例

View Slide

val currentTabWidth by animateDpAsState(*.)
** *. */
}
val currentTabWidthAnim = remember { Animatable(..) }
val currentTabWidth by currentTabWidthAnim.asState()
** *. */
}
移行の事例

View Slide

val currentTabWidthAnim = remember { Animatable(..) }
val currentTabWidth by currentTabWidthAnim.asState()
** *. */
}
class TabIndicatorOffsetNode(tabPosition: Position)
: Modifier.Node() {
val currentTabWidthAnim = Animatable(..)
}
移行の事例

View Slide

@Composable
LaunchedEffect(targetValue) {
if (targetValue .= animatable.targetValue) {
animatable.animateTo(targetValue)
}
}
}
移行の事例

View Slide

= composed {
val tabWidth
by animateDpAsState(targetValue = tabPosition.width)
** *. */
}
= composed {
val tabWidthAnim = remember { Animatable(*.) }
LaunchedEffect(tabPosition.width) {
if (tabPosition.width *= tabWidthAnim.targetValue) {
tabWidthAnim.animateTo(tabPosition.width)
}
}
}
移行の事例

View Slide

class TabIndicatorOffsetNode(tabPosition: TabPosition): *. {
val tabWidthAnim = Animatable(*.)
fun update(tabPosition: TabPosition) {
if (tabPosition.width *= tabWidhtAnim.targetValue) {
coroutineScope.launch {
}
}
}
= composed {
val tabWidthAnim = remember { Animatable(*.) }
LaunchedEffect(tabPosition.width) {
if (tabPosition.width *= tabWidthAnim.targetValue) {
}
}
}
移行の事例

View Slide

val currentTabWidth by animateDpAsState(*.)
** *. */
Modifier*.
}
移行の事例

View Slide

private class SizeNode(var width: Dp)
: LayoutModifierNode, Modifier.Node() {
override fun MeasureScope.measure(..): MeasureResult {
val wrappedConstraints = constraints.constrain(
Constraints(minWidth = width, maxWidth = width)
)
}
** *. */
}
移行の事例
class TabIndicatorOffsetNode(*.) : LayoutModifierNode, *. {
val width = .?
)
}
** *. */
}

View Slide

val width = .?
)
}
}
移行の事例

View Slide

val currentTabWidth by animateDpAsState(..)
** *. */
Modifier*.
}
移行の事例

View Slide

val tabWidthAnim = Animatable(..)
override fun MeasureScope.measure(*.): MeasureResult {
val width = tabWidthAnim.value.roundToPx()
)
** *. */
}
}
移行の事例

View Slide

private class SizeNode(var width: Dp): LayoutModifierNode, *. {
val wrappedConstraints = ** *. */
val placeable = measurable.measure(wrappedConstraints)
return layout(placeable.width, placeable.height) {
placeable.placeRelative(0, 0)
}
}
}
** *. */
val placeable = measurable.measure(wrappedConstraints)
return layout(placeable.width, placeable.height) {
placeable.placeRelative(0, 0)
}
}
}
移行の事例

View Slide

参考資料・リンク

View Slide

● android-review.googlesource.com
● cs.android.com/
● Jetpack Compose internals
● romannurik.github.io/SlidesCodeHighlighter
● slack-chats.kotlinlang.org/c/compose
参考資料・リンク

View Slide

Enter QR HERE
記事のリンク
Modifier.Node 使いましょう

View Slide

ありがとうございました！

View Slide

[DroidKaigi 2023] Modifier.Node を使いましょう！

[DroidKaigi 2023] Modifier.Node を使いましょう！

すーじ

More Decks by すーじ

Other Decks in Education

Featured

Transcript