Android自定義View畫出一個時鐘(時針、分針、秒針)完美搭配當前時間走動
阿新 • • 發佈：2018-12-31
1、獲取時間值
private void getDatas() { SimpleDateFormat format = new SimpleDateFormat("HH,mm,ss"); String time = format.format(new Date()); try { String s[] = time.split(","); hcount = Integer.parseInt(s[0]); mcount = Integer.parseInt(s[1]); scount = Integer.parseInt(s[2]); } catch (Exception ex) { ex.printStackTrace(); } }
2、畫出外層圓
Paint paintCircle = new Paint(); paintCircle.setStyle(Paint.Style.STROKE); paintCircle.setStrokeWidth(3); paintCircle.setColor(colorCalibration); paintCircle.setAntiAlias(true); //畫出外層的圓盤 canvas.drawCircle(width / 2, height / 2, radius, paintCircle);
3、畫出上下午標識
// 繪製上下午
paintCircle.setTextSize(24);
paintCircle.setStyle(Paint.Style.FILL);
paintCircle.setStrokeWidth(0);
canvas.drawText(hcount < 12 ? "AM" : "PM", width / 2 - paintCircle.measureText("PM") / 2, height / 2 + 50, paintCircle);4、利用畫布canvas的rotate旋轉畫出刻度條
Paint paintDegree = new Paint(); paintDegree.setColor(colorCalibration); paintDegree.setStyle(Paint.Style.STROKE); paintDegree.setStrokeWidth(3); paintDegree.setAntiAlias(true); //畫出12個小時的刻度線 for (int i = 0; i < 12; i++) { canvas.drawLine(width / 2, height / 2 - radius, width / 2, height / 2 - radius + 30, paintDegree); canvas.rotate(ANGLE_HOUR, width / 2, height / 2); } //畫出60個分鐘的刻度線 for (int x = 0; x < 60; x++) { paintDegree.setStrokeWidth(2); if (x % 5 != 0) { canvas.drawLine(width / 2, height / 2 - radius, width / 2, height / 2 - radius + 20, paintDegree); } canvas.rotate(ANGLE_MINUTE, width / 2, height / 2); }
5、畫出當前的時針分針秒針
int hourRadius = radius * 5 / 12;//時針長度
int minuteRaidus = radius * 8 / 12;//分針長度
int secondRaidus = radius * 10 / 12;//秒針長度
Paint paintHour = new Paint();
paintHour.setStyle(Paint.Style.STROKE);
paintHour.setAntiAlias(true);
paintHour.setStrokeWidth(7);
paintHour.setColor(colorHour);
//將座標系的平移至原點為（wdith/2,height/2）的地方
canvas.translate(width / 2, height / 2);
canvas.save();
int offset = 30 * mcount / 60;
offset -= offset % ANGLE_MINUTE;//時針相對分針數，有一個偏移量
int rotateH = 180 + ANGLE_HOUR * hcount + offset;
canvas.rotate(rotateH);
canvas.drawLine(0, -DEFAULT_POINT_BACK_LENGTH, 0, hourRadius, paintHour);//畫時針
canvas.restore();
Paint paintMinute = new Paint();
paintMinute.setStrokeWidth(5);
paintMinute.setColor(colorMinute);
paintMinute.setStyle(Paint.Style.STROKE);
paintMinute.setAntiAlias(true);
int rotateM = 180 + ANGLE_MINUTE * mcount;
canvas.save();
canvas.rotate(rotateM);
canvas.drawLine(0, -DEFAULT_POINT_BACK_LENGTH, 0, minuteRaidus, paintMinute);//畫分針
canvas.restore();
Paint paintSecond = new Paint();
paintSecond.setStrokeWidth(3);
paintSecond.setColor(colorSecond);
paintSecond.setStyle(Paint.Style.STROKE);
paintSecond.setAntiAlias(true);
int rotateS = 180 + ANGLE_MINUTE * scount;
canvas.save();
canvas.rotate(rotateS);
canvas.drawLine(0, -DEFAULT_POINT_BACK_LENGTH, 0, secondRaidus, paintSecond);//畫秒針
canvas.restore();
6、畫出圓心
//畫圓心
Paint paintCenter = new Paint();
paintCenter.setColor(Color.WHITE);
canvas.drawCircle(0, 0, 2, paintCenter);7、延遲一秒就更新介面，重繪
postInvalidateDelayed(1000);//延遲一秒執行 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyClockView, defStyleAttr, 0);
colorHour = typedArray.getColor(R.styleable.MyClockView_clock_hour_color, Color.RED);//時針顏色
colorMinute = typedArray.getColor(R.styleable.MyClockView_clock_minute_color, Color.GREEN);//分針顏色
colorSecond = typedArray.getColor(R.styleable.MyClockView_clock_second_color, Color.BLUE);//秒針顏色
colorCalibration = typedArray.getColor(R.styleable.MyClockView_clock_calibration_color, Color.BLACK);//時鐘刻度顏色值
typedArray.recycle();完成。