Experimental Modifier.Node implementation of Modifier.tabIndicatorOffset

[surajsau]

Overview

Experimental implementation of migrating Modifier.tabIndicatorOffset to Modifier.Node as an example for implementation for Modifier.Node.

Implementation

The Modifier.composed version of Modifier.tabIndicatorOffset looks like this,

// [1]
fun Modifier.tabIndicatorOffset(
    currentTabPosition: TabPosition
): Modifier = composed(
    // [2]
    inspectorInfo = debugInspectorInfo {
    name = "tabIndicatorOffset"
    value = currentTabPosition
    }
) {
    // [3]
    val currentTabWidth by animateDpAsState(targetValue = currentTabPosition.width, ..)
    val indicatorOffset by animateDpAsState(targetValue = currentTabPosition.left, ..)

    // [4]
    fillMaxWidth()
        .wrapContentSize(Alignment.BottomStart)
        // [5]
        .offset(x = indicatorOffset)
        .width(currentTabWidth)
}

1. created Modifier.Node and the corresponding ModifierNodeElement with currentTabPosition as the constructor parameters.

   fun Modifier.tabIndicatorOffset(currentTabPosition: TabPosition)
       = this.then(TabIndicatorOffsetElement(currentTabPosition))
   
   class TabIndicatorOffsetElement(private val currentTabPosition: TabPosition)
       : ModifierNodeElement<TabIndictorOffsetNode> { /* .. */ }
   
   class TabIndicatorOffsetNode(currentTabPosition: TabPosition): Modifier.Node() { /* .. */ }

2. the fun InspectorInfo.inspectableProperties() is overridden to the same as that of Modifier.composed version.

   class TabIndicatorOffsetElement(private val currentTabPosition: TabPosition)
       : ModifierNodeElement<TabIndictorOffsetNode> {
   
       override fun InspectorInfo.inspectableProperties() {
           debugInspectorInfo {
               name = "tabIndicatorOffset"
               value = this.currentTabPosition
           }
       }
   }

3. Modifier.tabIndiciatorOffset has two animateDpAsState states of currentTabWidth and indicatorOffset. If we look at the implementation of animateDpAsState, it basically has a Animatable instance which is animated to a newly set targetValue.

   @Composable
   fun animateDpAsState(targetValue: Dp, ..): State<Dp> {
       return animateValueAsState(targetValue, Dp.VectorConverter, ..)
   }
   
   @Composable
   fun <T, V : AnimationVector> animateValueAsState(targetValue: T, ..): State<T> {
       val animatable = remember { Animatable(targetValue, ..) }
       ..
       LaunchedEffect {
           launch {
               if (newTarget != animatable.targetValue) {
                   animatable.animateTo(newTarget, animSpec)
               }
           }
       }
   }

   So, we maintain Animatable instances for currentTabWidth and indicatorOffset in the Modifier.Node and fire animateTo function when the target value is changed.

   private class TabIndicatorOffsetNode(currentTabPosition: TabPosition): Modifier.Node() {
       private var tabWidthAnimatable: Animatable<Dp, AnimationVector1D>? = null
       var targetTabWidth by mutableStateOf(currentTabPosition.width)
   
       override fun MeasureScope.measure(..) {
           val tabWidthAnim = this.tabWidthAnimatable?.also {
               if (this.targetTabWidth != it.targetValue) {
                   coroutineScope.launch { it.animateTo(targetTabWidth) }
               }
           } ?: Animatable(targetTabWidth, ..).also {
               tabWidthAnimatable = it
           }
       }
   }

   • The target value is maintained as a mutableState object in the Modifier.Node so that we can automatically trigger a Recomposition upon a new value gets set.
   • Since, Modifier.Node's shouldAutoInvalidate = true flag is by default, LayoutModifierNode's invalidation method, measure() is automatically called upon every Recomposition.

     class TabIndicatorOffsetElement(val currentTabPosition: CurrentTabPosition) {
         override fun update(node: TabIndicatorOffsetNode) {
             // setting value to mutableState triggers recomposition
             node.targetTabWidth = currentTabPosition.width
         }
     }

4. we also have two 'stateless' Modifiers. We can simply add them as it is in the Modifier chain in the same order they're declared.

   fun Modifier.tabIndicatorOffset(..) = this
       .fillMaxWidth()
       .wrapContentSize(Alignment.BottomStart)
       .then(TabIndicatorOffsetElement(..))

5. The two stateful Modifiers, Modifier.offset and Modifier.width are subsequently implemented as it is from the AOSP code implementation itself. The current values of the Animatable are accessed during implementation of the measure().

   // both .offset and .width implement LayoutModifiereNode
   class TabIndicatorOffsetNode: LayoutModifierNode, .. {
       override fun MeasureScope.measure() {
           val targetWidth = this.tabWidthAnimatable.value.roundToPx()
   
           // Modifier.width implementation
           val wrappedConstraints = constraints.constrain(
               Constraint(minWidth = targetWidth, maxWidth = targetWidth)
           )
           val placeable = measurable.measure(wrappedConstraints)
           layout(placeable.width, placeable.height) {
               val targetOffset = this.indicatorOffsetAnimatable.value.roundToPx()
   
               // Modifier.offset implementation
               placeable.placeRelative(x = targetOffset, y = 0)
           }
       }
   }

Movie

Screen_recording_20230829_000040.mp4

[github-actions]

Hi @surajsau! Codes seem to be unformatted. To resolve this issue, please run ./gradlew detekt --auto-correct and fix the results of ./gradlew lintDebug.. Thank you for your contribution.

[github-actions]

Test Results

211 tests   211 ✔️  8m 26s ⏱️
  11 suites      0 💤
  11 files        0 ❌

Results for commit f923daa.

♻️ This comment has been updated with latest results.

[takahirom]

Sorry for the delay! Your implementation is really cool. It's gonna take me a bit to get my head around the changes. I've got a few PRs to go through, so I'll get to yours after that. If you're in a rush for some reason, just let me know. 🙏

[surajsau]

@takahirom Not in any kind of rush. 👍

This PR is more of a reference (also for my DroidKaigi session on Modifier.Node 😅) of how existing Modifier.composed can be migrated to the Modifier.Node APIs.