如何在Android中自定義一個(gè)鐘表特效？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。
新民網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)成立于2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
先創(chuàng)建自己的自定義類，繼承View ，重寫構(gòu)造方法，在第一個(gè)和第二個(gè)構(gòu)造中初始化畫筆，設(shè)置顏色等
第一個(gè)構(gòu)造器類似于咱們直接New對(duì)象，第二個(gè)就是在xml文件引用時(shí)用到的
重慶分公司
重慶分公司
public class Watch extends View {
private Paint mPaint;
private Context context;
public Watch(Context context) {
super(context);
this.context = context;
init();
}
public Watch(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
this.context = context;
init();
}
public Watch(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void init() {
mPaint = new Paint();
//抗鋸齒
mPaint.setAntiAlias(true);
mPaint.setColor(Color.BLACK);
//分三種，STROKE之繪制輪廓，不繪制內(nèi)容；FILL，只繪制內(nèi)容；FILL_AND_STROKE，內(nèi)容和輪廓都繪制
mPaint.setStyle(Paint.Style.STROKE);
}開始畫圓
//設(shè)置線寬，線寬默認(rèn)是1 mPaint.setStrokeWidth(2); //在屏幕中心畫圓，半徑為屏幕的1/3 canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 3, mPaint);
畫圓心
//整個(gè)屏幕中心為圓心點(diǎn) mPaint.setStrokeWidth(5); canvas.drawPoint(getWidth() / 2, getHeight() / 2, mPaint);
接下來開始畫表里面的豎線
//安卓坐標(biāo)系默認(rèn)實(shí)在左上角的，現(xiàn)在我們需要將坐標(biāo)軸移動(dòng)到圓心位置，這樣利于我們繪制線
mPaint.setStrokeWidth(1);
//坐標(biāo)原點(diǎn)平移到圓心的位置
canvas.translate(getWidth() / 2, getHeight() / 2);
for (int i = 0; i < 360; i++) {
//刻度線長度為20，一圈是360度，并且秒針轉(zhuǎn)一圈為60秒，所以一秒就對(duì)應(yīng)360度/60秒=6度，那么五秒也就是5*6 = 30度
if (i % 30 == 0) { //長的
canvas.drawLine(getWidth() / 3 - 25, 0, getWidth() / 3, 0, mPaint);
} else if (i % 6 == 0) { //中的
canvas.drawLine(getWidth() / 3 - 14, 0, getWidth() / 3, 0, mPaint);
}
//每繪制一次就旋轉(zhuǎn)1度，總共繪制了360條線
canvas.rotate(1);
}效果
接著再繪制數(shù)字 save和restore是成對(duì)出現(xiàn)的，為了這一塊操作不影響下面的元素，一個(gè)保存，一個(gè)取出的意思
canvas.save();
for (int i = 0; i < 12; i++) {
if (i == 0) {
trans(canvas, 12 + "", i * 30, mPaint);
} else {
trans(canvas, i + "", i * 30, mPaint);
}
}
canvas.restore();
//如果直接繪制數(shù)字的畫，文字也跟著旋轉(zhuǎn)了，數(shù)字有的就會(huì)倒著，所以執(zhí)行下面這一系列操作，再去繪制數(shù)字就正常了
public void trans(Canvas canvas, String text, int degree, Paint paint) {
Rect rect = new Rect();
paint.getTextBounds(text, 0, text.length(), rect);
//先將原來的坐標(biāo)軸旋轉(zhuǎn)30度
canvas.rotate(degree);
//將旋轉(zhuǎn)完成的坐標(biāo)軸平移到上方 它只是在y軸進(jìn)行的平移，所以x軸為0，y軸也就是圓心的位置減去35，35是自己固定的位置，可適當(dāng)自己修改；但是為負(fù)值，因?yàn)樵趛軸的上方，Android坐標(biāo)系往下為正數(shù)
canvas.translate(0, -(getWidth() / 3 - 35));
//這時(shí)在將原來旋轉(zhuǎn)的30都轉(zhuǎn)回去，此時(shí)的坐標(biāo)軸與開始的坐標(biāo)軸都是直立的，只不過現(xiàn)在的位置處于原來坐標(biāo)軸的 右上方
canvas.rotate(-degree);
//開始寫文字 1，2，3，。。。。。12 因?yàn)槲淖謱?
canvas.drawText(text, -rect.width() / 2, rect.height() / 2, paint);
//寫完文字后開始將坐標(biāo)軸復(fù)原 先是順時(shí)針旋轉(zhuǎn)30都，
canvas.rotate(degree);
//再平移到圓心的位置
canvas.translate(0, getWidth() / 3 - 35);
//在逆時(shí)針平移30都
canvas.rotate(-degree);
}最后繪制分針、秒針、時(shí)針
//秒針 canvas.save(); //save方法作用是將畫布先保存下來，為了不影響其他的元素，例如繪制兩張圖片，繪制完第一張接著繪制第二張，第二張可能就會(huì)受到第一張的影響，變形啊或者壓縮了 mPaint.setColor(Color.RED); mPaint.setStyle(Paint.Style.STROKE);//繪制邊框 mPaint.setStrokeWidth(2);//邊框?qū)挾? canvas.rotate(secondDegree);//這三個(gè)變量在下面代碼中 canvas.drawLine(0, 0, 0, -100, mPaint);//豎直的，只在Y軸上，所以X軸都為0，100其實(shí)是指針的長度，因?yàn)樵谏戏?，所以為?fù)數(shù) canvas.restore(); //分針 canvas.save(); mPaint.setColor(Color.BLACK); mPaint.setStyle(Paint.Style.STROKE);//繪制邊框 mPaint.setStrokeWidth(4);//邊框?qū)挾?nbsp;比指針粗點(diǎn) canvas.rotate(minuteDegree); canvas.drawLine(0, 0, 0, -80, mPaint); canvas.restore(); //時(shí)針 canvas.save(); //mPaint.setColor(Color.GREEN); mPaint.setStyle(Paint.Style.STROKE);//繪制邊框 mPaint.setStrokeWidth(6);//邊框?qū)挾?nbsp;比指分針粗點(diǎn) canvas.rotate(hourDegree); canvas.drawLine(0, 0, 0, -60, mPaint); canvas.restore();
效果
最后讓三個(gè)針跑起來
private float secondDegree;
private float minuteDegree;
private float hourDegree;
private Timer timer = new Timer();
private TimerTask timerTask = new TimerTask() {
@Override
public void run() {
if (secondDegree == 360) {
secondDegree = 0;
}
if (minuteDegree == 360) {
minuteDegree = 0;
}
if (hourDegree == 360) {
hourDegree = 0;
}
//這三個(gè)變量的換算方式，變量名起分針和秒針起反了，也無所謂了
//第一個(gè)360/60=6，也就是一秒鐘走六度
//第二個(gè)6/60 分針一秒針走0.1度
//時(shí)針，一秒鐘走1/120度
secondDegree = secondDegree + 6;
minuteDegree = minuteDegree + 0.1f;
hourDegree = hourDegree + 1 / 120f;
/**
* 自定義View 刷新界面有三種
* 1：Invalidate() 如果只是內(nèi)容變動(dòng)，可使用此方法
* 2：postInvalidate() 涉及到線程切換的
* 3：requestLayout() view位置變動(dòng)，需要調(diào)用此方法 涉及到RadioGroup
*/
postInvalidate();//涉及到線程，界面刷新需要使用此方法
}
};
public void start() {
timer.schedule(timerTask, 0, 1000);
}在下面的旋轉(zhuǎn)角度里調(diào)用三個(gè)變量，重復(fù)的上面的代碼 星星部分
//秒針 canvas.save(); mPaint.setColor(Color.RED); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(2); **canvas.rotate(secondDegree);** canvas.drawLine(0, 0, 0, -100, mPaint); canvas.restore(); //分針 canvas.save(); mPaint.setColor(Color.BLACK); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(4); **canvas.rotate(minuteDegree);** canvas.drawLine(0, 0, 0, -80, mPaint); canvas.restore(); //時(shí)針 canvas.save(); //mPaint.setColor(Color.GREEN); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(6); **canvas.rotate(hourDegree);** canvas.drawLine(0, 0, 0, -60, mPaint); canvas.restore();
最后在activity界面調(diào)用
