Material Calendar View 开源项目学习（二）- 日历的视图

Material Calendar View 开源项目学习（一）- 总览中已经对 Material Calendar View 的日历的视图构成做了一个简要的介绍。下面来进行详细的源码解读。

1. 寻找日历布局ViewGroup

上一节中有提到，日历的左右横滑是由ViewPager来实现的，而日历的视图是在PagerAdapter中创建的，在此贴出关键代码：

abstract class CalendarPagerAdapter extends PagerAdapter {
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        V pagerView = createView(position);
        ...
        container.addView(pagerView);
        ...
        return pagerView;
    }
  
    protected abstract V createView(int position);
}

由以上代码可以看出：
（1）CalendarPagerAdapter是抽象类。由于在使用文档中说到，MaterialCalendarView提供“月历”和“周历”两种显示模式，那么结合这里的抽象类CalendarPagerAdapter大家可以大概推测出，应该是使用了两个继承CalendarPagerAdapter的子类来分别代表“月”和“周”。
在IDE里查看以下CalendarPagerAdapter的实现类，可以确认我们的推测

Paste_Image.png

（2）大家注意到createView是抽象方法

protected abstract V createView(int position);

V是泛型类，在类CalendarPagerAdapter的声明中可以得知，V是CalendarPagerView的子类。

abstract class CalendarPagerAdapter extends PagerAdapter

那么我们继续推测，实现“月历”和“日历”视图的是CalendarPagerView的子类。再次在IDE中查看一下，以验证我们的想法：

Paste_Image.png

【注】由于本节想要记录的是视图的构造，所以CalendarPagerAdapter的子类干了些什么放在以后再讲。

2. 探究日历布局ViewGroup的实现

首先来看CalendarPagerView：

abstract class CalendarPagerView extends ViewGroup implements View.OnClickListener 

CalendarPagerView继承了ViewGroup，是个容器，那么就会有子View，onMeasure和onLayout的覆写也不可少，接下来一个一个看：

（1）视图的构造

public CalendarPagerView(@NonNull MaterialCalendarView view, 
                              CalendarDay firstViewDay, int firstDayOfWeek) {
    ...
    // 创建“周x”部分
    buildWeekDays(resetAndGetWorkingCalendar());
    // 创建日历部分
    buildDayViews(dayViews, resetAndGetWorkingCalendar());
}

上面的代码省略了其他细节，只摘录了关键部分。这两个方法分别用来创建日历的显示星期几的部分和显示日期的部分，如图：

Paste_Image.png

在日历部分，每一个日期都是一个DayView（继承自CheckedTextView，具体细节放在下一节写），基本作用顾名思义就是一个TextView，用来显示具体的日期。下面分开来看这两部分是如何创建的：

• 创建“周几”部分：

 private void buildWeekDays(Calendar calendar) {
    for (int i = 0; i < DEFAULT_DAYS_IN_WEEK; i++) {
        WeekDayView weekDayView = new WeekDayView(getContext(), CalendarUtils.getDayOfWeek(calendar));
        weekDayViews.add(weekDayView);
        addView(weekDayView);
        calendar.add(DATE, 1);
    }
}

其中WeekDayView是TextView的子类，用来显示“周一”、“周二”等等这些文字。这个方法做的事就是将7个WeekDayView添加到CalendarPagerView中。
有的同学可能会问（其实就是本人...初读源码时候一脸懵逼、异常烦躁，心想：作者你™搞这么复杂增加我们阅读源码的难度干撒啊？），直接7个TextView，文字设置从“周日”到“周一”不就行了么？为啥还要定义一个WeekDayView呢？这么做的原因有二：
① MaterialCalendarView提供了自定义周几是第一天的功能，所以不能将周日写死成第一天
② 语言的本地化问题。写成“周二”或者“Tuesday”之类的都是不合适的，需要使用Calendar类提供的getDisplayName方法，将时间用本地语言显示出来。这个过程从软件设计的角度来看不应是CalendarPagerView的责任，应该由显示日期的View类来实现，因此才增加WeekDayView类来封装这部分功能。

• 上面说的太细碎，有点跑偏了。。。下面着重看一下日期部分是怎么创建出来的。在构造方法中调用的buildDayViews来创建DayView实例（DayView的具体细节放在下次说）并添加到CalendarPagerView中。buildDayViews是一个抽象方法，方法的实现在上面提到的CalendarPagerView的子类——MonthView和WeekView——中。

Paste_Image.png

（2）视图的测量
大家知道，大部分自定义View都是需要覆写onMeasure方法的，这里也不例外。

 @Override
    protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
        final int specWidthSize = MeasureSpec.getSize(widthMeasureSpec);
        final int specWidthMode = MeasureSpec.getMode(widthMeasureSpec);
        final int specHeightSize = MeasureSpec.getSize(heightMeasureSpec);
        final int specHeightMode = MeasureSpec.getMode(heightMeasureSpec);

        //We expect to be somewhere inside a MaterialCalendarView, which should measure EXACTLY
        if (specHeightMode == MeasureSpec.UNSPECIFIED || specWidthMode == MeasureSpec.UNSPECIFIED) {
            throw new IllegalStateException("CalendarPagerView should never be left to decide it's size");
        }

        //The spec width should be a correct multiple
        final int measureTileWidth = specWidthSize / DEFAULT_DAYS_IN_WEEK;
        final int measureTileHeight = specHeightSize / getRows();

        //Just use the spec sizes
        setMeasuredDimension(specWidthSize, specHeightSize);

        int count = getChildCount();

        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);

            int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
                    measureTileWidth,
                    MeasureSpec.EXACTLY
            );

            int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(
                    measureTileHeight,
                    MeasureSpec.EXACTLY
            );

            child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
        }
    }

这段代码的大概意思就是，取出来测量好的宽高，然后直接使用这个宽高作为CalendarPagerView的宽高。接着给子View设置宽高，子View的宽是将CalendarPagerView的宽7等分等到的数值，而高则是按照“周历”、“月历”两个不同的模式下，按照不同的行数来等分的。
【注】widthMeasureSpec和heightMeasureSpec都是在CalendarPagerView的父View中设置好的，具体怎么得来的下节来写。

（3）视图的布局

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    final int count = getChildCount();

    final int parentLeft = 0;

    int childTop = 0;
    int childLeft = parentLeft;

    for (int i = 0; i < count; i++) {
        final View child = getChildAt(i);

        final int width = child.getMeasuredWidth();
        final int height = child.getMeasuredHeight();

        child.layout(childLeft, childTop, childLeft + width, childTop + height);
        
        // 下一个日期的左边距再增加一个DayView的宽度
        childLeft += width;

        // DEFAULT_DAYS_IN_WEEK = 7。
        // 每循环7天的，就要将上边距加一个DayView的高度
        if (i % DEFAULT_DAYS_IN_WEEK == (DEFAULT_DAYS_IN_WEEK - 1)) {
            childLeft = parentLeft;
            childTop += height;
        }
    }
}

源码非常简洁明了，也配有（不太靠谱、口语化的）注释，就不再解释了，结合日历的图片一看就能理解上面的代码实在干嘛了。

3. 总结

这一节简要记录了日历的视图是怎么构成的。有了前两节的学习笔记，就足以让我们实现一个非常简陋、没有什么功能的日历了。下一节要记录的是，作者如何让日历满足周历月历显示模式、响应事件、自定义酷炫效果等等的。

下一节：Material Calendar View中的相关算法