Android打造屬於自己的時間鐘錶_Android

1、概述

本文主要講解的是如何自訂一個時間鐘錶，通過簡單的練習可以簡單學習Android當中自訂view的一些常用繪圖技巧，最佳化android繪圖操作。言歸正傳，首先看下我們需要實現的效果：

當我們看到這個效果的時候腦子裡應該有一定的思路了，我們應該把它分解成以下幾個步驟：
1、儀錶盤（圓）
2、刻度標記（長 中 短）
3、刻度值（1-12）
4、指標（時  分  秒）
5、移動指標，計算指標位置
現在我們已經很清楚自己的思路了，那麼我們一個一個來。

第一步：1、自訂View的屬性，首先在res/values/  下建立一個attrs.xml ， 在裡面定義我們的屬性和聲明我們的整個樣式。

<span style="font-size:14px;"> <declare-styleable name="ClockView">    <attr name="mRadius" format="dimension"/>   <attr name="mCircleColor" format="color"/>   <attr name="mCircleWidth" format="dimension"/>   <attr name="mTextSize" format="dimension"/>   <attr name="mTextColor" format="color"/>   <attr name="mBigScaleColor" format="color"/>   <attr name="mMiddlecaleColor" format="color"/>   <attr name="mSmallScaleColor" format="color"/>   <attr name="mHourHandColor" format="color"/>   <attr name="mMinuteHandColor" format="color"/>   <attr name="mSecondHandColor" format="color"/>   <attr name="mHourHandWidth" format="dimension"/>   <attr name="mMinuteHandWidth" format="dimension"/>   <attr name="mSecondHandWidth" format="dimension"/>   </declare-styleable></span> 

我們定義了鐘錶的半徑，背景顏色 ，刻度值（大，中，小）的顏色及指標（時分秒）的顏色和寬度。

然後自訂一個class類 為ClockView，在MainActivity的布局中引用：

<span style="font-size:14px;"> <com.dalong.customviewstudy.view.ClockView   app:mSecondHandColor="@color/colorAccent"   app:mCircleColor="@android:color/white"   app:mBigScaleColor="@android:color/black"   app:mMiddlecaleColor="@android:color/black"   app:mSmallScaleColor="@color/colorAccent"   app:mHourHandColor="@android:color/black"   app:mMinuteHandColor="@android:color/black"   app:mTextColor="@android:color/black"   app:mHourHandWidth="13dp"   app:mSecondHandWidth="5dp"   app:mMinuteHandWidth="8dp"   app:mTextSize="16sp"   android:layout_centerInParent="true"   android:layout_width="match_parent"   android:layout_height="match_parent" /></span> 

2、在自訂View的構造方法中，獲得我們的自訂的樣式

<span style="font-size:14px;"> //文字畫筆對象  private Paint mTextPaint;   //圓，指標，刻度畫筆  private Paint mPaint;   //半徑  public float mRadius;   //外圓的顏色  public int mCircleColor;   // 外圓的寬度  public float mCircleWidth;   //文字的大小  public float mTextSize;   //文字的顏色  public int mTextColor;   //大刻度顏色  public int mBigScaleColor;   //中刻度  public int mMiddlecaleColor;   //小刻度顏色  public int mSmallScaleColor;   //時針顏色  public int mHourHandColor;   //分針顏色  public int mMinuteHandColor;   //秒針顏色  public int mSecondHandColor;   //時針寬度  public float mHourHandWidth;   //分針寬度  public float mMinuteHandWidth;   //秒針寬度  public float mSecondHandWidth;   //控制項寬度  public int mWidth;   //控制項高度  public int mHeght;   public ClockView(Context context) {   this(context,null);  }   public ClockView(Context context, AttributeSet attrs) {   this(context, attrs,0);  }   public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {   super(context, attrs, defStyleAttr);    TypedArray typedArray=context.obtainStyledAttributes(attrs, R.styleable.ClockView);   mRadius=typedArray.getDimension(R.styleable.ClockView_mRadius,400);   mCircleColor=typedArray.getColor(R.styleable.ClockView_mCircleColor, Color.WHITE);   mCircleWidth=typedArray.getDimension(R.styleable.ClockView_mCircleWidth,20);   mTextSize=typedArray.getDimension(R.styleable.ClockView_mCircleWidth,40);   mTextColor=typedArray.getColor(R.styleable.ClockView_mTextColor,Color.DKGRAY);   mBigScaleColor=typedArray.getColor(R.styleable.ClockView_mBigScaleColor,Color.BLACK);   mSmallScaleColor=typedArray.getColor(R.styleable.ClockView_mSmallScaleColor,Color.RED);   mMiddlecaleColor=typedArray.getColor(R.styleable.ClockView_mMiddlecaleColor,Color.BLACK);   mHourHandColor=typedArray.getColor(R.styleable.ClockView_mHourHandColor,Color.BLACK);   mMinuteHandColor=typedArray.getColor(R.styleable.ClockView_mMinuteHandColor,Color.BLACK);   mSecondHandColor=typedArray.getColor(R.styleable.ClockView_mSecondHandColor,Color.BLACK);   mHourHandWidth=typedArray.getDimension(R.styleable.ClockView_mHourHandWidth,20);   mMinuteHandWidth=typedArray.getDimension(R.styleable.ClockView_mMinuteHandWidth,10);   mSecondHandWidth=typedArray.getDimension(R.styleable.ClockView_mSecondHandWidth,5);    mPaint=new Paint();   mPaint.setAntiAlias(true);   mPaint.setStyle(Paint.Style.STROKE);    mTextPaint=new Paint();   mTextPaint.setAntiAlias(true);   mTextPaint.setStyle(Paint.Style.STROKE);   mTextPaint.setTextSize(mTextSize);   mTextPaint.setColor(mTextColor);   } </span> 

3、我們重寫onDraw，onMesure調用系統提供的：

onMeure方法

<span style="font-size:14px;"> @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {   setMeasuredDimension(measureSize(widthMeasureSpec),measureSize(heightMeasureSpec));  }   private int measureSize(int mMeasureSpec) {   int result;   int mode=MeasureSpec.getMode(mMeasureSpec);   int size=MeasureSpec.getSize(mMeasureSpec);   if(mode==MeasureSpec.EXACTLY){    result=size;   }else{    result=400;    if(mode==MeasureSpec.AT_MOST){     result=Math.min(result,size);    }   }   return result;  }</span> 

onDraw方法

<span style="font-size:14px;"> @Override  protected void onDraw(Canvas canvas) {   super.onDraw(canvas);   //設定寬高、半徑   mWidth=getMeasuredWidth()-getPaddingLeft()-getPaddingRight();   mHeght=getMeasuredHeight()-getPaddingBottom()-getPaddingTop();   mRadius=Math.min(mWidth/2,mHeght/2);   //首先繪製圓   drawCircle(canvas);   //繪製刻度   drawScale(canvas);   //繪製指標   drawPointer(canvas);   //發送訊息重新整理ui   handler.sendEmptyMessageDelayed(START_CLOCK,1000);  } </span> 

其中最核心的代碼就是這三個方法：

<span style="font-size:14px;">  //首先繪製圓   drawCircle(canvas);   //繪製刻度   drawScale(canvas);   //繪製指標   drawPointer(canvas);</span> 

首先講第一個方法：

<span style="font-size:14px;"> /**   * 畫圓   * @param canvas   */  private void drawCircle(Canvas canvas) {   mPaint.setStrokeWidth(mCircleWidth);   mPaint.setStyle(Paint.Style.FILL);   mPaint.setColor(mCircleColor);   canvas.drawCircle(mWidth/2,mHeght/2,mRadius,mPaint);  }</span> 

這個方法其實很簡單給我們的畫筆設定我們自訂的樣式之後取中心為圓心，以我們設定的半徑畫圓，這裡設定的是Paint.Style.FILL一個實心的。也可以設定一個空心的。看下我們執行這個方法後的效果：

第二方法：

<span style="font-size:14px;"> /**   * 刻度和文字   * @param canvas   */  private void drawScale(Canvas canvas) {    for (int i=0;i<60;i++){    //設定大刻度    if(i==0||i==15||i==30||i==45){     mPaint.setStrokeWidth(6);     mPaint.setColor(mBigScaleColor);     canvas.drawLine(mWidth/2,mHeght/2-mWidth/2+mCircleWidth/2,       mWidth/2,mHeght/2-mWidth/2+mCircleWidth/2+60,mPaint);     String scaleTv=String.valueOf(i==0?12:i/5);     canvas.drawText(scaleTv,mWidth/2-mTextPaint.measureText(scaleTv)/2,       mHeght/2-mWidth/2+mCircleWidth/2+95,mTextPaint);    }else if (i==5||i==10||i==20||i==25||i==35||i==40||i==50||i==55)    //設定中刻度    {     mPaint.setStrokeWidth(4);     mPaint.setColor(mMiddlecaleColor);     canvas.drawLine(mWidth/2,mHeght/2-mWidth/2+mCircleWidth/2,       mWidth/2,mHeght/2-mWidth/2+mCircleWidth/2+40,mPaint);     String scaleTv=String.valueOf(i/5);     canvas.drawText(scaleTv,mWidth/2-mTextPaint.measureText(scaleTv)/2,       mHeght/2-mWidth/2+mCircleWidth/2+75,mTextPaint);     }else    //設定小刻度    {     mPaint.setColor(mSmallScaleColor);     mPaint.setStrokeWidth(2);     canvas.drawLine(mWidth/2,mHeght/2-mWidth/2+mCircleWidth/2,       mWidth/2,mHeght/2-mWidth/2+mCircleWidth+30,mPaint);    }    canvas.rotate(6,mWidth/2,mHeght/2);   }  }</span> 

這個方法代碼看起來也沒有什麼主要是把一個圓分成60份，因為我們鐘錶上是有60個刻度，其中設定了4個大刻度分別為0，15，30，45.分別對應的鐘錶中12點  3點  6點和9點，如果這個地方你有什麼疑惑的吧你可以看看你的手錶或者鐘錶就明白了，同時裡面也設定了8個中等刻度分別為5，10，20，25，35，40，50，55為中刻度，其實對應的就是1，2，4，5，7，8，10，11點。這裡主要是自己覺得這樣分明好看而已，如果沒有強迫症的你可以直接設定都是大刻度就可以了。其他的都為小刻度，根據自己在attr設定的顏色和尺寸分別設定畫筆paint來繪製就可以了。看下我們的效果變成了這樣子： 

第三個方法就是繪製指標：

<span style="font-size:14px;"> /**   * 繪製指標   * @param canvas   */  private void drawPointer(Canvas canvas) {   Calendar mCalendar=Calendar.getInstance();   //擷取當前小時數   int hours = mCalendar.get(Calendar.HOUR);   //擷取當前分鐘數   int minutes = mCalendar.get(Calendar.MINUTE);   //擷取當前秒數   int seconds=mCalendar.get(Calendar.SECOND);    mPaint.setStrokeCap(Paint.Cap.ROUND);   //繪製時針   canvas.save();   mPaint.setColor(mHourHandColor);   mPaint.setStrokeWidth(mHourHandWidth);   //這裡計算時針需要旋轉的角度 實現原理是計算出一共多少分鐘除以60計算出真實的小時數（帶有小數，為了更加準確計算度數），已知12小時是360度，現在求出了實際小時數比例求出角度   Float hoursAngle = (hours * 60 + minutes) / 60f / 12f * 360;   canvas.rotate(hoursAngle, mWidth / 2, mHeght / 2);   canvas.drawLine(mWidth / 2, mHeght / 2 - mWidth/2f*0.5f, mWidth / 2, mHeght / 2 + mWidth/2f*0.15f, mPaint);   canvas.restore();     //繪製分針   canvas.save();   mPaint.setColor(mMinuteHandColor);   mPaint.setStrokeWidth(mMinuteHandWidth);   //這裡計算分針需要旋轉的角度 60分鐘360度，求出實際分鐘數所佔的度數   Float minutesAngle = (minutes*60+seconds) / 60f/ 60f * 360;   canvas.rotate(minutesAngle, mWidth / 2, mHeght / 2);   canvas.drawLine(mWidth / 2, mHeght / 2 - mWidth/2f*0.7f, mWidth / 2, mHeght / 2 + mWidth/2f*0.15f, mPaint);   canvas.restore();    //繪製中間的圓圈   canvas.save();   mPaint.setColor(mSecondHandColor);   mPaint.setStrokeWidth(mSecondHandWidth);   mPaint.setStyle(Paint.Style.FILL);   canvas.drawCircle(mWidth/2,mHeght/2,20,mPaint);   canvas.restore();     //繪製秒針   canvas.save();   mPaint.setColor(mSecondHandColor);   mPaint.setStrokeWidth(mSecondHandWidth);   mPaint.setStyle(Paint.Style.STROKE);   //這裡計算秒針需要旋轉的角度 60秒360度，求出實際秒數所佔的度數   Float secondAngle = seconds/60f*360;   canvas.rotate(secondAngle, mWidth / 2, mHeght / 2);   canvas.drawLine(mWidth / 2, mHeght / 2 - mWidth/2f*0.8f, mWidth / 2, mHeght / 2 + mWidth/2f*0.2f, mPaint);   canvas.restore();    }</span> 

其實這個方法我注釋已經寫的很詳細了，首先我們需要擷取到當前的時間，這個大家都是經常寫的沒啥問題。主要就是如何設定時分秒指標的位置才是關鍵。這裡我使用一個很巧妙的方法，讓繪製變得簡單了些。
先看下繪製時針：

<span style="font-size:14px;"> //繪製時針     canvas.save();     mPaint.setColor(mHourHandColor);     mPaint.setStrokeWidth(mHourHandWidth);     //這裡計算時針需要旋轉的角度 實現原理是計算出一共多少分鐘除以60計算出真實的小時數（帶有小數，為了更加準確計算度數），已知12小時是360度，現在求出了實際小時數比例求出角度     Float hoursAngle = (hours * 60 + minutes) / 60f / 12f * 360;     canvas.rotate(hoursAngle, mWidth / 2, mHeght / 2);     canvas.drawLine(mWidth / 2, mHeght / 2 - mWidth/2f*0.5f, mWidth / 2, mHeght / 2 + mWidth/2f*0.15f, mPaint);     canvas.restore();</span> 

前面三行代碼就不詳細說了，Canvas.save方法作用就是將之前所有已經繪製的圖片儲存起來。為後續操作在新的圖層上操作。和photoshop有點一個意思。大家都知道當我們擷取到當前小時數了以後我們就應該直接把時針指到對應的時數上嗎？肯定不是吧，比如是3點半時針是指到3與4之間的位置對吧。所以我們這裡需要擷取到當前的分鐘數再加上小時數才是真實的當前小時數（這裡其實秒針也需要計算的，但是這裡忽略不計了，如果你比我還強迫症的話可以加上）。當我們知道當前實際的小時數的時候，就很簡單了，因為我們知道一圈360度平均分了12小時，這個別告訴我不知道啊，要是這個常識都不知道，你去面壁吧，所以只要360/12*真實的小時數就是需要旋轉的角度。這麼想是不是很簡單了。計算出角度以後先吧canvas.rotate旋轉這個角度在繪製一個直線就ok了，哈哈哈，是不是so esey，其他分針和秒針一樣的道理，這裡就不多說了，看代碼直接能看懂的。

<span style="font-size:14px;">     //繪製分針     canvas.save();     mPaint.setColor(mMinuteHandColor);     mPaint.setStrokeWidth(mMinuteHandWidth);     //這裡計算分針需要旋轉的角度 60分鐘360度，求出實際分鐘數所佔的度數     Float minutesAngle = (minutes*60+seconds) / 60f/ 60f * 360;     canvas.rotate(minutesAngle, mWidth / 2, mHeght / 2);     canvas.drawLine(mWidth / 2, mHeght / 2 - mWidth/2f*0.7f, mWidth / 2, mHeght / 2 + mWidth/2f*0.15f, mPaint);     canvas.restore();      //繪製中間的圓圈     canvas.save();     mPaint.setColor(mSecondHandColor);     mPaint.setStrokeWidth(mSecondHandWidth);     mPaint.setStyle(Paint.Style.FILL);     canvas.drawCircle(mWidth/2,mHeght/2,20,mPaint);     canvas.restore();       //繪製秒針     canvas.save();     mPaint.setColor(mSecondHandColor);     mPaint.setStrokeWidth(mSecondHandWidth);     mPaint.setStyle(Paint.Style.STROKE);     //這裡計算秒針需要旋轉的角度 60秒360度，求出實際秒數所佔的度數     Float secondAngle = seconds/60f*360;     canvas.rotate(secondAngle, mWidth / 2, mHeght / 2);     canvas.drawLine(mWidth / 2, mHeght / 2 - mWidth/2f*0.8f, mWidth / 2, mHeght / 2 + mWidth/2f*0.2f, mPaint);     canvas.restore();</span> 

其中有個繪製中間的圓圈是我的強迫症所致，覺得中間加個圓圈好看點。執行這個方法後我們的效果就成這樣了：

哈哈下面就剩下最後一步了，就是讓指標動起來，沒錯就是動起來，其實大家也在意了我們繪製指標的時候是在方法裡直接擷取了目前時間設定指標的位置的，所以說只要我們搞個定時器一秒重新整理下ui就大功告成了，這裡就搞個hander發個空訊息。

private Handler handler=new Handler(){   @Override   public void handleMessage(Message msg) {     super.handleMessage(msg);     switch (msg.what){       case START_CLOCK:         //更新時分秒         invalidate();         //每隔1秒更新一次         handler.sendEmptyMessageDelayed(START_CLOCK,1000);         break;     }    } }; 

就成了下面的效果了：

是不是很簡單呢？附上github：https://github.com/dalong982242260/CustomViewStudy

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。