Android自定义控件之日历控件-优快云博客

本文详细介绍了一款自定义的日历控件实现过程，包括绘制星期、日期、事务标记等功能，通过WeekDayView和MonthDateView两个自定义View类完成布局绘制及交互处理。

标签： android 控件日历应用需求

2015年09月26日 22:21:54 25062人阅读评论(109) 收藏举报

分类：

Android自定义控件系列 （7）

目录(?)[+]

Android自定义控件之日历控件

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

效果图

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

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

实现Week的自定义View

效果图

WeekView

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

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）、现在来看看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);

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

至此很简单的实现了我们的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+

转载于:https://www.cnblogs.com/totoo/p/calender.html