日历控件MaterialCalendarView的自定义样式、每日不同样式

一、介绍

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);
            }
        });

四、完工

这里就是全部内容了，觉得有帮助的话点个赞叭！什么问题的话可以直接评论说啦！如果有更好的解决方案也希望可以教教我。特别是可以完美的填掉我那个坑的方案！