Android實現簡單時鐘View的方法
通過Canvas的平移與旋轉簡化繪圖邏輯是一個非常有用的技巧,下面的時鐘view就是利用這個方法完成的,省去了使用三角函數計算坐標的麻煩。
package com.example.swt369.simpleclock; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.View; import android.view.ViewTreeObserver; import android.widget.Toast; import java.util.Calendar; /** * Created by swt369 on 2017/8/20. */ public class ClockView extends View { //時鐘各個部件的長度 private float mScaleLengthLong; private float mScaleLengthShort; private float mTickLengthHour; private float mTickLengthMinute; private float mTickLengthSecond; //view的寬和高 private float mWidth; private float mHeight; //時鐘半徑 private float mRadius; //繪制各部件時用的Paint private Paint mPaintScaleLong; private Paint mPaintScaleShort; private Paint mPaintOutline; private Paint mPaintNum; private Paint mPaintTickHour; private Paint mPaintTickMinute; private Paint mPaintTickSecond; private ViewTreeObserver.OnPreDrawListener onPreDrawListener; public ClockView(final Context context, @Nullable AttributeSet attrs) { super(context, attrs); onPreDrawListener = new ViewTreeObserver.OnPreDrawListener() { //獲取view寬高并計算各個部件的長度 @Override public boolean onPreDraw() { mWidth = getMeasuredWidth(); mHeight = getMeasuredHeight(); mRadius = Math.min(mWidth,mHeight) / 2 * 0.95f; mScaleLengthLong = mRadius * 0.1f; mScaleLengthShort = mRadius * 0.05f; mTickLengthHour = mRadius * 0.3f; mTickLengthMinute = mRadius * 0.45f; mTickLengthSecond = mRadius * 0.6f; return true; } }; getViewTreeObserver().addOnPreDrawListener(onPreDrawListener); //點擊顯示具體時間 setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Calendar calendar = Calendar.getInstance(); String time = String.format("當前時間:%02d:%02d:%02d", calendar.get(Calendar.HOUR_OF_DAY),calendar.get(Calendar.MINUTE),calendar.get(Calendar.SECOND)); Toast.makeText(context,time, Toast.LENGTH_SHORT).show(); } }); //初始化所有Paint對象 initializePaints(); } @Override protected void onDraw(Canvas canvas) { if(mWidth == 0 || mHeight == 0){ return; } if(onPreDrawListener != null){ getViewTreeObserver().removeOnPreDrawListener(onPreDrawListener); onPreDrawListener = null; } //繪制時鐘 drawClock(canvas); //一秒后重繪 postInvalidateDelayed(1000); } private void drawClock(Canvas canvas) { //保存原始狀態(tài) canvas.save(); //將坐標系原點移到中心,并逆時針旋轉90度。完成后x軸朝上。 canvas.translate(mWidth / 2,mHeight / 2); canvas.rotate(-90); //畫外圍輪廓 canvas.drawCircle(0,0,mRadius, mPaintOutline); //畫刻度 for(int i = 0 ; i < 12 ; i++){ String num = String.valueOf(i == 0 ? 12 : i); if(i % 3 == 0){ canvas.drawLine(mRadius,0,mRadius - mScaleLengthLong,0, mPaintScaleLong); }else { canvas.drawLine(mRadius,0,mRadius - mScaleLengthShort,0, mPaintScaleShort); } canvas.drawText(num,mRadius - mScaleLengthLong - mPaintNum.measureText(num) * 2,0, mPaintNum); //順時針旋轉30度 canvas.rotate(30); } Calendar calendar = Calendar.getInstance(); //畫時針 int hour = calendar.get(Calendar.HOUR); canvas.save(); canvas.rotate(hour * 30); canvas.drawLine(0,0,mTickLengthHour,0,mPaintTickHour); canvas.restore(); //畫分針 int minute = calendar.get(Calendar.MINUTE); canvas.save(); canvas.rotate(minute * 6); canvas.drawLine(0,0,mTickLengthMinute,0,mPaintTickMinute); canvas.restore(); //畫秒針 int second = calendar.get(Calendar.SECOND); canvas.save(); canvas.rotate(second * 6); canvas.drawLine(0,0,mTickLengthSecond,0,mPaintTickSecond); canvas.restore(); //恢復原始狀態(tài) canvas.restore(); } private void initializePaints(){ mPaintScaleLong = new Paint(); mPaintScaleLong.setAntiAlias(true); mPaintScaleLong.setStrokeWidth(5); mPaintScaleShort = new Paint(); mPaintScaleShort.setAntiAlias(true); mPaintScaleShort.setStrokeWidth(3); mPaintOutline = new Paint(); mPaintOutline.setStyle(Paint.Style.STROKE); mPaintOutline.setAntiAlias(true); mPaintOutline.setStrokeWidth(5); mPaintNum = new Paint(); mPaintNum.setTextSize(30); mPaintTickHour = new Paint(); mPaintTickHour.setAntiAlias(true); mPaintTickHour.setStrokeWidth(6); mPaintTickMinute = new Paint(); mPaintTickMinute.setAntiAlias(true); mPaintTickMinute.setStrokeWidth(4); mPaintTickSecond = new Paint(); mPaintTickSecond.setAntiAlias(true); mPaintTickSecond.setStrokeWidth(2); } }
代碼注釋已經比較詳細了,下面把比較重要的部分再說明一下:
//保存原始狀態(tài) canvas.save(); //省略中間部分... //恢復原始狀態(tài) canvas.restore();
在繪圖開始時調用canvas.save(),可以保存下未經任何平移、旋轉操作的原始畫布狀態(tài)。在所有繪圖工作完成后調用canvas.restore(),可以恢復到上一次保存的狀態(tài)(類似進出棧的感覺)。
//將坐標系原點移到中心,并逆時針旋轉90度。完成后x軸朝上。 canvas.translate(mWidth / 2,mHeight / 2); canvas.rotate(-90);
畫布的平移與旋轉可能比較抽象,可以想象成坐標系的平移與旋轉。調用canvas.translate(dx,dy)相當于將坐標原點向x,y方向移動了dx,dy的距離,調用canvas.rotate(degree)相當于坐標系順時針旋轉了degree°。
//畫刻度 for(int i = 0 ; i < 12 ; i++){ String num = String.valueOf(i == 0 ? 12 : i); if(i % 3 == 0){ canvas.drawLine(mRadius,0,mRadius - mScaleLengthLong,0, mPaintScaleLong); }else { canvas.drawLine(mRadius,0,mRadius - mScaleLengthShort,0, mPaintScaleShort); } canvas.drawText(num,mRadius - mScaleLengthLong - mPaintNum.measureText(num) * 2,0, mPaintNum); //順時針旋轉30度 canvas.rotate(30); }
根據i值決定是畫大刻度(90°的倍數)還是小刻度。每次畫完一條之后將坐標系順時針旋轉30°,這樣保證每次畫的刻度線的坐標不變。
//一秒后重繪 postInvalidateDelayed(1000);
作用是在1000ms(1s)后再次執(zhí)行View的draw流程,產生指針運動的效果。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Android中DrawerLayout+ViewPager滑動沖突的解決方法
這篇文章主要為大家詳細介紹了Android中DrawerLayout+ViewPager滑動沖突的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06Android開發(fā)調用WebService的方法示例
這篇文章主要介紹了Android開發(fā)調用WebService的方法,結合實例形式較為詳細的分析了Android調用WebService的原理、實現方法與相關操作注意事項,需要的朋友可以參考下2017-10-10Android畫圖實現MPAndroidchart折線圖示例詳解
這篇文章主要為大家介紹了Android畫圖實現MPAndroidchart折線圖示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07Android RecycleView添加head配置封裝的實例
這篇文章主要介紹了Android RecycleView添加head配置封裝的實例的相關資料,這里提供實例幫助大家實現這樣的功能,需要的朋友可以參考下2017-08-08Android Binder進程間通信工具AIDL使用示例深入分析
Binder作為Android 眾多的IPC通訊手段之一,在Framework的數據傳輸中起到極為關鍵的作用。Binder機制可謂是Android 知識體系里的重中之重,作為偏底層的基礎組件,平時我們很少關注它,而它卻是無處不在,也是Android 面試易考察的點之一2022-11-11Android項目類似淘寶 電商 搜索功能,監(jiān)聽軟鍵盤搜索事件,延遲自動搜索,以及時間排序的搜索歷史記錄的實現
本篇文章主要介紹了Android實現類似淘寶、電商、搜索功能(監(jiān)聽軟鍵盤搜索事件,延遲自動搜索,以及時間排序的搜索歷史記錄),感興趣的小伙伴們可以參考一下。2016-10-10