Skip to content

Instantly share code, notes, and snippets.

@StylianosGakis
Last active August 8, 2021 20:58
Show Gist options
  • Save StylianosGakis/aeb509bf7532661f1b6f5bb94a0dae26 to your computer and use it in GitHub Desktop.
Save StylianosGakis/aeb509bf7532661f1b6f5bb94a0dae26 to your computer and use it in GitHub Desktop.
Running gif here: https://twitter.com/GakisStylianos/status/1424149663662411776 . Gist of a code example copying the functionality of https://twitter.com/doris4lt/status/1423373212063211522 showcasing different Row arrangements using Jetpack Compose animations. Built using Jetpack Compose for desktop version '1.0.0-alpha1'.
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.SpringSpec
import androidx.compose.animation.core.VectorConverter
import androidx.compose.animation.core.animate
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.produceState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.WindowPosition
import androidx.compose.ui.window.application
import androidx.compose.ui.window.rememberWindowState
const val LetterBoxSize: Int = 100
fun main() = application {
Window(
onCloseRequest = ::exitApplication,
state = rememberWindowState(
width = 1000.dp,
height = 500.dp,
position = WindowPosition.Aligned(Alignment.Center)
),
title = "Compose animations are cool 😎",
) {
MaterialTheme {
Content()
}
}
}
enum class RowSize(val dp: Dp) {
BIG((LetterBoxSize * 6).dp),
SMALL((LetterBoxSize * 3).dp)
}
sealed interface AnimatedRowArrangement {
val arrangement: Arrangement.Horizontal
val description: String
}
class HorizontalArrangement(
value: Arrangement.Horizontal,
) : AnimatedRowArrangement {
override val arrangement: Arrangement.Horizontal = value
override val description: String = arrangement.toString().substringAfter("#")
}
object EqualWeight : AnimatedRowArrangement {
override val arrangement = Arrangement.Start
override val description: String = "Equal Weight"
}
@Composable
fun Content() {
val width by produceState(RowSize.SMALL.dp) {
while (true) {
animate(
typeConverter = Dp.VectorConverter,
initialValue = RowSize.SMALL.dp,
targetValue = RowSize.BIG.dp,
animationSpec = SpringSpec(
dampingRatio = Spring.DampingRatioHighBouncy,
stiffness = Spring.StiffnessLow,
)
) { value, _ ->
this.value = value
}
animate(
typeConverter = Dp.VectorConverter,
initialValue = RowSize.BIG.dp,
targetValue = RowSize.SMALL.dp,
animationSpec = tween(500)
) { value, _ ->
this.value = value
}
}
}
Box(
contentAlignment = Alignment.Center,
modifier = Modifier.fillMaxSize()
) {
Column(
verticalArrangement = Arrangement.spacedBy(5.dp),
) {
listOf(
EqualWeight,
HorizontalArrangement(Arrangement.SpaceBetween),
HorizontalArrangement(Arrangement.SpaceAround),
HorizontalArrangement(Arrangement.SpaceEvenly),
HorizontalArrangement(Arrangement.End),
HorizontalArrangement(Arrangement.Center),
HorizontalArrangement(Arrangement.Start),
).forEach { arrangement: AnimatedRowArrangement ->
ShowcaseRow(
rowContentDescriptionText = arrangement.description,
rowContent = {
AnimatedRow(
animatedRowArrangement = arrangement,
animatedWidth = width,
)
},
)
}
}
}
}
@Composable
fun ShowcaseRow(
rowContentDescriptionText: String,
rowContent: @Composable RowScope.() -> Unit,
) {
Row {
Text(
modifier = Modifier
.weight(1f, true)
.align(Alignment.CenterVertically),
textAlign = TextAlign.End,
text = rowContentDescriptionText
)
Box(
modifier = Modifier.weight(5f, true),
contentAlignment = Alignment.Center
) {
this@Row.rowContent()
}
}
}
@Composable
fun AnimatedRow(
animatedRowArrangement: AnimatedRowArrangement,
animatedWidth: Dp,
) {
Row(
modifier = Modifier
.width(animatedWidth)
.clip(MaterialTheme.shapes.small)
.background(color = Color.Blue),
horizontalArrangement = animatedRowArrangement.arrangement
) {
listOf('A', 'B', 'C').forEach { char ->
LetterBox(
modifier = when (animatedRowArrangement) {
EqualWeight -> Modifier.fillMaxWidth().weight(1f, true)
is HorizontalArrangement -> Modifier.width(LetterBoxSize.dp)
},
letter = char
)
}
}
}
@Composable
fun LetterBox(
modifier: Modifier,
letter: Char,
) {
Box(
modifier = modifier
.padding(6.dp)
.clip(MaterialTheme.shapes.small)
.background(Color.Yellow, shape = MaterialTheme.shapes.small)
) {
Text(
modifier = Modifier
.align(Alignment.Center)
.fillMaxWidth()
.padding(vertical = 14.dp),
text = letter.toString(),
textAlign = TextAlign.Center
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment