android 一个简单的自定义日历控件,让你掌控时间

前言:
这段时间好久没更新,最近对自定义View感兴趣,先是根据网上的一些例子仿做了一个仿微信通讯录的组合控件,就是那种带字母索引ListView,可惜不知什么原因,用android studio导出的arr包却老是报错,待我继续研究。
后来便搞了这个日历控件,一是对自定义的view感兴趣,二来后来的项目可能需要用到类似的控件,虽说网上也有类似的现成的控件下载,但是觉得自己动手又何尝不是一次联系的机会。


先上图

normal
日期单选
日期多选

由于不会上传视频,只能截图啦


自定义View的过程也不重复太多,毕竟网上这么多教程了
就总结一下流程吧

  1. 新建一个类继承于View或者View的子类
  2. 实现三个构造方法
  3. 可以在value目录下新建attrs.xml文件,再其中声明<declare-styleable>以及内部的<attr>子标签来定义xml属性。
  4. 实现onMeasure()方法以及最重要的onDraw()方法
  5. 因为是自定义的日历控件,所以我也重写了dispatchTouchEvent()方法来解决响应事件。

思路:

  • 要绘制出一个月的日历,需要下列几个参数
  • 这个月的天数
  • 这个月第一天是星期几
  • 今天是几号
手画的,见谅

贴上最重要的onDraw()方法

protected void onDraw(Canvas canvas) {


        //绘制背景色
        canvas.drawColor(mBackground);

        //绘制左箭头
        mNumPaint.setColor(clickLeft ? mNormalButtonColor1 : mClickButtonColor2);
        mNumPaint.setStrokeWidth(6);
        mNumPaint.setAntiAlias(true);
        canvas.drawLine(mViewWidth / 8, mViewHeight / 16, mViewWidth * 3 / 16, mViewHeight / 32, mNumPaint);
        canvas.drawLine(mViewWidth / 8, mViewHeight / 16, mViewWidth * 3 / 16, mViewHeight * 3 / 32, mNumPaint);
        mNumPaint.reset();


        //绘制右箭头
        mNumPaint.setColor(clickRight ? mNormalButtonColor1 : mClickButtonColor2);
        mNumPaint.setStrokeWidth(6);
        mNumPaint.setAntiAlias(true);
        canvas.drawLine(mViewWidth * 7 / 8, mViewHeight / 16,  
                               mViewWidth * 13 / 16, mViewHeight / 32, mNumPaint);
        canvas.drawLine(mViewWidth * 7 / 8, mViewHeight / 16,  
                               mViewWidth * 13 / 16, mViewHeight * 3 / 32, mNumPaint);
        mNumPaint.reset();

        //绘制年,月份
        mNumPaint.setTextSize(mViewHeight / 16);
        mNumPaint.setColor(mNormalTextColor1);
        mNumPaint.setAntiAlias(true);
        String theYear = year + "";
        String theMonth = month + "";
        canvas.drawText(theYear, mViewWidth / 2 - getTextWidth(mNumPaint, theYear) / 2,   
                                mViewHeight / 16, mNumPaint);
        mNumPaint.setTextSize(mViewHeight / 18);
        mNumPaint.setColor(mNormalTextColor2);
        canvas.drawText(theMonth, mViewWidth / 2 -   getTextWidth(mNumPaint, theMonth) / 2,   
                                mViewHeight / 8, mNumPaint);
        mNumPaint.reset();


        //绘制日历
        xInterval = mViewWidth / 7;
        yInterval = mViewHeight / 8;
        int day = 0;
        float x;
        float y;
        int theday;
        boolean isToday = false;
        boolean isCheckDay = false;
        float offset = 0;
        radius = mViewWidth / 19;

        for (int i = 0; i < weekName.length; i++) {
            x = i * xInterval + mNormalTextSize / 2;
            y = 1 * yInterval + yInterval / 2;
            if (i == 0 || i == weekName.length - 1) {
                drawNum(weekName[i], mNormalTextSize, mNormalTextColor2, x, y,   
                                  canvas, isToday, offset);
            } else {
                drawNum(weekName[i], mNormalTextSize, mNormalTextColor1, x, y,  
                                  canvas, isToday, offset);
            }
        }

        mNumPaint.reset();

        String str;

        for (int i = 2; i < 8; i++) {
            for (int j = 0; j < 7; j++) {
                if (i == 2 && j == 0) {
                    j = weekOfFirstDay;
                }

                if (day > allDays.length - 1) {
                    theday = -1;
                } else {
                    theday = allDays[day];
                }

                str = "" + theday;
                if (theday == -1) {
                    str = "";
                }

                //单个数字的偏移量
                if (theday < 10 && theday > 0) {
                    offset = mNormalTextSize / 4;
                }


                //计算数字的位置
                y = i * yInterval + yInterval / 2;
                x = j * xInterval + mNormalTextSize / 2 -  
                                         getTextWidth(mNumPaint, str) + offset;


                //判断是否为今天
                isToday = theday == today;

                if (isToday) {
                    drawACircle(x, y, Color.argb(255, 254, 140, 26),  
                                         radius, canvas, offset);
                }

                //如果数字是checkDay
                isCheckDay = theday == firstCheckDay;
                if (isCheckDay) {
                    drawACircle(x, y, 0xffa0c8c8, radius, canvas, offset);
                }

                if (secondCheckDay != -2) {
                    if (theday > firstCheckDay && theday <= secondCheckDay) {
                        drawACircle(x, y, 0xffa0c8c8, radius, canvas, offset);
                        isCheckDay = true;
                    }
                }

                if (j == 0 || j == 6) {
                    drawNum(str, mNormalTextSize, mNormalTextColor2,  
                                   x, y, canvas, isToday || isCheckDay, offset);
                } else {
                    drawNum(str, mNormalTextSize, mNormalTextColor1,   
                                   x, y, canvas, isToday || isCheckDay, offset);

                }
                offset = 0;
                day++;
                mNumPaint.reset();
            }
        }

    }

再贴上dispatchTouchEvent()方法

public boolean dispatchTouchEvent(MotionEvent event) {
        //获取事件的位置
        float touchX = event.getX();
        float touchY = event.getY();


        if (!canClick) {
            return true;
        }


        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:

                if (touchY < 3 * mViewHeight / 32 && touchY > mViewHeight / 32) {
                    if (touchX < 3 * mViewWidth / 16 && touchX > mViewWidth / 8) {
                        clickLeft = true;
                        //左箭头事件
                        if (turnPageListener != null) {
                            turnPageListener.OnLeftDown(today, month, year);
                        }

                    }

                    if (touchX < 7 * mViewWidth / 8 && touchX > 13 * mViewWidth / 16) {
                        clickRight = true;
                        //右箭头事件
                        if (turnPageListener != null) {
                            turnPageListener.OnRightUp(today, month, year);
                        }
                    }
                }

                //以下是对日历的事件处理
                int theX = (int) ((touchX + 0.1 * xInterval) / xInterval);//获取第几列
                int theY = (int) ((touchY + 0.2 * yInterval) / yInterval);//获取第几行

                if (theY < 2) {
                    theY = 2;
                }
                //得到是哪一天
                int num = (theY - 2) * 7 + theX - weekOfFirstDay;
                int day;
                if (num < 0 || num > allDays.length - 1) {
                    num = -2;
                    day = 0;
                } else {
                    day = allDays[num];
                }
                float x = theX * xInterval + mNormalTextSize / 2 -  
                                               mNumPaint.measureText("" + day);
                float y = theY * yInterval + yInterval / 2;

                //判断是否点击在每个数字为中心的圆内
                boolean isclick = isClick(x, y, num, touchX, touchY);


                //有三种状态 初始状态(00),第一次点击(10),第二次点击(11)
                if (!firstClick) {
                    firstClick = true;
                } else if (!secondClick) {
                    secondClick = true;
                } else {
                    firstClick = false;
                    secondClick = false;
                    firstCheckDay = -2;
                    secondCheckDay = -2;
                }

                //处理点击在月份天数外所引起的数值问题
                if (isclick && num != -2 && firstClick && !secondClick) {
                    firstCheckDay = allDays[num];
                }
                if (firstClick && firstCheckDay == -2) {
                    firstClick = false;
                }
                if (isclick && num != -2 && secondClick) {
                    if (allDays[num] < firstCheckDay) {
                        firstCheckDay = allDays[num];
                        secondClick = false;
                    } else {
                        secondCheckDay = allDays[num];
                    }
                }
                if (secondClick && secondCheckDay == -2) {
                    secondClick = false;
                }
                //


                //调用接口
                if (firstClick && !secondClick) {
                    if (chooseListener != null) {
                        chooseListener.onSingleChoose(firstCheckDay);
                    }
                } else if (firstClick && secondClick) {
                    int numO = secondCheckDay - firstCheckDay + 1;
                    int[] days = new int[numO];
                    int tday = firstCheckDay;
                    for (int j = 0; j < numO; j++) {
                        days[j] = tday++;
                    }
                    if (chooseListener != null) {
                        chooseListener.onDoubleChoose(days);
                    }
                }

                break;

            case MotionEvent.ACTION_UP:

                //左箭头事件
                if (clickLeft) {
                    if (turnPageListener != null) {
                        turnPageListener.OnLeftUp(today, month, year);
                    }
                    clickLeft = !clickLeft;
                    preMonth();
                }

                //右箭头事件
                if (clickRight) {
                    if (turnPageListener != null) {
                        turnPageListener.OnRightUp(today, month, year);
                    }
                    clickRight = !clickRight;
                    nextMonth();
                }
                break;
        }

        invalidate();

        return true;
    }

待完善的地方

  • 日期的多选还没做到跨月
  • 没有做动画

源码地址,欢迎大家提出改善意见


发现在对日期的绘制位置的计算出了偏差,待下次更新!

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

推荐阅读更多精彩内容