compose-wheel-picker
compose-wheel-picker copied to clipboard
Android Compose wheel picker library based on LazyColumn in vertical and LazyRow in horizontal.
About
Android Compose wheel picker library based on LazyColumn in vertical and LazyRow in horizontal.
Sample
Default | Item size | Unfocused count | Custom divider | Custom focus |
---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
Scroll to index | Observe index | Custom display | Reverse layout | Horizontal |
---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
Default
FVerticalWheelPicker(
modifier = Modifier.width(60.dp),
// Specified item count.
count = 50,
) { index ->
Text(index.toString())
}
Item size
FVerticalWheelPicker(
// ......
// Specified item height.
itemHeight = 60.dp,
) {
// ......
}
Unfocused count
FVerticalWheelPicker(
// ......
// Specified unfocused count.
unfocusedCount = 2,
) {
// ......
}
Custom divider
FVerticalWheelPicker(
// ......
focus = {
// Custom divider.
FWheelPickerFocusVertical(dividerColor = Color.Red, dividerSize = 2.dp)
},
) {
// ......
}
Custom focus
FVerticalWheelPicker(
// ......
// Custom focus.
focus = {
Box(
modifier = Modifier
.fillMaxSize()
.border(width = 1.dp, color = Color.Gray)
)
},
) {
// ......
}
Scroll to index
// Specified initial index.
val state = rememberFWheelPickerState(10)
LaunchedEffect(state) {
delay(2000)
// Scroll to index.
state.animateScrollToIndex(20)
}
FVerticalWheelPicker(
// ......
// state
state = state,
) {
// ......
}
Observe index
-
FWheelPickerState.currentIndex
- Index of picker when it is idle. -
FWheelPickerState.currentIndexSnapshot
- Index of picker when it is idle or scrolling but not fling.
val state = rememberFWheelPickerState()
FVerticalWheelPicker(
// ......
// state
state = state,
) {
// ......
}
// Observe currentIndex.
LaunchedEffect(state) {
snapshotFlow { state.currentIndex }
.collect {
Log.i(TAG, "currentIndex ${state.currentIndex}")
}
}
// Observe currentIndexSnapshot.
LaunchedEffect(state) {
snapshotFlow { state.currentIndexSnapshot }
.collect {
Log.i(TAG, "currentIndexSnapshot ${state.currentIndexSnapshot}")
}
}
Custom display
FVerticalWheelPicker(
// ......
// Content display
display = { index ->
if (state.currentIndexSnapshot == index) {
content(index)
} else {
// Modify content if it is not in focus.
Box(
modifier = Modifier
.rotate(90f)
.alpha(0.5f)
) {
content(index)
}
}
}
) {
// ......
}
Reverse layout
FVerticalWheelPicker(
// ......
// Reverse layout.
reverseLayout = true,
) {
// ......
}
Horizontal
FHorizontalWheelPicker
is almost the same as FVerticalWheelPicker
.
FHorizontalWheelPicker(
modifier = Modifier.height(60.dp),
// Specified item count.
count = 50,
) { index ->
Text(index.toString())
}