android组合控件的焦点,撸一个简单的TV版焦点控制的日历控件

我会带着你远行 2022-10-06 00:47 198阅读 0赞

1、效果

最近需求要一个遥控控制的日历控件，找了半天没找到轮子，就自己撸一个，先看效果图：

![a8bbd9e9f836][]

效果图.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使得整体偏左，这点可以开下开发者模式显示布局边界试下；

垂直方向：

一个起步+一个水平间距+两个文字大小

这样子，画背景图就猫画虎了，都是计算的东西，就不详细讲，自己体会下

![a8bbd9e9f836][]

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/

[a8bbd9e9f836]: /images/20221005/0360006f39c543f0be023c1f010deae9.png

android组合控件的焦点,撸一个简单的TV版焦点控制的日历控件

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Android 控件点击，可见，焦点属性

相关 android 布局获取焦点,子父控件获取焦点问题：android:descendantFocusability用法简析...

相关 android组合控件的焦点,撸一个简单的TV版焦点控制的日历控件

相关 VB中Text控件获得焦点的同时全选

相关 web页面控件之日历控件

相关日历控件

相关 js实现的日历控件

相关 Android关于ListView中item与控件抢夺焦点的那些事

相关解决Item控件抢占焦点

相关 js日历控件