【Android】自定义View -- 钟表

【问题】

• 通过自定义 View 来实现一个钟表；

【效果图】

【代码分析】

1. 重写 onDraw

   • 画外圆

     /**

     * 画外圆和中心实心圆

     * @param canvas

     */

     private void drawCircle(Canvas canvas) {

     Paint paint = new Paint();

     paint.setColor(mRingColor);

     paint.setStyle(Paint.Style.STROKE);

     paint.setAntiAlias(true);

     paint.setDither(true);

     paint.setStrokeWidth(getDigit(2));

     canvas.drawCircle(mWidth/2, mHeight/2, mDiameter/2, paint);

      

     // 画中心的实心圆

     paint.setStyle(Paint.Style.FILL);

     paint.setColor(mCenterPointColor);

     canvas.drawCircle(mWidth/2, mHeight/2, getDigit(4), paint);

     }

   • 画刻度

     /**

     * 画刻度

     * @param canvas

     */

     private void drawScale(Canvas canvas) {

     Paint paint = new Paint();

     paint.setStrokeWidth(getDigit(1));

     paint.setTextSize(getDigit(10));

     paint.setAntiAlias(true);

     for(int i=0; i<60; i++){

      

     if(i%5 == 0){

     paint.setStrokeWidth(getDigit(2));

     paint.setColor(mLongScaleColor);

     paint.setTextSize(getDigit(15));

     String timeText = "" + i/5;

     if(i==0){

     timeText = "12";

     }

     canvas.drawLine(mWidth/2, mHeight/2 - mDiameter/2, mWidth/2, mHeight/2 - mDiameter/2 + 40, paint);

     paint.setColor(mTextColor);

     canvas.drawText(timeText, mWidth/2-paint.measureText(timeText)/2, mHeight/2-mDiameter/2+80, paint);

     } else {

     paint.setStrokeWidth(getDigit(1));

     paint.setTextSize(getDigit(15));

     paint.setColor(mShortScaleColor);

     canvas.drawLine(mWidth/2, mHeight/2 - mDiameter/2, mWidth/2, mHeight/2 - mDiameter/2 + 20, paint);

     }

     // 旋转画布，每次旋转6度

     canvas.rotate(6,mWidth/2, mHeight/2);

     }

     }

   • 画指针

     /**

     * 画指针：时针，分针，秒针

     * @param canvas

     */

     private void drawIndicator(Canvas canvas) {

     // 保存图层

     canvas.save();

     canvas.translate(mWidth/2f, mHeight/2f);

      

     Paint paint = new Paint();

     paint.setAntiAlias(true);

     paint.setDither(true);

     paint.setStrokeWidth(getDigit(3));

     paint.setColor(mHourColor);

     canvas.drawLine(0, 0, getLeftBy(H), getTopBy(H), paint);

      

     paint.setStrokeWidth(getDigit(2));

     paint.setColor(mMinuteColor);

     canvas.drawLine(0, 0, getLeftBy(M), getTopBy(M), paint);

      

     paint.setStrokeWidth(getDigit(1));

     paint.setColor(mSecondColor);

     canvas.drawLine(0, 0, getLeftBy(S), getTopBy(S), paint);

      

     // 合并图层

     canvas.restore();

     }

     private float getLeftBy(int indicator){

     float r=0f;

     float digit = 0;

      

     switch(indicator){

     case H:

     r = mHourR;

     // 根据分钟进行补充,每5分钟进一小格

     digit = ((mHour%12/12f*60 + mMinute/60f*5)) % 60;

     break;

     case M:

     r = mMinuteR;

     digit = mMinute;

     break;

     case S:

     r = mSecondR;

     digit = mSecond+1;

     break;

     }

      

     float left = (float) Math.sin(digit/60f * Math.PI*2) * r;

     if(digit<=30){

     return Math.abs(left);

     } else {

     return -Math.abs(left);

     }

     }

      

     private float getTopBy(int indicator){

     float r=0f;

     float digit = 0;

      

     switch(indicator){

     case H:

     r = mHourR;

     // 根据分钟进行补充,每5分钟进一小格

     digit = ((mHour%12/12f*60 + mMinute/60f*5)) % 60;

     break;

     case M:

     r = mMinuteR;

     digit = mMinute;

     break;

     case S:

     r = mSecondR;

     digit = mSecond+1;

     break;

     }

      

     float left = (float) Math.cos(digit/60f * Math.PI*2) * r;

     if(15<=digit && digit<=45){

     return Math.abs(left);

     } else {

     return -Math.abs(left);

     }

     }

2. 重写 onMesure

   @Override

   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

   mWidth = measuredWidth(widthMeasureSpec);

   mHeight = measuredHeight(heightMeasureSpec);

   setMeasuredDimension(mWidth, mHeight);

    

   // 钟表的外圆直径（除去 padding ）

   mDiameter = Math.min(mWidth - getPaddingLeft() - getPaddingRight(), mHeight - getPaddingTop() - getPaddingBottom());

   // 时针半径外环半径的1/3

   mHourR = mDiameter/2f/3;

   // 分针半径为外环半径的1/2

   mMinuteR = mDiameter/2f/2;

   // 秒针半径为外环半径的1/1.5

   mSecondR = mDiameter/2f/1.5f;

   }

   private int measuredWidth(int widthMeasureSpec) {

   int result = 0;

   int specMode = MeasureSpec.getMode(widthMeasureSpec);

   int specSize = MeasureSpec.getSize(widthMeasureSpec);

   if(specMode == MeasureSpec.EXACTLY){

   result = specSize;

   } else {

   result = 500;

   if(specMode == MeasureSpec.AT_MOST){

   result = Math.min(result, specSize);

   }

   }

   return result;

   }

    

   private int measuredHeight(int heightMeasureSpec) {

   int result = 0;

   int specMode = MeasureSpec.getMode(heightMeasureSpec);

   int specSize = MeasureSpec.getSize(heightMeasureSpec);

   if(specMode == MeasureSpec.EXACTLY){

   result = specSize;

   } else {

   result = 500;

   if(specMode == MeasureSpec.AT_MOST){

   result = Math.min(result, specSize);

   }

   }

   return result;

   }

3. 用新线程启动钟表

   /**

   * 启动钟表

   */

   private void startClock(){

   new Thread(new Runnable() {

    

   @Override

   public void run() {

   while (true) {

   Calendar calendar = Calendar.getInstance();

   calendar.setTime(new Date());

   int hour = calendar.get(Calendar.HOUR)+1;

   int minute = calendar.get(Calendar.MINUTE);

   int second = calendar.get(Calendar.SECOND);

   setHour(hour);

   setMinute(minute);

   setSecond(second);

   try {

   Thread.sleep(1000);

   } catch (InterruptedException e) {

   e.printStackTrace();

   }

   }

   }

   }).start();

   }

【源码下载】