恒美微站
首页
关于我们
建站服务
主题模板
案例展示
资讯中心
联系我们
时间选择器自定义实战:3 个场景搞定年月日时分秒格式的完整指南
首页
资讯中心
/
时间选择器自定义实战:3 个场景搞定年月日时分秒格式的完整指南
时间选择器自定义实战:3 个场景搞定年月日时分秒格式的完整指南
发布时间:2026/8/17 18:22:17
时间选择器自定义实战3 个场景搞定年月日时分秒格式的完整指南【免费下载链接】Android-PickerViewThis is a picker view for android , support linkage effect, timepicker and optionspicker.时间选择器、省市区三级联动项目地址: https://gitcode.com/gh_mirrors/an/Android-PickerView你是不是也遇到过这样的需求一个定时提醒功能用户只想选时:分系统自带的 DatePicker 却固执地弹出一整个日历App 主色是薄荷绿选择器却永远是黑白灰后端要求的日期格式是yyyy-MM-dd HH:mm:ss选完还得自己在代码里拼字符串。这些痛点 Android-PickerView 都能解。这是一个仿 iOS 滚轮的 Android 时间选择器与条件选择器组件支持年月日时分秒任意组合、范围限制、自定义标签、自定义布局甚至农历。这篇文章不打算罗列 API而是带着 3 个真实业务场景从零到一把一个能交付的时间选择器做出来。读完你就能直接照抄代码。5 分钟跑通第一个可用版本先把项目 clone 下来把pickerview和wheelview两个 module 引入你的工程仓库地址https://gitcode.com/gh_mirrors/an/Android-PickerView。最朴素的用法只有三步new 一个 builder、传一个回调、build。TimePickerView pvTime new TimePickerBuilder(this, new OnTimeSelectListener() { Override public void onTimeSelect(Date date, View v) { // date 已经是解析好的 Date直接格式化即可 SimpleDateFormat sdf new SimpleDateFormat(yyyy-MM-dd HH:mm:ss); tvTime.setText(sdf.format(date)); } }).build(); // 弹出来 pvTime.show();不配置任何东西它默认显示年月日三个滚轮可选的年份范围是 1900 到 2100。从这一个最小示例开始后面的定制都是在这个链式调用上不断加方法而已。三个常见坑与避坑方案第一次接这个库的人十个里有八个栽在下面三个坑上。用表格对照着看比踩一遍再改高效得多。坑一月份差一个月错误写法正确写法startDate.set(2023, 1, 1)// 你以为是一月startDate.set(2023, 0, 1)// 一月endDate.set(2025, 12, 31)// 十二月endDate.set(2025, 11, 31)// 十二月原因很简单Java 的Calendar月份从 0 开始0 代表一月、11 代表十二月。demo 源码里专门注释了这一点但因为它不报错、只让你选出的范围莫名偏移所以特别隐蔽。规则凡是手写Calendar.set()设置起止时间月份一律减 1。坑二type 数组长度不是 6直接抛异常setType接收一个长度为 6 的布尔数组分别对应年月日时分秒。写少一个或多个WheelTime源码里会直接throw new RuntimeException(type[] length is not 6)。想只显示时分要这样写.setType(new boolean[]{false, false, false, true, true, false})前面三个false把年月日隐藏第 4、5 位显示时分第 6 位隐藏秒。位置不能错这跟后面setLabel的参数顺序是严格对应的。坑三自定义布局报空指针用setLayoutRes换自定义布局时新布局里必须保留 id 为timepicker的容器及其内部的 6 个WheelViewid 分别为year/month/day/hour/min/sec。库是通过 findViewById 去找这些控件的缺一个就 NPE。正确姿势是复制pickerview/src/main/res/layout/pickerview_time.xml只改你想改的部分——比如只替换顶栏保留滚轮区域原样。按真实需求场景进阶定制场景一只选时间不选日期场景会议提醒、吃药闹钟用户只需要几点几分。Calendar startDate Calendar.getInstance(); startDate.set(2014, 1, 23); // 注意这里是 0-11 月1 表示二月 Calendar endDate Calendar.getInstance(); endDate.set(2027, 2, 28); pvTime new TimePickerBuilder(this, new OnTimeSelectListener() { Override public void onTimeSelect(Date date, View v) { SimpleDateFormat sdf new SimpleDateFormat(HH:mm); btnTime.setText(sdf.format(date)); } }) .setType(new boolean[]{false, false, false, true, true, false}) // 只显示时分 .setRangDate(startDate, endDate) .build();setRangDate会顺带做一件事如果当前默认时间落在范围外它会自动把选中项拨到 startDate。所以只选时分的场景下起止日期随便给个宽范围即可滚轮上只会出现时分两列。场景二限制可选范围 默认值回填场景选生日只能选 1950 年到今天编辑已有档案时选择器要默认停在该用户的生日上。Calendar selectedDate Calendar.getInstance(); selectedDate.set(1995, 5, 15); // 回填1995年6月15日 Calendar startDate Calendar.getInstance(); startDate.set(1950, 0, 1); Calendar endDate Calendar.getInstance(); // 今天 pvTime new TimePickerBuilder(this, new OnTimeSelectListener() { /* ... */ }) .setDate(selectedDate) // 默认选中项 .setRangDate(startDate, endDate) // 可选范围 .setType(new boolean[]{true, true, true, false, false, false}) .setLabel(年, 月, 日, 时, 分, 秒) .build();需要注意两点一是setDate的月份同样要减 1二是如果回填的日期落在范围外库会静默改用 startDate 作为选中项所以回填前最好自己判断一次合法性。场景三换皮肤贴合 App 风格场景App 主色是薄荷绿#24AD9D选择器也该长成这样。pvTime new TimePickerBuilder(this, new OnTimeSelectListener() { /* ... */ }) .setContentTextSize(18) // 滚轮文字大小 .setLineSpacingMultiplier(1.2f) // 行距倍数只能在 1.0-4.0 .setDividerColor(0xFF24AD9D) // 分割线颜色 .setTextColorCenter(0xFF2a2a2a) // 选中项文字颜色 .isCenterLabel(false) // false: 每个 item 都带单位标签 .setTitleText(选择提醒时间) .setSubmitText(确定) .setCancelText(取消) .build();顺带一提isCenterLabel(false)是让滚轮上每一行都显示单位true则是只有中间选中行显示单位。前者信息更完整后者更清爽建议按滚轮数量取舍——滚轮多时用后者避免拥挤。场景四连秒也不想要把标签换成你喜欢的文字setLabel的 6 个参数依次对应年月日时分秒的显示文字。默认是年/月/日/时/分/秒但很多电商的预约上门时间场景想要英文缩写或者干脆不要单位.setType(new boolean[]{false, false, false, true, true, true}) .setLabel(, , , :, , ) // 只给小时后面显示冒号配合setTextXOffset微调每列文字的 X 轴偏移能拼出08 : 30 : 00这类紧凑格式。demo 里自定义时间选择器就是这么处理的完整代码在app/src/main/java/com/bigkoo/pickerviewdemo/MainActivity.java的initCustomTimePicker()方法中。改造前后效果对比用默认配置直接build()出来的选择器功能没问题但谈不上好看蓝按钮、灰分割线、白底和大多数 App 的视觉是脱节的。而经过上面场景三的几行配置选择器立刻和产品主色调统一用户滚动时的焦点落在薄荷绿的分割线之间配合setTitleText让用户明确知道我在设置什么。上图是项目自带效果的动图滚轮依次是年、月、日、时、分、秒六列顶部有取消 / 选择时间 / 确定操作区。注意默认配置只显示年月日三列六列全开需要像前面那样把setType的 6 个位置全部设为true。体验层面的建议滚轮数量越多单位标签越容易挤作一团。6 列全开时建议isCenterLabel(true)并配合setTextXOffset做微调如果只需要日期3 列其实最舒服——这也是为什么PickerOptions源码里默认type就是{true, true, true, false, false, false}。实战要点清单与延伸动手之前把这 6 条过一遍月份一律 0-11写范围前先-1。setType的布尔数组长度必须是 6顺序是年月日时分秒。自定义布局时timepicker容器和 6 个 WheelView 的 id 一个都不能动。回填数据用setDate校验范围用setRangDate两者可叠加。想换样式setDividerColor/setTextColorCenter/setContentTextSize/setLineSpacingMultiplier四件套先调起来。回调里拿到的是Date格式化用你自己的SimpleDateFormat想怎么拼都行。想深入了解某个方法直接读源码比看文档快TimePickerBuilder定义在pickerview/src/main/java/com/bigkoo/pickerview/builder/滚轮的联动和范围逻辑在pickerview/src/main/java/com/bigkoo/pickerview/view/WheelTime.java默认布局在pickerview/src/main/res/layout/pickerview_time.xml。项目还有农历支持setLunarCalendar(true)和自定义布局的完整示例等你想做日历类功能时再翻app/src/main/res/layout/pickerview_custom_lunar.xml也不迟。总结回到开头的三个痛点只选时分、改主题色、格式化输出现在都有了现成的解法。你得到的不仅是能用而是一套可复制的方法论——先明确要哪几列setType再限定范围setRangDate最后调外观颜色/字号/行距任何时间选择需求都能按这个顺序拆解。下一步建议分三步走先把本文的最小示例跑通确认依赖没问题然后照着场景一改一个你业务里的真实表单最后把 demo 源码里MainActivity的各个 init 方法读一遍看看官方是怎么组织这些链式调用的——你会发现它还能做的远比今天讲的多。【免费下载链接】Android-PickerViewThis is a picker view for android , support linkage effect, timepicker and optionspicker.时间选择器、省市区三级联动项目地址: https://gitcode.com/gh_mirrors/an/Android-PickerView创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考