Android自定义控件之日历控件

 

分类：

Android自定义控件系列（7）

版权声明：转载注明出处，谢谢合作。 http://blog.csdn.net/Mr_dsw/article/details/48755993

 

目录(?)[+]

 

Android自定义控件之日历控件

三月份学习android，至今也有半年有余，中间也做过两个项目，但是依然感觉自己做的应用不是很有新意，比不上应用市场上那些应用如此绚丽。所以自己仍需继续努力。学习至今，仍感觉自定义控件是一块硬骨头，还没修炼到身后的内功，下面就切入正题，以一次项目的需求，来实现一个自定义的日历控件。效果图先来一发。

我们分析下效果图，然后确定我们的需求。
（1）、绘制星期的自定义View，用于标识日期的礼拜。
（2）、绘制日期的自定义View。
（3）、绘制事务圆圈，从效果图中我们以红圈标识今日有事务。
（4）、绘制选中日期的颜色。
（5）、对选中日期进行点击事件的处理。

通过对效果图的分析，得出了我们的需求，我们在仔细分析效果图，发现里面就是绘制文字和绘制线条，所以我们只要回Canvas的这两个功能即可，主要的难点是如何将这些日期进行位置的安排，接下来我们就来逐个分析如何实现一个自定义View。

实现Week的自定义View

效果图

分析下效果图，我们需要绘制上下两条线、然后绘制描述文字（日、一、二、三、四、五、六）。下面就讲解下我们的实现。先看着部分的源码，然后在分开讲解。

public class WeekDayView extends View {
        //上横线颜色
        private int mTopLineColor = Color.parseColor("#CCE4F2");
        //下横线颜色
        private int mBottomLineColor = Color.parseColor("#CCE4F2");
        //周一到周五的颜色
        private int mWeedayColor = Color.parseColor("#1FC2F3");
        //周六、周日的颜色
        private int mWeekendColor = Color.parseColor("#fa4451");
        //线的宽度
        private int mStrokeWidth = 4;
        private int mWeekSize = 14;
        private Paint paint;
        private DisplayMetrics mDisplayMetrics;
        private String[] weekString = new String[]{"日","一","二","三","四","五","六"};
        public WeekDayView(Context context, AttributeSet attrs) {
            super(context, attrs);
            mDisplayMetrics = getResources().getDisplayMetrics();
            paint = new Paint();
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            int widthSize = MeasureSpec.getSize(widthMeasureSpec);
            int widthMode = MeasureSpec.getMode(widthMeasureSpec);

            int heightSize = MeasureSpec.getSize(heightMeasureSpec);
            int heightMode = MeasureSpec.getMode(heightMeasureSpec);

            if(heightMode == MeasureSpec.AT_MOST){
                heightSize = mDisplayMetrics.densityDpi * 30;
            }
            if(widthMode == MeasureSpec.AT_MOST){
                widthSize = mDisplayMetrics.densityDpi * 300;
            }
            setMeasuredDimension(widthSize, heightSize);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            int width = getWidth();
            int height = getHeight();
            //进行画上下线
            paint.setStyle(Style.STROKE);
            paint.setColor(mTopLineColor);
            paint.setStrokeWidth(mStrokeWidth);
            canvas.drawLine(0, 0, width, 0, paint);

            //画下横线
            paint.setColor(mBottomLineColor);
            canvas.drawLine(0, height, width, height, paint);
            paint.setStyle(Style.FILL);
            paint.setTextSize(mWeekSize * mDisplayMetrics.scaledDensity);
            int columnWidth = width / 7;
            for(int i=0;i < weekString.length;i++){
                String text = weekString[i];
                int fontWidth = (int) paint.measureText(text);
                int startX = columnWidth * i + (columnWidth - fontWidth)/2;
                int startY = (int) (height/2 - (paint.ascent() + paint.descent())/2);
                if(text.indexOf("日") > -1|| text.indexOf("六") > -1){
                    paint.setColor(mWeekendColor);
                }else{
                    paint.setColor(mWeedayColor);
                }
                canvas.drawText(text, startX, startY, paint);
            }
        }

        /**
         * 设置顶线的颜色
         * @param mTopLineColor
         */
        public void setmTopLineColor(int mTopLineColor) {
            this.mTopLineColor = mTopLineColor;
        }

        /**
         * 设置底线的颜色
         * @param mBottomLineColor
         */
        public void setmBottomLineColor(int mBottomLineColor) {
            this.mBottomLineColor = mBottomLineColor;
        }

        /**
         * 设置周一-五的颜色
         * @return
         */
        public void setmWeedayColor(int mWeedayColor) {
            this.mWeedayColor = mWeedayColor;
        }

        /**
         * 设置周六、周日的颜色
         * @param mWeekendColor
         */
        public void setmWeekendColor(int mWeekendColor) {
            this.mWeekendColor = mWeekendColor;
        }

        /**
         * 设置边线的宽度
         * @param mStrokeWidth
         */
        public void setmStrokeWidth(int mStrokeWidth) {
            this.mStrokeWidth = mStrokeWidth;
        }


        /**
         * 设置字体的大小
         * @param mWeekSize
         */
        public void setmWeekSize(int mWeekSize) {
            this.mWeekSize = mWeekSize;
        }


        /**
         * 设置星期的形式
         * @param weekString
         * 默认值  "日","一","二","三","四","五","六"
         */
        public void setWeekString(String[] weekString) {
            this.weekString = weekString;
        }
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127

（1）、首先我们定义了我们需要的成员变量，比如上下线条的颜色、宽度、字体的大小、周期的表现形式。这些都是为了灵活定制而需要的。方便使用。
（2）、现在来看看onMeasure方法，我们知道在自定义view中，我们遇到wrap_content属性，这是view的大小可能就不是我们想要的了，所以我们在onMeasure方法中，指定此条件下的大小，即默认大小为300*30。
（3）、onDraw方法，我们在onDraw方法中进行我们需要内容的绘制。我们使用drawLine方法，进行上下横线的绘制，然后int columnWidth = width / 7;计算每列的宽度，为什么计算宽度呢？因为我们要将”日”,”一”,”二”,”三”,”四”,”五”,”六”这七个字放在对应格子的居中位置。通过drawText方法进行绘制文字，我们需要指定绘制文字的起始位置，为了达到居中的位置，我们需要进行计算。

int startX = columnWidth * i + (columnWidth - fontWidth)/2;
int startY = (int) (height/2 - (paint.ascent() + paint.descent())/2);

• 1
• 2

此处不是很了解的，可以参照下爱哥的文章。后面就是一些设置属性，没什么讲头。

至此很简单的实现了我们的week的自定义view。下面我们来分析下日期的实现。

实现日期Date的自定义View

类似WeekView的实现，我们在DateView中的难点也是如何放置这些日期date。先上源码，然后我们在具体分析：

public class MonthDateView extends View {
        private static final int NUM_COLUMNS = 7;
        private static final int NUM_ROWS = 6;
        private Paint mPaint;
        private int mDayColor = Color.parseColor("#000000");
        private int mSelectDayColor = Color.parseColor("#ffffff");
        private int mSelectBGColor = Color.parseColor("#1FC2F3");
        private int mCurrentColor = Color.parseColor("#ff0000");
        private int mCurrYear,mCurrMonth,mCurrDay;
        private int mSelYear,mSelMonth,mSelDay;
        private int mColumnSize,mRowSize;
        private DisplayMetrics mDisplayMetrics;
        private int mDaySize = 18;
        private TextView tv_date,tv_week;
        private int weekRow;
        private int [][] daysString;
        private int mCircleRadius = 6;
        private DateClick dateClick;
        private int mCircleColor = Color.parseColor("#ff0000");
        private List<Integer> daysHasThingList;
        public MonthDateView(Context context, AttributeSet attrs) {
            super(context, attrs);
            mDisplayMetrics = getResources().getDisplayMetrics();
            Calendar calendar = Calendar.getInstance();
            mPaint = new Paint();
            mCurrYear = calendar.get(Calendar.YEAR);
            mCurrMonth = calendar.get(Calendar.MONTH);
            mCurrDay = calendar.get(Calendar.DATE);
            setSelectYearMonth(mCurrYear,mCurrMonth,mCurrDay);
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            int widthSize = MeasureSpec.getSize(widthMeasureSpec);
            int widthMode = MeasureSpec.getMode(widthMeasureSpec);

            int heightSize = MeasureSpec.getSize(heightMeasureSpec);
            int heightMode = MeasureSpec.getMode(heightMeasureSpec);

            if(heightMode == MeasureSpec.AT_MOST){
                heightSize = mDisplayMetrics.densityDpi * 200;
            }
            if(widthMode == MeasureSpec.AT_MOST){
                widthSize = mDisplayMetrics.densityDpi * 300;
            }
            setMeasuredDimension(widthSize, heightSize);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            initSize();
            daysString = new int[6][7];
            mPaint.setTextSize(mDaySize*mDisplayMetrics.scaledDensity);
            String dayString;
            int mMonthDays = DateUtils.getMonthDays(mSelYear, mSelMonth);
            int weekNumber = DateUtils.getFirstDayWeek(mSelYear, mSelMonth);
            Log.d("DateView", "DateView:" + mSelMonth+"月1号周" + weekNumber);
            for(int day = 0;day < mMonthDays;day++){
                dayString = (day + 1) + "";
                int column = (day+weekNumber - 1) % 7;
                int row = (day+weekNumber - 1) / 7;
                daysString[row][column]=day + 1;
                int startX = (int) (mColumnSize * column + (mColumnSize - mPaint.measureText(dayString))/2);
                int startY = (int) (mRowSize * row + mRowSize/2 - (mPaint.ascent() + mPaint.descent())/2);
                if(dayString.equals(mSelDay+"")){
                    //绘制背景色矩形
                    int startRecX = mColumnSize * column;
                    int startRecY = mRowSize * row;
                    int endRecX = startRecX + mColumnSize;
                    int endRecY = startRecY + mRowSize;
                    mPaint.setColor(mSelectBGColor);
                    canvas.drawRect(startRecX, startRecY, endRecX, endRecY, mPaint);
                    //记录第几行，即第几周
                    weekRow = row + 1;
                }
                //绘制事务圆形标志
                drawCircle(row,column,day + 1,canvas);
                if(dayString.equals(mSelDay+"")){
                    mPaint.setColor(mSelectDayColor);
                }else if(dayString.equals(mCurrDay+"") && mCurrDay != mSelDay && mCurrMonth == mSelMonth){
                    //正常月，选中其他日期，则今日为红色
                    mPaint.setColor(mCurrentColor);
                }else{
                    mPaint.setColor(mDayColor);
                }
                canvas.drawText(dayString, startX, startY, mPaint);
                if(tv_date != null){
                    tv_date.setText(mSelYear + "年" + (mSelMonth + 1) + "月");
                }

                if(tv_week != null){
                    tv_week.setText("第" + weekRow  +"周");
                }
            }
        }

        private void drawCircle(int row,int column,int day,Canvas canvas){
            if(daysHasThingList != null && daysHasThingList.size() >0){
                if(!daysHasThingList.contains(day))return;
                mPaint.setColor(mCircleColor);
                float circleX = (float) (mColumnSize * column + mColumnSize*0.8);
                float circley = (float) (mRowSize * row + mRowSize*0.2);
                canvas.drawCircle(circleX, circley, mCircleRadius, mPaint);
            }
        }
        @Override
        public boolean performClick() {
            return super.performClick();
        }

        private int downX = 0,downY = 0;
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            int eventCode=  event.getAction();
            switch(eventCode){
            case MotionEvent.ACTION_DOWN:
                downX = (int) event.getX();
                downY = (int) event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                int upX = (int) event.getX();
                int upY = (int) event.getY();
                if(Math.abs(upX-downX) < 10 && Math.abs(upY - downY) < 10){//点击事件
                    performClick();
                    doClickAction((upX + downX)/2,(upY + downY)/2);
                }
                break;
            }
            return true;
        }

        /**
         * 初始化列宽行高
         */
        private void initSize(){
            mColumnSize = getWidth() / NUM_COLUMNS;
            mRowSize = getHeight() / NUM_ROWS;
        }

        /**
         * 设置年月
         * @param year
         * @param month
         */
        private void setSelectYearMonth(int year,int month,int day){
            mSelYear = year;
            mSelMonth = month;
            mSelDay = day;
        }
        /**
         * 执行点击事件
         * @param x
         * @param y
         */
        private void doClickAction(int x,int y){
            int row = y / mRowSize;
            int column = x / mColumnSize;
            setSelectYearMonth(mSelYear,mSelMonth,daysString[row][column]);
            invalidate();
            //执行activity发送过来的点击处理事件
            if(dateClick != null){
                dateClick.onClickOnDate();
            }
        }

        /**
         * 左点击，日历向后翻页
         */
        public void onLeftClick(){
            int year = mSelYear;
            int month = mSelMonth;
            int day = mSelDay;
            if(month == 0){//若果是1月份，则变成12月份
                year = mSelYear-1;
                month = 11;
            }else if(DateUtils.getMonthDays(year, month) == day){
                //如果当前日期为该月最后一点，当向前推的时候，就需要改变选中的日期
                month = month-1;
                day = DateUtils.getMonthDays(year, month);
            }else{
                month = month-1;
            }
            setSelectYearMonth(year,month,day);
            invalidate();
        }

        /**
         * 右点击，日历向前翻页
         */
        public void onRightClick(){
            int year = mSelYear;
            int month = mSelMonth;
            int day = mSelDay;
            if(month == 11){//若果是12月份，则变成1月份
                year = mSelYear+1;
                month = 0;
            }else if(DateUtils.getMonthDays(year, month) == day){