Verfassen Sie die Animation, um ein Feld über eine Zeile zu verschieben ⇐ Android

[Guest]

Ich habe dieses Design, das ich folgen möchte:
< /p>
Wenn der Benutzer eine Dauer auswählt, versuche ich, eine weiße Box zu verwenden (nicht sicher, ob dies der beste Weg ist), um die Auswahl hervorzuheben. Das Box sollte sich nicht sofort bewegen, es sollte von der vorherigen Position zur neuen Position animieren.

Ein paar von Probleme: < /p>

Das Feld überlagert den Text, sodass die 5 Minuten < /code> nicht sichtbar sind. < /li>
Ich kann Ich werde die Animation zum Laufen bringen. Wenn der Benutzer die d.h. 30 min auswählt, muss ich die Position der X -Position des Textes (oben links vom Text komponierbar) abrufen und dann den Zielwert auf diese x -Position einstellen. Setzen Sie dann den Versatz des Feldes auf diese animierte Position.

Code: Select all

var selectedIndex by remember { mutableIntStateOf(0) }

val items = listOf("5 min", "15 min", "30 min", "1 hour")

val animatedOffset by animateDpAsState(
targetValue = 0.dp, // This should be the selected text position
animationSpec = tween(durationMillis = 500),
)

Box(
modifier = Modifier
.fillMaxWidth()
.height(48.dp)
.background(
color = Color(0xff8138FF).copy(0.08f),
shape = RoundedCornerShape(12.dp),
)
.padding(4.dp),
) {
Row(
modifier = Modifier
.fillMaxSize()
.clip(RoundedCornerShape(16.dp)),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
) {
items.forEachIndexed { index, item ->
Text(
fontWeight = FontWeight.W600,
fontSize = 16.sp,
text = item,
color = if (selectedIndex == index) Color.Black else Color.DarkGray,
modifier = Modifier
.clickable { selectedIndex = index }
.padding(horizontal = 16.dp),
)
}
}

Box(
modifier = Modifier
.width(100.dp) // Should be the same width as the text items
.height(48.dp)
.background(color = Color.White, shape = RoundedCornerShape(12.dp))
.offset(x = animatedOffset, y = 0.dp),
)
}