Introducing Jetpack Compose’s New Layout: “LookaheadLayout” | by jisungbin | Jul, 2022

Layouts for creating one of the best animations

Picture by Robert Katzki on Unsplash

On June 29, a brand new format, LookaheadLayout, was launched with the discharge of Jetpack Compose 1.3.0-alpha01. To know the idea of LookaheadLayout, let’s think about we now have an ExpandableFab like beneath.

Opposite to what we imagined, it’s not fairly as a result of there isn’t any animation. Let’s add animation.

Now, the ExpandableFab that we imagined is full.

Animations, together with the ExpandableFab above, proceed as the beginning body, which is the preliminary state, the animation body by which the animation is in progress, and the completed body, which is the ultimate state, are drawn.

So, to implement such an animation in Compose, it looks as if the observe the animation body just like the precept of drawing the animation above, and draw a brand new composable that matches every body.

Nonetheless, there isn’t any format that may observe these animation frames till model 1.2.0. A format that emerged to beat that is known as LookaheadLayout.

Tossface supplied by the Toss staff is utilized (emoji font)

LookaheadLayout previews the frames to be drawn between start-finish frames, and helps to attract a brand new format between start-finish based mostly on the knowledge (measurement, placement) anticipated to be drawn on that body.

The step of tracing the frames drawn between start-finish frames is known as the lookahead step, and the format to be positioned between start-finish based on the knowledge calculated to be drawn on this means within the lookahead step is known as the intermediate format.

The data calculated within the lookahead stage could be obtained with Modifier.onPlaced, and the intermediate format can really be positioned by way of Modifier.intermediateLayout.

To date, we now have discovered in regards to the idea of LookaheadLayout. Now let’s really use it.

LookaheadLayout is composable which is within the experimental stage, and it receives LookaheadLayoutScope because the scope of the content material.

LookaheadLayoutScope implements Modifier.onPlaced and Modifier.intermediateLayout.

Modifier.onPlaced is known as with the calculated values as an argument when the knowledge for putting the intermediate format is calculated within the lookahead step. The parameters are the LookaheadLayoutCoordinates which are utilized by LookaheadLayout and this modifier’s composable.

The method of calling Modifier.onPlaced is:

the place the half stuffed in pink is that means the positioned content material

LookaheadLayoutCoordinates obtained as an argument is an interface that holds the LayoutCoordinates of each the layouts earlier than and after the lookahead stage. With this, can get the calculated offset of the intermediate format and the offset of the at the moment laid out content material.

Each LookaheadLayoutCoordinates.localLookaheadPositionOf and LookaheadLayoutCoordinates.localPositionOf are used to get the transformed offset relative to a selected coordinate. The one distinction is that not like localPositionOf, localLookaheadPositionOf makes use of the lookahead place for coordinate calculation.

Now let’s check out the remainder of the Modifier.intermediateLayout.

Can use Modifier.intermediateLayout to position an intermediate format based mostly on the knowledge calculated within the lookahead step.

Modifier.onPlaced and Modifier.intermediateLayout is:

the place the half stuffed in pink is that means the positioned content material

Now, let’s return to the body strategy of ExpandableFab that we noticed firstly of this text to really use LookaheadLayout.

The animation body course of can now be tracked through a LookaheadLayout, and the scale and offset is altering inside this animation body. We are able to implement this utilizing Modifier.onPlaced and Modifier.intermediateLayout.

To regulate the scale, morph the intermediate format by way of the measure argument, which is a lambda that gives the scale of the intermediate format with Modifier.imtermediateLayout. To regulate the offset, alter the content material placement based mostly on the offset of the intermediate format calculated with Modifier.onPlaced.

Let’s first create a Modifier.motion to regulate the offset.

Subsequent, created Modifier.transformation for resizing.

Now, as a way to apply the modifiers made on this means, the present Fab is wrapped with LookaheadLayout and the modifier related.

The outcome:

But it surely didn’t animate the way in which we needed it to. It’s as a result of simply positioned an intermediate format, however it doesn’t apply any animation. so it ends shortly, and might’t see any distinction from the earlier one.

Animatable can be utilized for animation processing. Let’s animate the scale and offset adjustments.

Lastly, it seems to be the way in which we wish it to look.

This text launched LookaheadLayout. Through the use of LookaheadLayout, you’ll be able to simply implement quite a lot of animations like a shared factor transition.

The complete code of ExpandableFab used within the instance on this article could be discovered on the hyperlink beneath.

As well as, as this 1.3.0-alpha01 was launched, Compose started to alter to an unbiased versioning system. As of now, solely the compiler is separated, and if set the Compose compiler model to 1.3.0-alpha01, then can use Kotlin 1.7.0 model.

Thanks for studying.

[View in Korean]

More Posts