Android自定義鐘表特效
最近該忙的都忙完了,自己自定義一直是個(gè)弱項(xiàng),也一直想整個(gè)鐘表玩玩,網(wǎng)上看了一圈,學(xué)習(xí)了不少,下面自己做做自定義
首先,制作鐘表第一步,肯定是畫個(gè)圓吧,這是最直接的思維了!
先創(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++) { //刻度線長(zhǎng)度為20,一圈是360度,并且秒針轉(zhuǎn)一圈為60秒,所以一秒就對(duì)應(yīng)360度/60秒=6度,那么五秒也就是5*6 = 30度 if (i % 30 == 0) { //長(zhǎng)的 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í)是指針的長(zhǎng)度,因?yàn)樵谏戏剑詾樨?fù)數(shù) canvas.restore(); //分針 canvas.save(); mPaint.setColor(Color.BLACK); mPaint.setStyle(Paint.Style.STROKE);//繪制邊框 mPaint.setStrokeWidth(4);//邊框?qū)挾?比指針粗點(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ū)挾?比指分針粗點(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è)變量的換算方式,變量名起分針和秒針起反了,也無(wú)所謂了 //第一個(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)用
<?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();
基本就是這么多,跑起來就可以了!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
上一篇:android studio 使用Mocklocation虛擬定位
欄 目:Android
下一篇:Android 后臺(tái)運(yùn)行白名單實(shí)現(xiàn)?;?/a>
本文標(biāo)題:Android自定義鐘表特效
本文地址:http://mengdiqiu.com.cn/a1/Android/8990.html
您可能感興趣的文章
- 01-10Android自定義View之繪制圓形頭像功能
- 01-10Android實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用實(shí)現(xiàn)方法詳解
- 01-10android實(shí)現(xiàn)記住用戶名和密碼以及自動(dòng)登錄
- 01-10android實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能
- 01-10Android 友盟第三方登錄與分享的實(shí)現(xiàn)代碼
- 01-10C++自定義API函數(shù)實(shí)現(xiàn)大數(shù)相乘算法
- 01-10android實(shí)現(xiàn)指紋識(shí)別功能
- 01-10Emoji表情在Android JNI中的兼容性問題詳解
- 01-10Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條
- 01-10android開發(fā)環(huán)境中SDK文件夾下的所需內(nèi)容詳解


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 01-10Android自定義View之繪制圓形頭像功能
- 01-10Android實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用實(shí)現(xiàn)方
- 01-10android實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能
- 01-10android實(shí)現(xiàn)記住用戶名和密碼以及自動(dòng)
- 01-10C++自定義API函數(shù)實(shí)現(xiàn)大數(shù)相乘算法
- 01-10Android 友盟第三方登錄與分享的實(shí)現(xiàn)代
- 01-10android實(shí)現(xiàn)指紋識(shí)別功能
- 01-10如何給Flutter界面切換實(shí)現(xiàn)點(diǎn)特效
- 01-10Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條
- 01-10Emoji表情在Android JNI中的兼容性問題詳
隨機(jī)閱讀
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-10delphi制作wav文件的方法
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 01-10C#中split用法實(shí)例總結(jié)
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 04-02jquery與jsp,用jquery