撸一个简单的TV版焦点控制的日历控件

2019-03-20 本文已影响0人 Dane_404

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/

撸一个简单的TV版焦点控制的日历控件

1、效果

2、XML属性，所有属性默认为效果图

3、抱着学习心态撸这个控件，写这篇的目的是记录分享下这个TvCalenderView

最后

猜你喜欢

热点阅读