Material-CalendarView实现的旅行日历

来源:互联网 发布:网络行为管理服务器 编辑:程序博客网 时间:2024/05/21 02:36

在Github上搜索了日历控件,比较来比较去最后选择了material-calendarview,点此链接,经过一番修改后还是不太满足自己的需求,于是继续搜索,搜索到这样一篇文章颇有收益 –> android实现不同样式的日历控件(MaterialCalendarView的改造工程),而且本篇博文所实现的效果也是基于这篇博文里改造后的源码再次修改的,说了这么多废话,且来看下最终的效果图(该功能已集成到好旅App中):

这里写图片描述

再看两张图对比一下,这张是经过gacmy这位博友改造后的,也就是上面提到的博文链接里:

这里写图片描述

还有一张是Github开源控件的原图:

这里写图片描述

对比后可以发现,主要是做了以下几处简单修改:
1、添加网格线,层次分明
2、添加日期标签(参考博文)
3、添加标签圆形背景
4、修改选中日期形状
5、自定义顶部年月切换

这样看下来还是挺简单的,简单说明下:
1、其实Github源码里并没有提供添加网格线的方法,我也试着研究了源码尝试着在几个地方加了几次,但均以失败告终,比如在buildDayViews方法里,在addView之前等,后来我无意中发现这是一个7*7的宫格,那么很有可能是正方形的,于是乎一个思路应运而生:那就是在日历控件后面再xml布局里直接添加横竖线。这时主要考虑两个问题:a,平均分配;b,行数不定。a问题使用线性布局的权重weight就可以解决了,关键是行数为止,后来突然意识到行数其实就是每个月的周数,找了下,果然找到了这样的方法:

 public int getWeekCountBasedOnMode() {        int weekCount = 6;        if (adapter != null && pager != null) {            Calendar cal = (Calendar) adapter.getItem(pager.getCurrentItem()).getCalendar().clone();            cal.set(Calendar.DAY_OF_MONTH, cal.getActualMaximum(Calendar.DAY_OF_MONTH));            //noinspection ResourceType            cal.setFirstDayOfWeek(Calendar.SUNDAY);            weekCount = cal.get(Calendar.WEEK_OF_MONTH);        }        return weekCount;    }

这个方法就是用来获取每个月的周数的,这样只需根据这个值去判断在xml布局中该添加五根还是六根横线了,这样表格线也就做出来了。
2、添加日期标签,基本是按照所提到的那篇博文里的代码来添加的
3、添加圆形背景,也只需要在drawText之前drawCircle就行,控制好x、y
4、生成方形点击效果,主要是修改DayView中的一个方法,大概如下:

   //生成方的的drawable    private static Drawable generateRectDrawable(final int color){        ShapeDrawable drawable = new ShapeDrawable(new RectShape());// update on 20160718 by xmliu        drawable.setShaderFactory(new ShapeDrawable.ShaderFactory() {            @Override            public Shader resize(int width, int height) {                return new LinearGradient(0, 0, 0, 0, color, color, Shader.TileMode.REPEAT);            }        });        return drawable;    }

5,自定义年月跳转,主要是把MaterialCalendarView中的goToNext和goToPrevious方法设置成public就好了

ok,日历控件暂且就优化到这个样子了,目前这里面还存在两个问题:
1、标签文字未居中
2、日期和带背景的标签文字位置不和谐。
有时间继续优化吧

2 0
原创粉丝点击