CalendarListView 日历列表

概述:


听过PullToRefreshListView,听过PinnedSectionListView,那你应该没听过CalendarListView,什么是CalendarListView呢,ListView和Calendar扯上什么关系呢,我们先来看下Demo(动画效果会稍微有点卡顿,真实效果会比较流畅,大家可以到我GitHub下载apk自己试用一下,效果还不错!)。

CalendarListView Demo

CalendarListView 是一个ListView 和 CalendarView 结合并互相联动的控件,日历可以伸缩扩展,列表可以上拉下沉, 日历的选择会让ListView 滑动到指定的位置,ListView的滑动同时也会带动日历滑到指定位置并能同时自动切换月份。如果我们的应用涉及到聊天记录、笔记、订单记录、天气、日报等和时间关系比较紧的业务场景,这样的控件要比简单的ListView 来得更清晰一些,也更炫一些。如果你喜欢,可以先收藏很多业务场景都可以使用。

GitHub:https://github.com/Kelin-Hong/CalendarListView

功能简介:


可以参照上面的动画,我安装上面演示的顺序说明:
1、CalendarListView 的上部分是常规的日历模块,在日历不收缩的情况下上下滑动可以切换月份
2、在日历不收缩的情况,选择日历某一天,ListView的滑到指定日期的那一条。
3、在日历不收缩的情况,选择日历某一天,选完之后,把ListView往上拉,这时候会根据日历选中日期(红色框)的高度,计算出日历的滑动速率,从而使整体滑到顶部的时候,日历日期选中的那一行是可见的。
4、在日历收缩的情况下,按住日历往下拉,这时候和上面一样经过计算,使控件能够平滑的展开。
5、在日历执行展开或者收缩过程中,用手在拖动中,如果拖动的距离超过一半放手了,会有动画执行剩下的下滑或者上拉操作,如果拖动没有超过一半,会自动回到原来的位置。
6、在日历收缩的情况下,滑动ListView,这时候日期当前ListView的section的日期变化了,那么日历会自动选中当前pin住的那个header的日期,ListView上下滑动都会牵动日历日期的变更(日历会上下滑动同时选中header的日期)
7、ListView 往下滑,到底的时候会自动触发LoadMore操作,当从1月份滑到二月份的时候,日历会自动切换2月份同时选中指定的日期。
8、ListView 往上滑,到最顶部时候会自动触发Refresh操作,当从1月份滑到去年12月份的时候,日历会自动切换到去年12月份同时选中指定的日期。
9、ListView 快速滑动试,日历跟随的日期仍能不会错
10、在日历收缩的情况,选择日历某一天,ListView的依然滑到指定日期的那一条。

如何使用

CalendarListView 接口的设计使得用户完全可以定制想要的UI和各种响应的事件的支持

1、自定义CalendarView的样式(在小格子里添加价格,tag,图标等)

注:如果不需要再日历页面添加自定义的元素,也可以直接使用BaseCalendarItemAdapter ,这样日历的视图只会有日期,依然是可用的。

2、自定义ListView的样式,和传统的BaseAdapter 差不多,重写getSectionHeaderView自定义SectionHeader的样式,重写getItemView自定义每个Item的样式。

3、初始化CalendarListView 并且设置CalendarItemAdapter和ListItemAdapter

4、去服务器获取日历和列表的数据(建议接口按月份来)获取每个月份的数据,在获取完数据更新日历和列表

  • 对于CalendarView的数据更新

  • 对于ListView的数据更新

5、CalendarView的事件支持

  • 日期选择

  • 月份改变

  • 下拉刷新,上拉加载更多

6、CalendarView的选中框样式颜色、上方的week bar 的样式都是支持自定义的。

备注


1、控件部分交互有些小复杂,可能存在一些Bug,欢迎issue和PR!
2、源码涉及较多事件分发的处理,如果你有看过我的另一篇文章《图解Android事件分发机制》,那么源码应该是比较好的实践,可以去读一下。
3、任何控件上的问题或者使用上的问题,可以给我留言或私信。
4、最后,喜欢可以收藏哦!O(∩_∩)O~~

1 1 收藏 评论

可能感兴趣的话题



直接登录
跳到底部
返回顶部