Gordon
04/10/2022, 11:18 AM@Composable
fun CardFlipper() {
var scrollPct by remember { mutableStateOf(0f) }
val cardCount = 9
val maxOffset : Float = cardCount * 1000f
val iconIds = arrayListOf(R.drawable.card1, R.drawable.card2, R.drawable.card3)
var offset by remember { mutableStateOf(0f)}
BoxWithConstraints(modifier = Modifier
.fillMaxSize()
.scrollable(
orientation = Orientation.Horizontal,
state = rememberScrollableState { delta ->
val d = -delta
val mDelta = if (d > 0) min(d, maxOffset - offset) else -min(offset, -d)
offset += mDelta
scrollPct = offset / maxOffset
delta
}
)) {
val halfWidth : Float = (maxWidth.value/2f)
val cardScrollPct = scrollPct / (1f / (cardCount-1).toFloat())
for (i in 0 until cardCount) {
val posX = (i)*maxWidth.value
val offsetX = posX-(maxWidth.value*cardScrollPct)
val angle = (offsetX.rem(maxWidth.value) / halfWidth)*(-10f)
Log.e("CARDFLIP","Card:$i, scrlPct:$cardScrollPct, posX:$posX, maxW:$maxWidth, offset:$offsetX")
Card(modifier = Modifier.offset(x = offsetX.dp), iconId = iconIds[i.rem(3)], angle=angle)
}
Text(text = "$offset, $scrollPct, $cardScrollPct",fontSize = 20.sp, color = Color.White, fontWeight = FontWeight.Bold)
}
}
And it's workign pretty good for what i need. Except i want to limit the fling ammount to make it flip only one card at a time.
If i understood correctly i need to use FlingBehavior for that, but i can't find any example or documentation showing how to use FlingBehaviour.
Also, if scroll is ended mid air, i want to animate to the most visible card. How to achieve this with Scrollable? Or I need to go deeper and use Draggable directly?