ComposeReorderable
0.9.8indexedEnables drag-and-drop reordering in LazyList and LazyGrid layouts with customizable animations, supporting drag handles and elevation effects during item movement.
0
Stars
—
Used by
dependents
—
Health
/ 100
Compose LazyList/Grid reorder
A Jetpack Compose (Android + Desktop) modifier enabling reordering by drag and drop in a LazyList and LazyGrid.
Download
dependencies {
implementation("io.github.yannickpulver.composereorderable:reorderable:<latest_version>")
}
How to use
- Create a reorderable state by
rememberReorderableLazyListStatefor LazyList orrememberReorderableLazyGridStatefor LazyGrid
ReorderableItem provides the item dragging state, use this to apply elevation , scale etc.
@Composable
fun VerticalReorderList {
= remember { mutableStateOf(List() { }) }
state = rememberReorderableLazyListState(onMove = { from, to ->
.value = .value.toMutableList().apply {
add(to.index, removeAt(from.index))
}
})
LazyColumn(
state = state.listState,
modifier = Modifier
.reorderable(state)
.detectReorderAfterLongPress(state)
) {
items(.value, { it }) { item ->
ReorderableItem(state, key = item) { isDragging ->
elevation = animateDpAsState( (isDragging) dp dp)
Column(
modifier = Modifier
.shadow(elevation.value)
.background(MaterialTheme.colors.surface)
) {
Text(item)
}
}
}
}
}
The item placement and drag cancelled animation can be changed or disabled by dragCancelledAnimation and defaultDraggingModifier
@Composable
fun VerticalReorderGrid() {
val = remember { mutableStateOf(List() { }) }
state = rememberReorderableLazyGridState(dragCancelledAnimation = NoDragCancelledAnimation(),
onMove = { from, to ->
.value = .value.toMutableList().apply {
add(to.index, removeAt(from.index))
}
})
LazyVerticalGrid(
columns = GridCells.Fixed(),
state = state.gridState,
modifier = Modifier.reorderable(state)
) {
items(.value, { it }) { item ->
ReorderableItem(state, key = item, defaultDraggingModifier = Modifier) { isDragging ->
Box(
modifier = Modifier
.aspectRatio()
.background(MaterialTheme.colors.surface)
) {
Text(text = item,
modifier = Modifier.detectReorderAfterLongPress(state)
)
}
}
}
}
}
Check out the sample app for different implementation samples.
Notes
It's a known issue that the first visible item does not animate.
License
Copyright 2022 André Claßen
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance the License.
You may obtain a copy of the License at
https:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.