animateUnlayout explanation?

28 views
Skip to first unread message

Thomas

unread,
Oct 3, 2018, 11:16:53 PM10/3/18
to CodenameOne Discussions
could you provide a detailed example on how to use the animateUnlayout(final int duration, int opacity, Runnable callback) method of Container?
Because, if I look at the code I don't really understand. It takes a pending layout and animate a morphing from the pending layout to the current one. But what is the point of this? if the container is displayed it will switch from its current layout to the pending one and then comme back to its current layout during the animation time. I don't see any situation where I would want an animation to do that. Usually an animation is supposed to take place from a current layout and have a pending layout as a final goal (what is exactly what animateLayout does). and this even when I want to remove a component (what is what the animateUnlayout method is labeled to be usefull for but I don't understand how), in which case I want my animation to go from this current component layout to a pending disposed component layout (and at the end of the animation I can remove this component from its parent or hide it) 
Also it is supposed to leave the container in an "invalid state" but I see nothing in the code that would deinitialise the container at the end 

Shai Almog

unread,
Oct 3, 2018, 11:58:39 PM10/3/18
to CodenameOne Discussions
Invalid state means requires layout. Deinitialize means no longer visible to the user.
Say you want to delete a component and want it to fly out of the screen. Maybe even fade out while doing it.

myComponent.setX(getDisplayWidth());
myContainer
.animateUnlayoutAndWait(400);
myComponent
.remove();
myContainer
.animateLayout(200);

I set the X of the component out of bounds. Then I call animate unlayout which returns the X to the original position in the layout, then animates the component out of the screen to the invalid position. This effectively gives the visual effect of a component "flying out". Now the component is no longer visible but there is a gap where it was. If I left it at that the component would return in the next layout operation...
I then remove the component as it's no longer necessary and run an animateLayout (which is the equivalent of revalidate) to layout the code. It will let the other components fill the gap left by the removed component with a nice animation.

Thomas

unread,
Oct 4, 2018, 12:15:07 AM10/4/18
to CodenameOne Discussions
OK. I see. Thanks for the clear explanation.
Reply all
Reply to author
Forward
0 new messages