一、介绍
MaterialCalendarView是一个日历控件。
作者对它封装的很深，如果你要加入自己的一些东西比较难，他给出的接口感觉太少了，网上一些文章基本都是直接拉源码下来修改的，个人不太喜欢那样做。所以自己阅读源码和框架，在他给出的接口上完成了自定义样式，基本需要改的东西都可以实现了。先上一个效果图。
完成效果图.jpg
主要分两部分：
-
一个是添加了价格的文本显示。
-
一个是添加了自定义的选中样式。
二、添加价格
切入点
首先框架并没有提供设置每日的布局的地方，所以直接用Xml来改变布局是行不通的。
然后通过阅读介绍，他有提供一个名为DotSpan的类，它的效果是在DayViewDecorator里面设置一个背景样式，在文字下面加了两个点。显然这就是作者留给我们的添加自定义样式的地方。
我们就可以从这里入手，模仿这个文件来添加自定义样式。
实现
public class BackgroundSpan implements LineBackgroundSpan {
@Override
public void drawBackground(Canvas canvas, Paint paint,
int left, int right, int top, int baseline, int bottom,
CharSequence charSequence,
int start, int end, int lineNum) {
canvas.save();
canvas.drawColor(Color.parseColor("#ffd6ba"));
canvas.restore();
}
}
添加流程是：
-
设置装饰器
calendarView.addDecorators(priceDecorator);priceDecorator是一个实现DayViewDecorator的类。
-
在Decorator设置Span
@Override public void decorate(DayViewFacade view) { view.addSpan(new PriceSpan()); }
这里分为两种情况：
-
需要添加的样式是固定的。也就是和具体某一天无关，只是这天需要加上这个标签，那么建议直接使用DayViewDecorator的方法
@Override public boolean shouldDecorate(CalendarDay day) { return true; }利用这个方法作为判断条件，需要的地方绘制上即可。
-
需要根据不同的日子显示不同的数据的，即是我上图的需求一样。那么就按这个思路来：
因为在绘制的方法drawBackground里面 拿不到Year和Month，这就导致了无法和数据进行关联，我的解决方案是利用控件的OnMonthChangedListener监听，在他翻页结束后获取当前页的year和month，根据两个再加上传递的Day参数来取数据。
注意：这个方法会有一个弊端，就是他是一个ViewPager的setOnPageChangeListener，但是他的回调只给了onPageSelected的回调，也就是说它无法在一开始拖动的时候就改变year和month，所以！！！你在拖动至一半的时候看到两边的数据会是一样的！！ 这就是我这个方法的坑点，但是我还没找到方法解决，我只能将比较显眼的背景色部分分离出来 按照第一种情况来做，这样一般情况看不出来问题。
贴一个效果图感受一下
问题.jpg
可以看见价格两边是一样的，但是背景色被我处理了不会出现这种情况，还是可以接受的。
Span
public class PriceSpan implements LineBackgroundSpan {
private String format = "%s-%s-%s";
private String priceFormat = "$%s";
private String singleDayFormat = "0%s";
private int height;
private int width;
private int dayTextSize;
private int priceTextSize;
private int marginOne;
private int marginTwo;
// 用来让选中的那个日期变白色字体
private boolean keepWhite;
PriceSpan() {
height = Utils.dip2px(GotoBusApplication.getAppContext(), 54);
width = Utils.dip2px(GotoBusApplication.getAppContext(), 40);
dayTextSize = UIUtil.sp2px(GotoBusApplication.getAppContext(), 17);
priceTextSize = UIUtil.sp2px(GotoBusApplication.getAppContext(), 11);
marginOne = Utils.dip2px(GotoBusApplication.getAppContext(), 6);
marginTwo = Utils.dip2px(GotoBusApplication.getAppContext(), 10);
}
@Override
public void drawBackground(Canvas canvas, Paint paint,
int left, int right, int top, int baseline, int bottom,
CharSequence charSequence,
int start, int end, int lineNum) {
canvas.save();
int oldColor = paint.getColor();
float oldTextSize = paint.getTextSize();
keepWhite = false;
int Y = (height - bottom) / 2;
canvas.translate(0, -Y);
String day = charSequence.toString();
Date date = null;
try {
date = DateUtils.sdf3.parse(String.format(format, year, month, day));
if (dates != null && dates.size() > 0) {
if (dates.get(0).getDate().getTime() == date.getTime() ||
dates.get(dates.size() - 1).getDate().getTime() == date.getTime()) {
keepWhite = true;
}
}
} catch (ParseException e) {
e.printStackTrace();
}
canvas.translate(0, Y);
// 绘制日期
paint.setTextSize(dayTextSize);
Rect rectDay = new Rect();
paint.getTextBounds(day, 0, charSequence.length(), rectDay);
// 判断日期在当前时间之前就变灰色
if (keepWhite) {
paint.setColor(Color.WHITE);
} else if (currentDate.before(date)) {
paint.setColor(Color.BLACK);
} else {
paint.setColor(Color.GRAY);
}
canvas.drawText(day, (width - rectDay.width()) / 2, marginOne, paint);
// 绘制价格
if (hasPrice) {
//个位的日期前面加上一个0
if (day.length() == 1) {
day = String.format(singleDayFormat, day);
}
String currentDay = String.format(format, year, month, day);
String price = priceMap.get(currentDay);
if (price != null) {
String priceString = String.format(priceFormat, price);
if (keepWhite) {
paint.setColor(Color.WHITE);
} else if (price.equals(lowestData)) {
paint.setColor(Color.parseColor("#34b03d"));
} else {
paint.setColor(Color.parseColor("#999999"));
}
paint.setTextSize(priceTextSize);
Rect rect = new Rect();
paint.getTextBounds(priceString, 0, priceString.length(), rect);
canvas.drawText(priceString, (width - rect.width()) / 2,
rectDay.height() + marginOne + marginTwo, paint);
}
}
paint.setColor(oldColor);
paint.setTextSize(oldTextSize);
canvas.restore();
}
}
-
Canvas canvas：画布 通过这个来绘制自己的样式。但是要注意它是已经移动过的，移动的距离可以通过(height （整个item的高度）- bottom（参数）) / 2来计算;
-
paint：注意保存之前的属性。不然会引起绘制位置不准确。
-
int left, int right, int top, int baseline, int bottom 这些参数都是框架内绘制日期的位置参数。canvas位置就是移动到了这里，所以left和top都是0，right就是整体的宽度，bottom就是Day日期文本的高度。
-
CharSequence charSequence：当前Day日期。（只有Day 没有year和month，我觉得这里比较坑。）
-
54dp是我的item高度 40是宽度。
这段代码是包含了一个日期的绘制，因为它框架内的日期是居中的，导致留给我显示价格的地方太短了 不美观，所以我把原来的文本设置为透明色（calendarView.setDateTextAppearance(R.style.calendar_date_text);）隐藏了起来，然后自己在合适的位置绘制日期。这么做就会让框架原来的一些效果消失（例如之前的日期变灰色等），所以还需要另外自己处理这些问题。
OK 价格部分就介绍完了。
二、自定义背景色
首先自定义背景色有两种方法：
- 就是固定的选中背景色，也就是大家都一样，没有什么头尾的。
- 就是我这种设计的背景色，头尾不一样的样式。
第一种
建议就使用
@Override
public void decorate(DayViewFacade view) {
view.setSelectionDrawable(drawable);
}
来设置一个Drawable来替换掉原来的背景圈，其他的部分框架已经帮你处理好了。
第二种
就比较麻烦了，
-
首先你需要将原本框架的背景色那个圆的去掉，就是按第一种方法给它设置一个透明的drawable。
-
为了避免上文提到的拖动坑的情况，我们要写多个文件来达到效果。
这是我左边开始的背景文件，以此为参考。
/** * Created by Vito on ${date} */ public class LeftSelectedDecorator implements DayViewDecorator, OnDateSelectedListener, OnRangeSelectedListener { private List<CalendarDay> dates; public LeftSelectedDecorator(List<CalendarDay> dates) { if (dates != null && dates.size() > 0) { this.dates = dates; } else { this.dates = new ArrayList<>(); } } @Override public boolean shouldDecorate(CalendarDay day) { if (dates.size() > 1) { if (day.getDate().getTime() == dates.get(0).getDate().getTime()) { return true; } else { return false; } } else { return false; } } @Override public void decorate(DayViewFacade view) { view.addSpan(new BackgroundSpan()); } @Override public void onRangeSelected(@NonNull MaterialCalendarView widget, @NonNull List<CalendarDay> dates) { this.dates = dates; } @Override public void onDateSelected(@NonNull MaterialCalendarView widget, @NonNull CalendarDay date, boolean selected) { dates.clear(); if (selected) { dates.add(date); } } public class BackgroundSpan implements LineBackgroundSpan { private int round; private int height; private int width; BackgroundSpan() { height = Utils.dip2px(GotoBusApplication.getAppContext(), 54); width = Utils.dip2px(GotoBusApplication.getAppContext(), 40); round = Utils.dip2px(GotoBusApplication.getAppContext(), 6); } @Override public void drawBackground(Canvas canvas, Paint paint, int left, int right, int top, int baseline, int bottom, CharSequence charSequence, int start, int end, int lineNum) { canvas.save(); int oldColor = paint.getColor(); float oldTextSize = paint.getTextSize(); canvas.translate(0, -(height - bottom) / 2); paint.setColor(Color.parseColor("#ff8945")); RectF rect = new RectF(0, 0, width + round, height); canvas.drawRoundRect(rect, round, round, paint); paint.setColor(oldColor); paint.setTextSize(oldTextSize); canvas.restore(); } } }
注意：多个Decorator添加要注意顺序，会盖住，一般是在文本最后。
calendarView.addDecorators(leftSelectedDecorator, rightSelectedDecorator,
singleSelectedDecorator, selectedDecorator, priceDecorator);
注意:监听需要分发一下
calendarView.setOnRangeSelectedListener(new OnRangeSelectedListener() {
@Override
public void onRangeSelected(@NonNull MaterialCalendarView widget, @NonNull List<CalendarDay> dates) {
leftSelectedDecorator.onRangeSelected(widget, dates);
rightSelectedDecorator.onRangeSelected(widget, dates);
singleSelectedDecorator.onRangeSelected(widget, dates);
selectedDecorator.onRangeSelected(widget, dates);
priceDecorator.onRangeSelected(widget, dates);
}
});
calendarView.setOnDateChangedListener(new OnDateSelectedListener() {
@Override
public void onDateSelected(@NonNull MaterialCalendarView widget, @NonNull CalendarDay date, boolean selected) {
leftSelectedDecorator.onDateSelected(widget, date, selected);
rightSelectedDecorator.onDateSelected(widget, date, selected);
singleSelectedDecorator.onDateSelected(widget, date, selected);
selectedDecorator.onDateSelected(widget, date, selected);
priceDecorator.onDateSelected(widget, date, selected);
}
});
四、完工
这里就是全部内容了，觉得有帮助的话点个赞叭！什么问题的话可以直接评论说啦！如果有更好的解决方案也希望可以教教我。特别是可以完美的填掉我那个坑的方案！
网友评论