Android Canvas自定義實現時鐘效果
阿新 • • 發佈:2020-01-07
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; } }
通過如上的程式碼就能簡單的繪製一個時鐘了,我個人的美觀不太好,所以只能繪製成如下的效果,還是那句話,對於能自定義控制元件不到萬不得已就不要用。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。