android 一個簡單的自定義日歷控件,讓你掌控時間

前言:
這段時間好久沒更新,最近對自定義View感興趣,先是根據(jù)網(wǎng)上的一些例子仿做了一個仿微信通訊錄的組合控件,就是那種帶字母索引ListView,可惜不知什么原因,用android studio導(dǎo)出的arr包卻老是報(bào)錯,待我繼續(xù)研究。
后來便搞了這個日歷控件,一是對自定義的view感興趣,二來后來的項(xiàng)目可能需要用到類似的控件,雖說網(wǎng)上也有類似的現(xiàn)成的控件下載,但是覺得自己動手又何嘗不是一次聯(lián)系的機(jī)會。


先上圖

normal
日期單選
日期多選

由于不會上傳視頻,只能截圖啦


自定義View的過程也不重復(fù)太多,畢竟網(wǎng)上這么多教程了
就總結(jié)一下流程吧

  1. 新建一個類繼承于View或者View的子類
  2. 實(shí)現(xiàn)三個構(gòu)造方法
  3. 可以在value目錄下新建attrs.xml文件,再其中聲明<declare-styleable>以及內(nèi)部的<attr>子標(biāo)簽來定義xml屬性。
  4. 實(shí)現(xiàn)onMeasure()方法以及最重要的onDraw()方法
  5. 因?yàn)槭亲远x的日歷控件,所以我也重寫了dispatchTouchEvent()方法來解決響應(yīng)事件。

思路:

  • 要繪制出一個月的日歷,需要下列幾個參數(shù)
  • 這個月的天數(shù)
  • 這個月第一天是星期幾
  • 今天是幾號
手畫的,見諒

貼上最重要的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 = "";
                }

                //單個數(shù)字的偏移量
                if (theday < 10 && theday > 0) {
                    offset = mNormalTextSize / 4;
                }


                //計(jì)算數(shù)字的位置
                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);
                }

                //如果數(shù)字是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;

                //判斷是否點(diǎn)擊在每個數(shù)字為中心的圓內(nèi)
                boolean isclick = isClick(x, y, num, touchX, touchY);


                //有三種狀態(tài) 初始狀態(tài)(00),第一次點(diǎn)擊(10),第二次點(diǎn)擊(11)
                if (!firstClick) {
                    firstClick = true;
                } else if (!secondClick) {
                    secondClick = true;
                } else {
                    firstClick = false;
                    secondClick = false;
                    firstCheckDay = -2;
                    secondCheckDay = -2;
                }

                //處理點(diǎn)擊在月份天數(shù)外所引起的數(shù)值問題
                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;
                }
                //


                //調(diào)用接口
                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;
    }

待完善的地方

  • 日期的多選還沒做到跨月
  • 沒有做動畫

源碼地址,歡迎大家提出改善意見


發(fā)現(xiàn)在對日期的繪制位置的計(jì)算出了偏差,待下次更新!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內(nèi)容