体验了一把酷似飞猪的竖向自定义日历 View

现在，日历已经不仅仅是查看日期的工具，还能执行各种各样有趣的功能。比如，我们熟悉的飞猪出行，其 App 上的日历 View 就非常特别，采用的是竖向滚动模式，相较于传统的日历控件，更为直观、便捷。

受到启发，笔者也尝试自己动手实现了一个类似的自定义日历 View，且在此与大家分享。

调研与构思

在动手开发之前，笔者调研了一些现有的日历 View，包括 Android 官方的 CalendarView 以及 GitHub 上的一些开源项目。

经过对比分析，发现这些日历 View 大多采用横向滚动的模式，且功能比较单一，难以满足笔者想要实现的需求。

因此，笔者决定从零开始，设计并实现一个符合自己需求的自定义日历 View。

交互设计

竖向滚动

考虑到飞猪 App 上日历 View 的良好用户体验，笔者决定沿用其竖向滚动的设计。这种设计在手机上使用时更加顺手，可以避免横向滚动的局促感。

多选与范围选择

为了满足多种场景的需求，笔者设计了多选和范围选择两种交互模式。

• 多选： 用户可以通过长按或点击日期来选择多个日期。
• 范围选择： 用户可以通过拖拽来选择一个日期范围。

其他交互

除了上述核心交互之外，笔者还设计了以下交互：

• 快速定位： 用户可以通过点击年月标题快速定位到指定月份。
• 月份切换： 用户可以通过左右滑动或点击箭头来切换月份。
• 今天高亮： 当前日期会以不同的颜色进行高亮显示。

功能实现

布局

笔者的自定义日历 View 采用 LinearLayoutManager 作为布局管理器，并自定义了一个 RecyclerView.Adapter 来管理日期数据。

日期数据

笔者的自定义日历 View 使用一个二维数组来存储日期数据，其中每一行代表一个月的数据，每一列代表一周的数据。

多选与范围选择

笔者的自定义日历 View 通过重写 RecyclerView.Adapter 的 onTouch() 方法来实现多选和范围选择。

• 多选： 当用户长按或点击一个日期时，将该日期标记为已选择状态。
• 范围选择： 当用户开始拖拽时，记录拖拽的起始位置和结束位置，并将这两个位置之间的所有日期标记为已选择状态。

快速定位与月份切换

笔者的自定义日历 View 通过重写 RecyclerView.Adapter 的 onCreateViewHolder() 方法来实现快速定位和月份切换。

• 快速定位： 当用户点击年月标题时，计算并滚动到指定月份。
• 月份切换： 当用户左右滑动或点击箭头时，更新日期数据并刷新界面。

今天高亮

笔者的自定义日历 View 通过重写 RecyclerView.Adapter 的 onBindViewHolder() 方法来实现今天高亮。

当日期为当前日期时，将该日期的背景色设置为不同的颜色。

效果展示

笔者将自定义日历 View 集成到一个简单的 App 中，效果如下：

[图片展示自定义日历 View 的效果]

总结

通过这次开发经历，笔者对自定义 View 的设计与实现有了更深入的理解。

在实际开发过程中，笔者遇到了各种各样的挑战，但最终都一一克服了。

希望这篇文章能对有志于开发自定义 View 的朋友有所帮助。