Android中怎么自定義一個鐘表特效

這篇文章將為大家詳細講解有關(guān)Android中怎么自定義一個鐘表特效，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

首先，制作鐘表第一步，肯定是畫個圓吧，這是最直接的思維了！

先創(chuàng)建自己的自定義類，繼承View ，重寫構(gòu)造方法，在第一個和第二個構(gòu)造中初始化畫筆，設(shè)置顏色等 第一個構(gòu)造器類似于咱們直接New對象，第二個就是在xml文件引用時用到的

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è)置線寬，線寬默認是1mPaint.setStrokeWidth(2);//在屏幕中心畫圓，半徑為屏幕的1/3canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 3, mPaint);

畫圓心

//整個屏幕中心為圓心點mPaint.setStrokeWidth(5);canvas.drawPoint(getWidth() / 2, getHeight() / 2, mPaint);

接下來開始畫表里面的豎線

//安卓坐標系默認實在左上角的，現(xiàn)在我們需要將坐標軸移動到圓心位置，這樣利于我們繪制線mPaint.setStrokeWidth(1);//坐標原點平移到圓心的位置canvas.translate(getWidth() / 2, getHeight() / 2);for (int i = 0; i < 360; i++) {   //刻度線長度為20，一圈是360度，并且秒針轉(zhuǎn)一圈為60秒，所以一秒就對應(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是成對出現(xiàn)的，為了這一塊操作不影響下面的元素，一個保存，一個取出的意思

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ù)字有的就會倒著，所以執(zhí)行下面這一系列操作，再去繪制數(shù)字就正常了 public void trans(Canvas canvas, String text, int degree, Paint paint) {  Rect rect = new Rect();  paint.getTextBounds(text, 0, text.length(), rect);  //先將原來的坐標軸旋轉(zhuǎn)30度  canvas.rotate(degree);  //將旋轉(zhuǎn)完成的坐標軸平移到上方 它只是在y軸進行的平移，所以x軸為0，y軸也就是圓心的位置減去35，35是自己固定的位置，可適當自己修改；但是為負值，因為在y軸的上方，Android坐標系往下為正數(shù)  canvas.translate(0, -(getWidth() / 3 - 35));  //這時在將原來旋轉(zhuǎn)的30都轉(zhuǎn)回去，此時的坐標軸與開始的坐標軸都是直立的，只不過現(xiàn)在的位置處于原來坐標軸的 右上方  canvas.rotate(-degree);  //開始寫文字 1，2，3，。。。。。12 因為文字寫  canvas.drawText(text, -rect.width() / 2, rect.height() / 2, paint);  //寫完文字后開始將坐標軸復(fù)原 先是順時針旋轉(zhuǎn)30都，  canvas.rotate(degree);  //再平移到圓心的位置  canvas.translate(0, getWidth() / 3 - 35);  //在逆時針平移30都  canvas.rotate(-degree); }

最后繪制分針、秒針、時針

//秒針  canvas.save(); //save方法作用是將畫布先保存下來，為了不影響其他的元素，例如繪制兩張圖片，繪制完第一張接著繪制第二張，第二張可能就會受到第一張的影響，變形啊或者壓縮了  mPaint.setColor(Color.RED);  mPaint.setStyle(Paint.Style.STROKE);//繪制邊框  mPaint.setStrokeWidth(2);//邊框?qū)挾? canvas.rotate(secondDegree);//這三個變量在下面代碼中  canvas.drawLine(0, 0, 0, -100, mPaint);//豎直的，只在Y軸上，所以X軸都為0，100其實是指針的長度，因為在上方，所以為負數(shù)  canvas.restore();  //分針  canvas.save();  mPaint.setColor(Color.BLACK);  mPaint.setStyle(Paint.Style.STROKE);//繪制邊框  mPaint.setStrokeWidth(4);//邊框?qū)挾?比指針粗點  canvas.rotate(minuteDegree);  canvas.drawLine(0, 0, 0, -80, mPaint);  canvas.restore();  //時針  canvas.save();  //mPaint.setColor(Color.GREEN);  mPaint.setStyle(Paint.Style.STROKE);//繪制邊框  mPaint.setStrokeWidth(6);//邊框?qū)挾?比指分針粗點  canvas.rotate(hourDegree);  canvas.drawLine(0, 0, 0, -60, mPaint);  canvas.restore();

效果

最后讓三個針跑起來

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;   }   //這三個變量的換算方式，變量名起分針和秒針起反了，也無所謂了   //第一個360/60=6，也就是一秒鐘走六度   //第二個6/60 分針一秒針走0.1度   //時針，一秒鐘走1/120度   secondDegree = secondDegree + 6;   minuteDegree = minuteDegree + 0.1f;   hourDegree = hourDegree + 1 / 120f;   /**    * 自定義View 刷新界面有三種    * 1：Invalidate() 如果只是內(nèi)容變動，可使用此方法    * 2：postInvalidate() 涉及到線程切換的    * 3：requestLayout() view位置變動，需要調(diào)用此方法 涉及到RadioGroup    */   postInvalidate();//涉及到線程，界面刷新需要使用此方法  } }; public void start() {  timer.schedule(timerTask, 0, 1000); }

在下面的旋轉(zhuǎn)角度里調(diào)用三個變量，重復(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();  //時針  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)用

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.liuguijie.customwatch.MainActivity"> <com.liuguijie.customwatch.Watch  android:id="@+id/watch"  android:layout_centerInParent="true"  android:layout_width="300dp"  android:layout_height="300dp" /></RelativeLayout>

//調(diào)用start方法Watch watchView = findViewById(R.id.watch);watchView.start();

基本就是這么多，跑起來就可以了！

關(guān)于Android中怎么自定義一個鐘表特效就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。