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

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

1. 寻找日历布局ViewGroup

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

abstract class CalendarPagerAdapter<V extends CalendarPagerView> 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的声明中可以得知,VCalendarPagerView的子类。

abstract class CalendarPagerAdapter<V extends CalendarPagerView> extends PagerAdapter

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

Paste_Image.png

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

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

首先来看CalendarPagerView

abstract class CalendarPagerView extends ViewGroup implements View.OnClickListener 

CalendarPagerView继承了ViewGroup,是个容器,那么就会有子View,onMeasureonLayout的覆写也不可少,接下来一个一个看:

(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的子类——MonthViewWeekView——中。
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等分等到的数值,而高则是按照“周历”、“月历”两个不同的模式下,按照不同的行数来等分的。
【注】widthMeasureSpecheightMeasureSpec都是在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中的相关算法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容