1、效果
最近需求要一个遥控控制的日历控件，找了半天没找到轮子，就自己撸一个，先看效果图：
效果图.gif
2、XML属性，所有属性默认为效果图
- calender_textSize：星期和日期的字体大小；
- calender_textColor：日期的字体颜色；
- calender_currentDayColor：当天日期的颜色；
- calender_focusDrawable：有焦点的日期的背景图，即日期遥控选中效果；
- calender_startAndEndPadding：左右的起步距离；
- calender_horizontalInterval：水平间距的大小；
- calender_verticalInterval：垂直间距的大小；
- calender_weekTextColor： 星期的字体颜色；
- calender_headBg：头部的背景图（选择器有焦点和无焦点效果）；
- calender_headTextSize：头部日期字体大小；
- calender_headTextColor：头部日期字体颜色；
- calender_focusTextColor：有焦点的日期的字体颜色，即日期遥控选中效果；
3、抱着学习心态撸这个控件，写这篇的目的是记录分享下这个TvCalenderView
先讲个大概，TvCalenderView继承LinearLayout垂直排序，三个子View，先后为HeadView，WeekView，MonthView，就贴一些关键点。
-
MonthView：
先看下onDraw，关键地方写了注释：@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mTempDay = mDay; //临时变量记录当前的焦点日期 for (int day = 0; day < mDaysCountOfMonth; day++) { /** * mFirstDayOfWeek 这月第一天是星期几，比如，效果图第一天是周二，mFirstDayOfWeek为3， * 因为是从1开始，周二就是3，那么,按照下面的公式，算错来的row为0，column为2，两者都是 * 重0开始，1号的位置就是（0,2） */ int row = (day + mFirstDayOfWeek - 1)/7; int column = (day+mFirstDayOfWeek - 1) % 7; mDayStr[row][column] = day+1; //记录每个月日期的行列位置 String dayStr = String.valueOf(day+1); if (day == 0 && isChangeMonth){ //初始化焦点位置用，默认切换月份1号有焦点 isChangeMonth = false; mCurRow = row; //一开始在0行 mCurColumn = column; //一开始在0列 } if (day+1 == mDay){ if (mHasFocus){ //是选中日期，且有焦点 mTextPaint.setColor(mTextColor); Rect rect = new Rect(); mTextPaint.getTextBounds(dayStr, 0, dayStr.length(), rect); int height = rect.height();//文字高 //水平位置：起步+列数*列间距+文字大小*列间距+文字的一半-图片的一半 //垂直位置：起步+行数*水平间距+文字大小*（行数+1）- 文字高度/2 - 图片的一半 //说明一下，垂直位置，文字大小*（行数+1），+1是因为drawText传入的位置是左下角 //drawBitmap传入的位置的图片中心，所以要-文字高度/2 canvas.drawBitmap(mBitmap,padding+column*verticalInterval+textSize*column+ mTextPaint.measureText("10") / 2-mBitmap.getWidth()/2, startTop+row * horizontalInterval + textSize * (row + 1) - height / 2-mBitmap.getHeight()/2,mFocusBgPaint); canvas.drawText(dayStr, padding + mTextPaint.measureText("10")/2+column * verticalInterval +textSize*column - mTextPaint.measureText(dayStr) / 2, startTop+ row * horizontalInterval + textSize * (row + 1), mFocusTextPaint); }else { drawDay(canvas, day, row, column, dayStr); } }else { drawDay(canvas, day, row, column, dayStr); } } } private void drawDay(Canvas canvas, int day, int row, int column, String dayStr) { mTextPaint.setColor(day+1 == mCurrDay && mYear == mCurrYear && mMonth == mCurrMonth ? mCurrentDayColor : mTextColor); canvas.drawText(dayStr, padding + mTextPaint.measureText("10")/2+column * verticalInterval +textSize*column - mTextPaint.measureText(dayStr) / 2, startTop+row * horizontalInterval + textSize * (row + 1), mTextPaint); }图片讲解一波：
例如日期8：
8的位置的第1行，第2列（都是0开始），那么画8这个字：
水平方向：
一个起步+两个垂直距离+两个文字大小，为什么是两个不是三个，因为drawText左下角开始画，再-mTextPaint.measureText(dayStr) / 2，举个例子，1和10，两个默认画出来是左对齐的，这就不美观了，要居中对齐，所以就大家都减去文字宽度的一半，这样就居中对齐了，最后再加 mTextPaint.measureText("10")/2，这一步主要是要整体居中，因为前面--mTextPaint.measureText(dayStr) / 2使得整体偏左，这点可以开下开发者模式显示布局边界试下；
垂直方向：
一个起步+一个水平间距+两个文字大小
这样子，画背景图就猫画虎了，都是计算的东西，就不详细讲，自己体会下
8.png
接下来看onkeyDown：
处理遥控器的事件：
mCurRow和mCurColumn在onDraw拿到1号的位置，然后根据遥控事件拿到对应的日期，再invalidate重新绘制：
//遥控事件
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
switch (keyCode) {
case KeyEvent.KEYCODE_DPAD_UP:
if (mCurRow <= 0) { //如果是在第0行，再按上键的话，这时MonthView会失去焦点
return super.onKeyDown(keyCode, event);
}
mCurRow--;
mDay = mDayStr[mCurRow][mCurColumn]; //拿出存的day，后面调用invalidate重新绘制
break;
case KeyEvent.KEYCODE_DPAD_DOWN:
if (mCurRow >= mDayStr.length - 1) { //下限
return super.onKeyDown(keyCode, event);
}
mCurRow++;
mDay = mDayStr[mCurRow][mCurColumn];
if (mDay == 0) { //拿不到的情况，比如效果图25号下面没有日期
mDay = mTempDay; //mTempDay记录了上一次的日期
mCurRow--; //上面加了拿不到，减回去
}
break;
case KeyEvent.KEYCODE_DPAD_LEFT:
if (mCurColumn <= 0) {
preMonth(); //往左到界限，跳到上一个月
return super.onKeyDown(keyCode, event);
}
mCurColumn--;
mDay = mDayStr[mCurRow][mCurColumn];
if (mDay == 0) { //拿不到的情况，比如效果图1号左边没有日期
preMonth();
return super.onKeyDown(keyCode, event);
}
break;
case KeyEvent.KEYCODE_DPAD_RIGHT:
if (mCurColumn >= mDayStr[0].length - 1) {
nextMonth(); //往右到界限，跳到下一个月
return super.onKeyDown(keyCode, event);
}
mCurColumn++;
mDay = mDayStr[mCurRow][mCurColumn];
if (mDay == 0) { //拿不到的情况，比如效果图31号右边没有日期
nextMonth();
return super.onKeyDown(keyCode, event);
}
break;
case KeyEvent.KEYCODE_ENTER: //确认按钮
if (mOnDateSeletedListener != null) {
mOnDateSeletedListener.onDateSelected(mYear, mMonth, mDay);
}
return super.onKeyDown(keyCode, event);
default:
return super.onKeyDown(keyCode, event);
}
invalidate();
return true;
}
public void nextMonth() {
if (mMonth >= 11) {
mMonth = 0;
mYear++;
setYearAndMonth(mYear, mMonth); //换月份
((TvCalenderView) getParent()).changeHeadData(mMonth, mYear); //调用改变头部的日期
return;
}
mMonth++;
setYearAndMonth(mYear, mMonth);
((TvCalenderView) getParent()).changeHeadData(mMonth, mYear);
}
-
WeekView不讲了，HeadView就是组合控件，主要帖下遥控事件：
@Override public boolean onKeyDown(int keyCode, KeyEvent event) { switch (keyCode){ case KeyEvent.KEYCODE_DPAD_LEFT: mIvPre.setImageResource(R.drawable.date_last_focused); ((TvCalenderView) getParent()).preMonth(); //按左刷新Month mHandler.postDelayed(new Runnable() { @Override public void run() { mIvPre.setImageResource(R.drawable.date_last_normal); //伪装点击效果 } },100); break; case KeyEvent.KEYCODE_DPAD_RIGHT: mIvNext.setImageResource(R.drawable.date_next_focused); ((TvCalenderView) getParent()).nextMonth(); mHandler.postDelayed(new Runnable() { @Override public void run() { mIvNext.setImageResource(R.drawable.date_next_normal); } },100); break; } return super.onKeyDown(keyCode, event); }
最后
贴上Demo地址：
https://github.com/CzdCoder/TvCalenderView
分享下自定义View学习系列：
Android 开发进阶: 自定义 View 1-1 绘制基础：http://hencoder.com/ui-1-1/
Android 开发进阶: 自定义 View 1-2 Paint 详解：http://hencoder.com/ui-1-2/
Android 开发进阶：自定义 View 1-3 文字的绘制：http://hencoder.com/ui-1-3/
Android 开发进阶：自定义 View 1-4 Canvas 对绘制的辅助：http://hencoder.com/ui-1-4/
Android 开发进阶：自定义 View 1-5 绘制顺序：http://hencoder.com/ui-1-5/
网友评论