https://kotlinlang.org logo
Channels
Powered by
k

kclerc

06/15/2020, 11:54 AM
👋 I have 2 questions about animating things : 1️⃣ How to animate a Composable height from “wrap-content” to 0dp ? We could use the animate api to update scaleY from 1 to 0 but in a Column, the view would just be like “invisible” and not “gone” right ? I mean, elements after the resized one will not go up as the scaleY is changed 2️⃣ How to animate a Composable height update if its child height changes
d

Doris Liu

07/16/2020, 1:36 AM
Sorry for the late reply. Somehow I missed these questions...
For 1), it depends on the effect you are after: whether the height should be scaled down to 0, or should the composable be clipped. Either way they won't be "gone".
As for question 2), I would love to know a bit more about what you try to achieve. Is the parent defined with a Modifier.wrapContentSize/Height?
k

kclerc

07/16/2020, 9:16 AM
I was trying to do something like that : https://github.com/skydoves/ExpandableLayout I have a parent composable (lets name it ExandableComposable) to which I can pass any composable children to show when expanded. Without any animation it works properly, no problem. But I want the children to appear with an expanding animation, thus question 1. And I want any composable below my Exandable to smoothly move as the previous one expands, thus question 2.
I’ve also asked a question on stackoverflow concerning composable animations : https://stackoverflow.com/questions/62376589/how-to-animate-width-of-a-button-in-jetpack-compose It’s still about animating a parent when its child changes. In the mean time, constraint layout was added to compose. Does it embed automatic animations when its content changes ? I’m not kean on xml property “animateLayoutChanges” but this is this kind of behavior I want to reproduce.
The other point of view would be to directly animate children width, isn’t it ? In the following example :
Copy code
@Composable fun MyContainer() {
    val (isLoading, setIsLoading) = state { false }
    val width = animate(target = if (isLoading) [Retrieve A width] else [Retrieve B width])

    Button(
        onClick = setIsLoading,
        text = {
            if (isLoading) {
                A(modifier = Modifier.preferredWidth(width))
            } else {
                B(modifier = Modifier.preferredWidth(width))
            }
        }
    )
}
(it may be better to apply the modifier once to 
Button
) Is there a way to “measure” A and B without having them displayed ?
Powered by