Jetpack Compose : 超简单实现滚轮控件(WheelPicker)

前言

滚轮应该是我们很经常用到一个控件了,比如日期选择,时间选择,地区选择等都习惯用滚轮来展示。

滚轮控件的识点

上图是由三个滚轮控件组成的日期选择器,以此我们分析所需要的知识点:

  1. 手势(滑动,惯性滚动)
  2. 内容循环滚动
  3. 实现滚轮样式

手势(滑动,惯性滚动)

我首先想到的是 Compose滚动修饰符 效果如下:

接下来就是解决惯性问题了,我很自然想到列表组件 LazyColumn 就准备去看它的源码是怎么实现时。

好吧,就决定是你了 LazyColumn

内容循环滚动

既然决定使用 LazyColumn 那内容循环也变的简单,这里直接贴代码:

Kotlin 复制代码
val size = data.size
val count = Int.MAX_VALUE
val startIndex = count / 2
val listState = rememberPagerState(initialPage = startIndex - startIndex % size)

LazyColumn(
            modifier = Modifier,
            state = listState,
            flingBehavior = rememberSnapFlingBehavior(listState),
        ) {
            items(count) { index ->
                ......
            }
        }

实现滚轮样式

如何通过调整 LazyColumn 的 Item 项样式实现滚轮效果呢,这里放一张我画的草图:

由上面的草图我们发现关键点在 Item 项的旋转角度和平移距离。

原理竟然比草图还简单。

既然如此我们先拿到 Item 项的滑动时的偏移距离,直接贴代码:

Kotlin 复制代码
val listState = rememberPagerState(initialPage = startIndex - startIndex % size)
val layoutInfo by remember { derivedStateOf { listState.layoutInfo } }
LazyColumn(
            modifier = Modifier,
            state = listState,
            flingBehavior = rememberSnapFlingBehavior(listState),
        ) {
            items(count) { index ->
                val item = layoutInfo.visibleItemsInfo.find { it.index == index }
				if (item != null) {
					val itemCenterY = item.offset + item.size / 2 //获取Item项的偏移距离
				}
            }
        }

通过偏离距离计算调整系数。

Kotlin 复制代码
/**
* pickerCenterLinePx 滚轮控件中线
* itemCenterY < pickerCenterLinePx 说明Item项在上半部,逐渐缩小,反之则逐渐放大
**/

currentsAdjust = 0.75f + 0.25f * if (itemCenterY < pickerCenterLinePx) {
    itemCenterY / pickerCenterLinePx
} else {
    1 - (itemCenterY - pickerCenterLinePx) / pickerCenterLinePx
}

最后按照惯例贴上完整代码。

Kotlin 复制代码
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun <T> WheelPicker(
    data: List<T>,
    selectIndex: Int,
    visibleCount: Int,
    modifier: Modifier = Modifier,
    onSelect: (index: Int, item: T) -> Unit,
    content: @Composable (item: T) -> Unit,
) {
    BoxWithConstraints(modifier = modifier, propagateMinConstraints = true) {
        val density = LocalDensity.current
        val size = data.size
        val count = size * 10000
        val pickerHeight = maxHeight
        val pickerHeightPx = density.run { pickerHeight.toPx() }
        val pickerCenterLinePx = pickerHeightPx / 2
        val itemHeight = pickerHeight / visibleCount
        val itemHeightPx = pickerHeightPx / visibleCount
        val startIndex = count / 2
        val listState = rememberLazyListState(
            initialFirstVisibleItemIndex = startIndex - startIndex.floorMod(size) + selectIndex,
            initialFirstVisibleItemScrollOffset = ((itemHeightPx - pickerHeightPx) / 2).roundToInt(),
        )
        val layoutInfo by remember { derivedStateOf { listState.layoutInfo } }
        LazyColumn(
            modifier = Modifier,
            state = listState,
            flingBehavior = rememberSnapFlingBehavior(listState),
        ) {
            items(count) { index ->
                val currIndex = (index - startIndex).floorMod(size)
                val item = layoutInfo.visibleItemsInfo.find { it.index == index }
                var currentsAdjust = 1f
                if (item != null) {
                    val itemCenterY = item.offset + item.size / 2
                    currentsAdjust = 0.75f + 0.25f * if (itemCenterY < pickerCenterLinePx) {
                        itemCenterY / pickerCenterLinePx
                    } else {
                        1 - (itemCenterY - pickerCenterLinePx) / pickerCenterLinePx
                    }
                    if (!listState.isScrollInProgress
                        && item.offset < pickerCenterLinePx
                        && item.offset + item.size > pickerCenterLinePx
                    ) {
                        onSelect(currIndex, data[currIndex])
                    }
                }
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(itemHeight)
                        .graphicsLayer {
                            alpha = currentsAdjust
                            scaleX = currentsAdjust
                            scaleY = currentsAdjust
                            rotationX = (1 + currentsAdjust) * 180
                        },
                    contentAlignment = Alignment.Center,
                ) {
                    content(data[currIndex])
                }
            }
        }
    }
}

private fun Int.floorMod(other: Int): Int = when (other) {
    0 -> this
    else -> this - floorDiv(other) * other
}

Thanks

以上就是本篇文章的全部内容,如有问题欢迎指出,我们一起进步。

如果觉得本篇文章对您有帮助的话请点个赞让更多人看到吧,您的鼓励是我前进的动力。

谢谢~~

源代码地址

相关推荐
雨白10 小时前
Jetpack系列(二):Lifecycle与LiveData结合,打造响应式UI
android·android jetpack
kk爱闹12 小时前
【挑战14天学完python和pytorch】- day01
android·pytorch·python
每次的天空13 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
恋猫de小郭14 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
断剑重铸之日15 小时前
Android自定义相机开发(类似OCR扫描相机)
android
随心最为安15 小时前
Android Library Maven 发布完整流程指南
android
岁月玲珑15 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
还鮟19 小时前
CTF Web的数组巧用
android
小蜜蜂嗡嗡20 小时前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
aqi0020 小时前
FFmpeg开发笔记(七十一)使用国产的QPlayer2实现双播放器观看视频
android·ffmpeg·音视频·流媒体