1. 程式人生 > 程式設計 >Android Canvas自定義實現時鐘效果

Android Canvas自定義實現時鐘效果

Android之Canvas自定義畫一個時鐘,供大家參考,具體內容如下

自定義控制元件,在安卓是也是一種無所不能的技術了,所有自帶控制元件,以及組合自帶控制元件不能實現的一些效果,我們都可以通過自定義控制元件來實現,不過,如果能有系統控制元件使用的就用系統自帶的控制元件去實現,而不必要用自定義去實現,我們都知道,自定義控制元件在一定的程度上,效率往往會比系統自帶的控制元件效率低,所以我不到萬不得已,不要使用自定義控制元件,今天用自定一控制元件,實現一個小小的時鐘,具體的實現在程式碼中註釋功能。

ClockView.java

public class ClockView extends View implements Handler.Callback {

 //定義一個畫筆
 private Paint paint;
 //定義個畫小時指標的路徑
 private Path hour;
 //定義一個畫分針的路徑
 private Path minute;
 //定義一個Handler來實現時鐘跑動效果
 private Handler handler = new Handler(this);

 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,defStyleAttr);
  //建立一個畫筆
  this.paint = new Paint();
  //建立一個時針路徑,用於繪製時針
  hour = new Path();
  //首先將點定位到時針尾部,所有的座標,大家可以根據圓心點去尋找對應的點
  hour.moveTo(500,380);
  //然後與(185,500)連線一條線
  hour.lineTo(485,500);
  //然後與(500,515)連線一條線
  hour.lineTo(500,515);
  //最後繪製成一個完整的時針線條了,效果為圖中的綠色線條
  hour.lineTo(515,500);
  //建立一個分針路徑
  minute = new Path();
  minute.moveTo(500,350);
  minute.lineTo(490,500);
  minute.lineTo(500,510);
  //最後連線成一條分針線條
  minute.lineTo(510,500);
  //一開始就傳送訊息,讓時鐘開始執行
  handler.sendEmptyMessage(0);

 }

 @TargetApi(Build.VERSION_CODES.N)
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //首先設定畫布為黑色
  canvas.drawColor(0xff000000);
  //獲取螢幕的寬,和高的比例,選取最小的比例,這樣就能讓圖片位於中間了。
  float scale = Math.min(getWidth() / 1000.0f,getHeight() / 1000.0f);
  //設定畫布的比例
  canvas.scale(scale,scale);
  //將圖片繪製在螢幕的中間
  canvas.translate((getWidth() / scale - 1000) / 2,(getHeight() / scale - 1000) / 2);
  //設定畫筆型別為空心的
  paint.setStyle(Paint.Style.STROKE);
  //顏色為白色
  paint.setColor(0xffffffff);
  //畫筆的粗細
  paint.setStrokeWidth(5);
  //將上面所有繪製的內容進行儲存一下
  canvas.save();
  //開始繪製一個時鐘外圓
  canvas.drawCircle(500,500,200,paint);
  //通過for迴圈繪製12個小時的時鐘刻度
  for (int i = 0; i < 12; i++) {
   if (i % 3 == 0) {//繪製12 3 6 9點時刻
    paint.setStrokeWidth(5);//設定粗度為5
    canvas.drawLine(500,300,320,paint);
   } else {
    paint.setStrokeWidth(2);
    canvas.drawLine(500,315,paint);
   }
   canvas.rotate(30,500);//將圓圍繞圓點旋轉30度,每30度繪製一個刻度
  }
  paint.setStrokeWidth(3);
  paint.setColor(0xff00ff00);
  paint.setStyle(Paint.Style.FILL);
  //定義一個Calendar時鐘類
  Calendar calendar = Calendar.getInstance();
  //將上面所有繪製的東西儲存下來
  canvas.save();
  //通過獲取系統的時鐘,然後繪製到對應的時針
  canvas.rotate(calendar.get(Calendar.HOUR) * 30 + calendar.get(Calendar.MINUTE),500);
  //繪製時針
  canvas.drawPath(hour,paint);
  //重繪上一次的時鐘
  canvas.restore();
  //設定分針的顏色為紅色
  paint.setColor(0xffff0000);
  //根據系統獲取的時間旋轉到對應的角度
  canvas.rotate(calendar.get(Calendar.MINUTE) * 6 + calendar.get(Calendar.SECOND) * 0.1f,500);
  //繪製分針
  canvas.drawPath(minute,paint);
  paint.setColor(Color.WHITE);
  paint.setStrokeWidth(2);
  canvas.save();
  canvas.rotate(calendar.get(Calendar.SECOND) * 6,500);
  //繪製秒針
  canvas.drawLine(500,330,510,paint);
  canvas.restore();
  canvas.save();
 }

 /**
  * 通過Handler更新時鐘走向
  * @param message
  * @return
  */
 @Override
 public boolean handleMessage(Message message) {
  switch (message.what) {
   case 0:
    //重新掉用onDraw方法
    invalidate();
    //每隔一秒繪製一次
    handler.sendEmptyMessageDelayed(0,1000);
    break;
  }
  return true;
 }
}

通過如上的程式碼就能簡單的繪製一個時鐘了,我個人的美觀不太好,所以只能繪製成如下的效果,還是那句話,對於能自定義控制元件不到萬不得已就不要用。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。