zj565061763 / compose-wheel-picker

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())
}