简介这是基于WheelView实现的自定义日期选择器Android工程面向需要开发滚动式日期控件的开发者解决原生日期选择器样式单一、交互不灵活的问题。工程通过第三方轮播视图组件搭建年月日三个滚动选择器并利用适配器完成数据绑定联动更新日期值。压缩包共66个文件整体仅132KB包含13个Java源码、30个编译后的class文件、8张PNG图片和7个XML配置资源另附可直接安装的APK与Eclipse项目配置文件导入后即可查看实际效果。项目结构完整源码、资源、编译输出分离便于快速定位自定义控件、事件处理和样式定义代码在此基础上还能进一步扩展出时间选择、星期选择等功能。整体已有1701人学习下载适合正在学习Android自定义View、数据适配及事件交互的中级开发者参考和二次开发。 做Android开发这些年凡是和日期选择相关的需求我第一反应绝对不是直接拖一个系统DatePicker上去而是会先问一句需求方到底要哪种交互。大多数业务场景下产品要的是一个“自己业务风格”的选择器尤其当设计稿里出现那种三列滚轮、中间有个选框的年代感样式时系统自带的日历控件根本没法直接满足。后来我用wheelView这个滚轮控件自己封装了一套自定义日期选择器年份、月份、日期三列联动支持范围限制、默认值定位和完全自定义外观一套代码能直接复用进项目里。这篇文章就把我的实现思路、核心代码、踩过的坑完整写出来适合那些准备自己动手做滚轮选择器的移动端开发同学参考也适合刚接触wheelView、想搞懂它内部逻辑的朋友。1. 为什么放着系统DatePicker不用偏要自己造轮子1.1 系统日期选择器的痛点形形色色的厂商定制Android系统自带的DatePicker在不同厂商ROM上长得完全不一样有的是一串下拉列表有的是日历网格有的甚至被定制得连日期范围都点不到。你的App在小米、华为、OPPO上跑出来的效果各不相同视觉还原度基本靠运气。更麻烦的是系统控件在主题换肤、夜间模式、字体大小适配这些场景下经常“不听话”想改个文字颜色都得翻源码找属性用起来极其膈应。我在多个项目里被这个控件坑过之后下定决心凡是日期、时间、多列枚举类选择需求一律自己封装滚轮控件。wheelView就是被我选中的那个底层基础组件。1.2 现状盘点自己写滚轮、引入wheelView还是用DatePicker在决定“自己造轮子”之前我其实对比过三条路。第一条路直接在系统DatePicker上做样式覆盖这条路成本最低但灵活性最差。系统控件的内部布局一直是“黑盒”可能会因为版本升级或者厂商定制导致你自己写的反射代码当场失效维护风险很高我不推荐在正经项目里这么干。第二条路完全不依赖第三方自己用Scroller加RecyclerView实现一个滚轮。这条路最灵活但工程量不小你需要处理惯性滑动、回弹边界、item回收复用、文本绘制居中等一堆细节没有三五天打磨不出稳定版本。如果只是业务项目里需要日期选择器这个投入产出比太低了。第三条路也是我最终采用的方案以wheelView作为底座在上面做业务封装。wheelView本身已经实现了滚轮的核心交互——惯性滑动、选中高亮、循环滚动、数据绑定这些是通用能力不需要我去造第二轮。我只需要把精力集中在日期业务逻辑上年月日数据生成、三列联动、范围限制、默认值定位。这样拆分下来工作量大减稳定性还高。1.3 wheelView滚轮控件的核心原理要封装的稳先得搞清楚wheelView内部是怎么工作的。它的核心机制可以这样理解一个垂直滚动的列表每一项固定高度比如50dp整体被一个矩形容器裁剪显示。滚动过程中根据当前滚动的偏移量除以单项高度算出一个“选中索引”然后通过接口回调出来。你看到的中间那个高亮选框本质不是一个选中的item而是画在容器上的一个静态图形滚轮滚动时它始终停在中间不动只是item内容在它下面滑过。wheelView内部一般会处理三件事初始滚动位置对齐选中项保证item正好落在中间框里、分发每个数据项的绘制位置和颜色状态、在滚动停止后计算并回调选中项。这三个能力是后面做联动的基础理解了它们你才会知道为什么联动逻辑要放在回调里、为什么手动设置数据时要格外小心回调死循环。2. 自定义日期选择器的整体设计先把联动逻辑想明白2.1 需求拆解与数据模型设计动手写代码之前我给这个日期选择器列了下面几条核心需求三列滚轮从左到右依次是年、月、日。年月日三列联动年或月变化时日期列的可用天数要跟着变。支持最小日期和最大日期限制不在范围内的数据不允许被选中。支持默认值定位弹窗打开时能直接定位到指定日期通常是今天。支持自定义外观字体大小、文字颜色、选中项颜色、分割线样式都要能配。基于这些需求数据模型并不需要多复杂核心是三个列表外加一个“当前选中”的记录年份列表根据最小/最大年份生成月份列表恒为1~12日期列表需要根据当前选中年月动态生成。保存选中值时我用三个int字段分别记录选中月份索引0~11和选中年份值这样在生成日期列表时直接查这两个值就行不需要每次从控件里反查索引。2.2 三列滚轮的UI布局与尺寸计算UI层我用一个横向的LinearLayout里面放三个wheelView宽度按权重分配高度固定。这样设计有个好处不管屏幕宽度怎么变三列始终等宽间距问题通过LinearLayout的dividerPadding或者在三个滚轮之间插View占位来解决都行。高度方面需要重点算一下。滚轮可见条目数我固定为5用户能看到5个候选值每项高度50dp那么整个滚轮的视觉高度就是250dp。如果你为每个滚轮单独设置高度可能出现上下边缘裁切不均的问题我习惯在统一高度上做文章三个滚轮保持一致尺寸保证框线对齐。这个细节看似简单实际很多第一次用wheelView的同行会漏掉适配出来的选择器上下错位特别难看。2.3 联动机制从滚动事件到数据刷新联动是整个选择器的灵魂也是大多数人第一次实现时最容易写乱的环节。我的设计思路是这样的给年份滚轮和月份滚轮分别绑定选中监听器一旦用户滚动并停在了新的一列就触发数据刷新逻辑——重新计算日期列的数据然后调用日期滚轮的setData方法刷新内容。这里有个很关键的顺序问题必须先刷新月份数据再刷新日期数据。比如用户从2024年1月滚到2024年2月月份变化了2月的天数28或29和1月不同所以要先让月份数据更新再根据新月份生成天数。如果顺序反了日期列拿到的还是旧月份的数据就会出现“2月还能选31号”的诡异情况。另外联动刷新时要注意保持滚轮位置最大程度稳定。用户只想从1月改成2月不希望日期列的滚动位置被重置到1号。我采取的策略是刷新日期数据之前记录当前选中的日号刷新后如果这个日号在范围内就恢复选中不在范围内就取范围边界值。这样既保证数据正确交互上又不会跳来跳去。3. 手把手实现从基础用法到完整联动3.1 wheelView基础用法先把数据转起来先看一个最简单的wheelView用法让数据转起来。这里以常见API为例不同版本的wheelView方法名可能略有差异但核心思路一样。WheelView wheelView findViewById(R.id.wheel_view); ListString data new ArrayList(); for (int i 1; i 31; i) { data.add(i 号); } wheelView.setData(data); wheelView.setCurrentItem(10); wheelView.setOnItemSelectedListener((wheelView, index) - { // index就是选中项下标 }); wheelView.setCyclic(false); // 日期不能循环滚动这步做完屏幕上一个基础滚轮就能滚动了。需要注意的是不同仓库的wheelView在包名、类名、回调签名上差别很大接入前先看清你用的库的文档确定回调是不是在滚动完全停止后才触发。我遇到过一个库的回调在滚动过程中连续触发导致联动逻辑疯狂刷新最后要加一个“滚动状态判断”的开关才能稳定下来。3.2 年月日联动核心代码这样写才稳接下来是联动逻辑。我把三列滚轮分别命名yearWheel、monthWheel、dayWheel然后写一个刷新方法统一处理数据更新逻辑。private void updateDayData(boolean resetPosition) { int selectedYear minYear yearWheel.getCurrentItem(); int selectedMonth monthWheel.getCurrentItem() 1; // 0~11转为1~12 int maxDay getDaysOfMonth(selectedYear, selectedMonth); int currentDay dayWheel.getCurrentItem() 1; // 当前日号 ListString dayList new ArrayList(); for (int i 1; i maxDay; i) { dayList.add(i 日); } isInternalChanging true; dayWheel.setData(dayList); if (resetPosition) { dayWheel.setCurrentItem(0); } else { int targetIndex Math.min(currentDay - 1, maxDay - 1); dayWheel.setCurrentItem(targetIndex); } isInternalChanging false; }这段代码里面最关键的是isInternalChanging这个标志位。setData和setCurrentItem在某些wheelView实现里会触发选中回调如果不加标志位拦截联动过程中会反复调用刷新方法轻则性能浪费重则无限递归、栈溢出。年份滚轮和月份滚轮的监听器写法类似但要注意一点年份变化必然导致月份天数变化所以刷新函数里要同时重新生成日期数据月份变化同样只需要刷新日期即可年份不用动。yearWheel.setOnItemSelectedListener((wheelView, index) - { if (isInternalChanging) return; updateDayData(false); }); monthWheel.setOnItemSelectedListener((wheelView, index) - { if (isInternalChanging) return; updateDayData(false); });这里我没有选择“年份变化时重置日期到1号”而是保留了原日号并做越界裁剪。比如原来选中1月31日切换到2月时2月没有31号系统自动定位到2月28日或29日。这个细节如果换成“直接重置到1号”用户连续切换月份时会非常痛苦交互体验远不如裁剪式处理。3.3 初始定位和范围限制别让用户选到昨天范围限制分为两种第一种是年份范围。比如用户只能选最近十年的日期那年份滚轮的数据就是当前年份-10到当前年份这样年份滚轮天然就限定死了用户滚不出这个区间。第二种是必须精确到某一天比如“最早不能早于2024年1月10日最晚不能晚于2025年6月15日”。这种情况只限制年份和月份还不够因为限制起始日可能落在月中间比如1月10日。我处理这类精确限制的思路是不追求在滚轮上做“禁选”效果而是做一个合法性校验。用户滚动停止后把三个滚轮当前的选中值拼成一个日期和最小/最大日期比较如果越界就校正。这样实现简单也不容易出错。private void validateAndCorrect() { Calendar selected Calendar.getInstance(); selected.set(yearWheel.getCurrentItem() minYear, monthWheel.getCurrentItem(), dayWheel.getCurrentItem() 1); if (selected.before(minDate)) { setCalendarToWheel(minDate); } else if (selected.after(maxDate)) { setCalendarToWheel(maxDate); } }setCalendarToWheel方法就是把日期重新设置回三个滚轮上顺序上要先设年份、再月份、最后日期因为日期依赖前面的计算值。这里同样要加isInternalChanging标志位否则会把联动逻辑重新触发一遍。初始定位的方法和上面的setCalendarToWheel共用逻辑。打开弹窗时把默认日期传进来三个滚轮依次定位即可。一般默认值就是今天所以判断逻辑不复杂只要保证传进来的日期在范围内就不会出错。3.4 样式定制让滚轮接上自己的设计稿wheelView默认样式一般比较朴素如果你直接用会被UI同事打回来。好在样式定制通常只需要改几个方法。我常用的配置项大致是这样的private void configWheelStyle(WheelView wheelView) { wheelView.setTextColorNormal(Color.parseColor(#999999)); wheelView.setTextColorSelected(Color.parseColor(#333333)); wheelView.setTextSize(16); // 单位sp wheelView.setLineSpacingMultiplier(2.2f); wheelView.setDividerColor(Color.parseColor(#E5E5E5)); wheelView.setDividerType(WheelView.DividerType.FILL); wheelView.setVisibleItems(5); }有几个参数容易踩坑。setTextSize在部分库接收的是sp值在部分库接收的是px值接到项目里之前先确认设计稿的单位。setLineSpacingMultiplier控制行间距倍率值越大行距越大如果改大了要注意滚轮总高度是否超过父容器。setDividerType是分割线样式有的实现是WRAP分割线长度包内容有的是FILL填满宽度选哪种要看设计稿。如果项目里有多处用到不同风格的滚轮我建议把样式配置封装成一个工具类传入一个颜色和字体的配置对象所有滚轮统一走这套配置。这样业务方换肤或者做夜间模式时只需要改配置对象就能全局生效不用到处找散落的设置代码。4. 实战中踩过的坑排查与修复记录4.1 联动时回调频繁触发数据被反复刷新这是我第一次用wheelView做联动时遇到的头号问题。现象是月份滚轮一滚动日期滚轮疯狂闪动日志里可以看到大量的数据填充操作界面卡成PPT。排查后发现部分wheelView的选中回调在滚动过程中就会触发相当于每滑过一个item就回调一次每次回调我都去setData刷新日期列而setData本身的耗时又不小最后连锁反应爆发。解决办法有两个层面。第一层确认回调的所有内部变更都加isInternalChanging拦截第二层在监听器里加一个滚动状态判断只有滚轮停止时才允许刷新数据。有的库会提供onWheelRecycled之类的停止回调如果没有可以直接在onItemSelected里过滤或者用Handler延迟刷新滚动停止200毫秒后再执行联动。我用的是“滚动停止判断状态锁”的组合方案实测下来联动刷新流畅很多。4.2 月份变化天数不更新2月29日凭空消失联动逻辑写完后测试发现一个经典Bug年份是闰年时2月有29天但切换到别的年份再切回来2月又只剩28天了。根因是我的日期生成方法没有动态判断闰年而是写死了一个28天。闰年判断算法本身不算难但我建议用Calendar类处理更干净也少出错private int getDaysOfMonth(int year, int month) { Calendar calendar Calendar.getInstance(); calendar.set(year, month, 1); // month这里传的是0~11 calendar.add(Calendar.DAY_OF_MONTH, -1); return calendar.get(Calendar.DAY_OF_MONTH); }注意Calendar的月份是0~11如果你从monthWheel.getCurrentItem()拿到的索引直接传进去其实正好对应。这个方法的原理是先定位到下一个月的1号再往前推一天正好就是当前月份的最后一天取它的天数即可。比手动写闰年判断要稳因为Calendar自己处理了闰年规则不用你去记“世纪闰年”那些特例。4.3 滚轮滑动卡顿和触摸冲突选择器放进弹窗后出现了两个问题。第一个是滚轮和弹窗的TouchListener冲突表现为往外层弹窗区域左滑右滑时会触发系统的滑动关闭监听而不是让滚轮响应。这个问题的解法是在弹窗根布局里面消费掉触摸事件或者给滚轮设置requestDisallowInterceptTouchEvent。第二个是滚轮内部绘制太频繁导致卡顿尤其是数据量大的年份列一拖动就掉帧。掉帧的根源往往是滚轮在每次滚动时都重新绘制全部文本没有做局部缓存。面对这种情况我第一反应是检查数据量确认年份列表不超过20条第二是检查setData是否被频繁调用最后才考虑是不是库本身的绘制性能瓶颈。实际项目里绝大部分卡顿都是因为联动数据刷新太频繁把事件源头控制住之后卡顿问题基本消失。4.4 wheelView版本差异与其他坑位速查不同wheelView库的API差异很大我在接入第三方依赖时吃过几次亏后来养成了一个习惯接到新库先读源码确认三个关键点——数据设置方法、选中回调签名、样式配置项再开始写业务代码。下面是我整理的一些常见问题和对应解法供快速参考问题现象常见原因解决方法滚轮选中项不在中间框内item高度和可见条目数设置不一致统一item高度值保证总高度恰好是item高度乘以可见条目数联动后日期列闪烁setData触发回调导致反复刷新加isInternalChanging状态锁内部变更不触发外部业务逻辑年份能无限循环滚动setCyclic(true)未关闭年份和日期列都设置setCyclic(false)只有部分需求才允许循环回调拿到的索引是旧的回调在滚动过程中触发监听滚动停止事件后再取索引或用Handler延迟获取字体颜色改不动设置的是normal色而不是selected色分别配置setTextColorNormal和setTextColorSelected分割线位置不对齐三列滚轮高度或边距不一致统一三列高度、行间距、分割线参数5. 扩展思路从日期选择器到通用选择器封装完这个日期选择器后我发现这套“三列联动范围限制样式配置”的思路完全可以直接复制到其他选择场景里。比如时间选择器只是把数据源从年月日改成时分秒联动关系变成小时决定分钟范围分钟决定秒范围的逻辑更简单再比如城市选择器省、市、区三级联动数据结构和日期的年月日几乎一致区别只是数据源换成树形结构的省市区数据。如果你把数据源抽取成接口把所有联动逻辑抽象成“父级变化时刷新子级数据”那这个组件就能发展成一个通用的多级滚轮选择器什么省市区、银行卡类型、身高体重都能一个组件搞定。我个人在实际项目中就是这么做的先封装日期选择器后面接到省市区需求时直接把联动逻辑抽出来复用省掉了不小的重复开发量。如果你也想做扩展建议从一开始就把“数据源生成”从“滚轮展示”里拆干净尽量做到UI层和业务数据层解耦后续扩展会顺滑很多。最后分享一个实用小技巧如果你接的wheelView库没有提供“恢复选中项并在动画中回滚”的方法可以自己在setData之后手动计算偏移量并平滑滚到目标位置。实现方式是在数据刷新结束后调用一个滚动动画方法这个补丁能让联动后的视觉表现和App整体动画风格保持一致体验直接上一个档次。本文还有配套的精品资源点击获取
`)
