https://github.com/zj565061763/compose-wheel-picker
Android Compose wheel picker library based on LazyColumn in vertical and LazyRow in horizontal.
https://github.com/zj565061763/compose-wheel-picker
android compose kotlin wheelpicker wheelview
Last synced: 2 months ago
JSON representation
Android Compose wheel picker library based on LazyColumn in vertical and LazyRow in horizontal.
- Host: GitHub
- URL: https://github.com/zj565061763/compose-wheel-picker
- Owner: zj565061763
- License: mit
- Created: 2022-07-14T14:33:52.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-27T16:34:07.000Z (over 1 year ago)
- Last Synced: 2024-11-27T17:31:18.257Z (over 1 year ago)
- Topics: android, compose, kotlin, wheelpicker, wheelview
- Language: Kotlin
- Homepage:
- Size: 661 KB
- Stars: 94
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://jitpack.io/#zj565061763/compose-wheel-picker)
# 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
```kotlin
FVerticalWheelPicker(
modifier = Modifier.width(60.dp),
// Specified item count.
count = 50,
) { index ->
Text(index.toString())
}
```
### Item size
```kotlin
FVerticalWheelPicker(
// ......
// Specified item height.
itemHeight = 60.dp,
) {
// ......
}
```
### Unfocused count
```kotlin
FVerticalWheelPicker(
// ......
// Specified unfocused count.
unfocusedCount = 2,
) {
// ......
}
```
### Custom divider
```kotlin
FVerticalWheelPicker(
// ......
focus = {
// Custom divider.
FWheelPickerFocusVertical(dividerColor = Color.Red, dividerSize = 2.dp)
},
) {
// ......
}
```
### Custom focus
```kotlin
FVerticalWheelPicker(
// ......
// Custom focus.
focus = {
Box(
modifier = Modifier
.fillMaxSize()
.border(width = 1.dp, color = Color.Gray)
)
},
) {
// ......
}
```
### Scroll to index
```kotlin
// 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.
```kotlin
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
```kotlin
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
```kotlin
FVerticalWheelPicker(
// ......
// Reverse layout.
reverseLayout = true,
) {
// ......
}
```
### Horizontal
`FHorizontalWheelPicker` is almost the same as `FVerticalWheelPicker`.
```kotlin
FHorizontalWheelPicker(
modifier = Modifier.height(60.dp),
// Specified item count.
count = 50,
) { index ->
Text(index.toString())
}
```