CODEWITHSUNDEEP
androidandroid-constraintlayoutandroid-jetpack-composeandroid-motionlayout
Tonio
Tonio

Reputation: 561

Jetpack Compose - MotionLayout

What is the equivalent of :

<Transition
    motion:constraintSetEnd="@id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="1500"
    motion:motionInterpolator="linear">
    <OnSwipe
        motion:dragDirection="dragUp"
        motion:touchAnchorId="@id/view1"
        motion:touchAnchorSide="top" />
</Transition>

On MotionLayout for Compose ? I do not see the answear on both of those links :

https://github.com/androidx/constraintlayout/wiki/Introduction-to-MotionLayout-in-Compose https://github.com/androidx/constraintlayout/wiki/Compose-MotionLayout-JSON-Syntax

I would like to animate my scene only if I manually scroll, not by clicking on a button like in the examples.

Thanks !

Upvotes: 1

Views: 1492

Answers (2)

anro
anro

Reputation: 1408

Since androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha01 you can now use onSwipe setting for transaction in MotionScene:

MotionScene {
    val anchorComposable = createRefFor("someId")
    val state1 = constraintSet {
        //some constraints
    }
    val state2 = constraintSet {
        //some constraints
    }

    transition(state1, state2, "default") {
        onSwipe = OnSwipe(
            anchor = anchorComposable,
            direction = SwipeDirection.Up,
            side = SwipeSide.Top,
        )
    }
}

Pass this scene to MotionLayout and you'll get the desired swipe effect. Unfortunately, they still don't have all the functionality of xml MotionLayout, i.e. there is no TransitionListener, so you can't check if swipe is started or completed. Another important drawback is that all clickable composables are excluded from swipable zone.

Upvotes: 0

hoford
hoford

Reputation: 5323

MotionLayout in Compose has no built in support of (yet).

Compose has swipe handling
One approach looks like this:

var componentHeight by remember { mutableStateOf(1000f) }
val swipeableState = rememberSwipeableState("Bottom")
val anchors = mapOf(0f to "Bottom", componentHeight to "Top")
val mprogress = (swipeableState.offset.value / componentHeight)

progress is then passed into the MotionLayout Composable.

  MotionLayout(motionScene = "",  progress = mprogress, ...)

Here is an examples how you would code it.

Upvotes: 0

Related Questions