andani
09/20/2020, 7:44 PM@Composable
fun AnimateUI() {
val (isExpanded, setIsExpanded) = remember { mutableStateOf(true) }
val constraints = if (isExpanded) {
createConstraintSetWith(margin = 16.dp)
} else {
createConstraintSetWith(margin = 64.dp)
}
ConstraintLayout(constraints) {
Button(
onClick = { setIsExpanded(isExpanded.not()) },
modifier = Modifier.layoutId("button")
) {
Text("Button")
}
Text("Text", Modifier.layoutId("text"))
}
}
private fun createConstraintSetWith(margin: Dp): ConstraintSet {
return ConstraintSet {
val button = createRefFor("button")
val text = createRefFor("text")
constrain(button) {
top.linkTo(<http://parent.top|parent.top>, margin = margin)
}
constrain(text) {
top.linkTo(button.bottom, margin)
}
}
}
Vinay Gaba
09/20/2020, 7:53 PM@Composable
fun AnimateUI() {
val (isExpanded, setIsExpanded) = remember { mutableStateOf(true) }
val margin = animate(if (isExpanded) 16.dp else 64.dp)
val constraints = createConstraintSetWith(margin = margin)
ConstraintLayout(constraints) {
Button(
onClick = { setIsExpanded(isExpanded.not()) },
modifier = Modifier.layoutId("button")
) {
Text("Button")
}
Text("Text", Modifier.layoutId("text"))
}
}
animate
function to customize you animation behavior (like duration, easing, etc)Halil Ozercan
09/20/2020, 7:57 PManimate
function which works for ConstraintSets. There are already many animate
functions for language primitives as well as compose primitives like Dp
,Size
, etc. Maybe the developers can write their own animate functions for ConstraintSets by using these primitive animate values but an obstacle is constrain
function's scope is not composable.andani
09/20/2020, 7:58 PManimate
can help me? The animation that I want to implement is this▾
Vinay Gaba
09/20/2020, 8:00 PMandani
09/20/2020, 8:01 PMConstraintSet {
val leftGuideline = createGuidelineFromAbsoluteLeft(0.15f)
val rightGuideline = createGuidelineFromAbsoluteLeft(0.85f)
val menuButton = createRefFor("menuButton")
val status = createRefFor("status")
val cover = createRefFor("cover")
val movieTitle = createRefFor("movieTitle")
val description = createRefFor("description")
val rating = createRefFor("rating")
constrain(menuButton) {
start.linkTo(parent.start, 16.dp)
top.linkTo(<http://parent.top|parent.top>, 16.dp)
}
constrain(status) {
start.linkTo(leftGuideline, 16.dp)
top.linkTo(menuButton.bottom, 8.dp)
}
constrain(cover) {
start.linkTo(leftGuideline, 16.dp)
end.linkTo(rightGuideline, 16.dp)
top.linkTo(status.bottom, 36.dp)
width = Dimension.fillToConstraints
}
createVerticalChain(
movieTitle, description, rating,
chainStyle = ChainStyle.Packed
)
constrain(movieTitle) {
start.linkTo(leftGuideline, 16.dp)
top.linkTo(cover.bottom, 24.dp)
bottom.linkTo(<http://description.top|description.top>)
}
constrain(description) {
start.linkTo(leftGuideline, 16.dp)
top.linkTo(movieTitle.bottom)
bottom.linkTo(<http://rating.top|rating.top>, 16.dp)
}
constrain(rating) {
start.linkTo(leftGuideline, 16.dp)
bottom.linkTo(parent.bottom, 16.dp)
top.linkTo(description.bottom)
}
}
And other states will have different links and margins 😄Vinay Gaba
09/20/2020, 8:44 PMandani
09/20/2020, 8:44 PMTransitionManager.beginDelayedTransition(root)
when change the ConstraintSet because I don't know if there is an equivalent of it in Compose. When I don't call it while using androidx.ConstraintLayout, it performs the same behavior which doesn't animate the UI.