Reputation: 1265
By using this code
val composableHeight = 200.dp
var composableWidthPx by remember { mutableStateOf(1000f) }
val composableWidth = with(LocalDensity.current) { composableWidthPx.toDp() }
val draggableState = rememberDraggableState(onDelta = {
composableWidthPx += it
})
Row(
modifier = Modifier
.width(composableWidth)
.height(composableHeight)
.padding(48.dp)
.draggable(draggableState, Orientation.Horizontal)
.background(Color.Red)
) {
Icon(
modifier = Modifier.requiredSize(100.dp),
imageVector = Icons.Default.Add,
contentDescription = null
)
}
I get the following result
What I want instead is for the Icon
to stay in a fixed position, with a fixed size, and if I slide over the Icon, I want the respective portion to be hidden. So, that basically would be a reveal animation.
Some thoughts on how I could achieve it?
(You may also come up with a better title for the question.)
Edit:
Some pictures with the wanted result:
Upvotes: 5
Views: 1346
Reputation: 1265
I came up with something in which I used clipToBounds
(thanks Pylyp) and offset
.
val composableHeight = 100.dp
var composableWidthPx by remember { mutableStateOf(1000f) }
val composableWidth = with(LocalDensity.current) { composableWidthPx.toDp() }
val draggableState = rememberDraggableState(onDelta = {
composableWidthPx += it
})
val iconSize = remember { 100.dp }
Row(
modifier = Modifier
.padding(48.dp)
.width(composableWidth)
.height(composableHeight)
.draggable(draggableState, Orientation.Horizontal)
.background(Color.Red)
.clipToBounds()
) {
Icon(
modifier = Modifier
.requiredSize(iconSize)
.offset(
maxOf(0.dp, (iconSize - composableWidth) / 2)
),
imageVector = Icons.Default.Add,
contentDescription = null
)
}
If someone can come up with something better, please do so.
Upvotes: 5