Android水波紋載入控件CircleWaterWaveView使用詳解
一、效果圖
本控件已上傳Github,歡迎Star和Fork,項(xiàng)目地址:CircleWaterWaveView
二、設(shè)計(jì)思路
觀察效果圖,可以看出,該自定義控件由三個(gè)部分構(gòu)成:外圓、內(nèi)圓、正弦曲線。他們的關(guān)系如下圖:
因?yàn)榭丶莿?dòng)態(tài)的,所以我們需要一個(gè)線程去不停地繪制,所以我選擇了SurfaceView來作為該控件地父類。該控件地核心是如何去繪制波浪,我采用如下的思路來進(jìn)行內(nèi)圓下部地繪制。利用內(nèi)圓與正弦曲線地交集,來繪制。
核心代碼如下:
/** * 繪制圖像 * * @author luxun */ private void drawCanvas(Canvas canvas) { if (canvas == null) return; //畫背景圓圈 canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG)); canvas.drawCircle(mCenterPoint.x, mCenterPoint.y, mOutRadius, mOutCirclePaint); canvas.drawCircle(mCenterPoint.x, mCenterPoint.y, mRadius, mCirclePaint); if (mStart) { //計(jì)算正弦曲線的路徑 int mH = mCenterPoint.y + mRadius - mCurrentHight; int length = 2 * mOutRadius; Path path = new Path(); path.moveTo(0, mH); for (int i = 0; i < length; i++) { int x = i; int y = (int) (Math.sin(Math.toRadians(x + mTranX) / amplitude) * mRadius / increase); path.lineTo(x, mH + y); } path.lineTo(length, mH); path.lineTo(length, mCenterPoint.y + mRadius); path.lineTo(0, mCenterPoint.y + mRadius); path.lineTo(0, mH); canvas.save();//保存畫布狀態(tài) //這里與圓形取交集,除去正弦曲線多畫的部分 Path pc = new Path(); pc.addCircle(mCenterPoint.x, mCenterPoint.y, mRadius, Path.Direction.CCW); canvas.clipPath(pc, Region.Op.INTERSECT);//切割畫布 canvas.drawPath(path, mWaterPaint); //繪制文字 canvas.drawText(flowNum + "%", mCenterPoint.x, mCenterPoint.y + mTextSise / 2, mTextPaint); canvas.restore();//恢復(fù)畫布狀態(tài) } }
三、性能優(yōu)化
繪制線程如下:
/** * 繪制界面的線程 * * @author luxun */ private class RenderThread implements Runnable { @Override public void run() { // 不停繪制界面,這里是異步繪制,不采用外部通知開啟繪制的方式,水波根據(jù)數(shù)據(jù)更新才會(huì)開始增長(zhǎng) while (isDrawing) { if (mWaterTaget > mCurrentHight) { mCurrentHight = mCurrentHight + mUpSpeed; if (mWaterTaget <= mCurrentHight) { mCurrentHight = mWaterTaget; } } if (mStart) { if (mTranX > mRadius) { mTranX = 0; } mTranX -= mWaterSpeed; } drawUI(); SystemClock.sleep(25);//控制刷新速率,減少cpu占用 } } }
通過為SurfaceHolder添加監(jiān)聽,來控制繪制線程。當(dāng)控件被隱藏不在前臺(tái)顯示時(shí),自動(dòng)結(jié)束繪制線程,當(dāng)控件顯示在前臺(tái)時(shí),再次開啟繪制。
@Override public void surfaceCreated(SurfaceHolder surfaceHolder) { isDrawing = true; new Thread(renderThread).start(); } @Override public void surfaceChanged(SurfaceHolder surfaceHolder, int format, int width, int height) { int minLength = Math.min(width, height); mOutRadius = minLength / 2; mRadius = (int) (0.5 * (minLength - mOutStrokeWidth)); mCenterPoint = new Point(minLength / 2, minLength / 2); if (progress != 0) { setProgress(progress); } } @Override public void surfaceDestroyed(SurfaceHolder surfaceHolder) { isDrawing = false; }
四、屬性化
部分設(shè)置屬性,除了通過代碼設(shè)置外,同時(shí)也加入了在XML文件中,直接以屬性賦值的操作。
app:textColor="#00ff00" app:waterColor="#00ff00" app:strokeColor="#00ff00" app:backgroudColor="#00ff00" app:amplitude="1.0"[水波振幅] app:max="1000" app:progress="500" app:increase="6.0"[水波漲幅] app:upSpeed="3"[上漲速度] app:waterSpeed="8"[移動(dòng)速度] app:strokeSize="4dp" app:textSize="20dp"
五、后記
代碼已經(jīng)上傳Github,歡迎有興趣的朋友去看看。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- android自定義WaveView水波紋控件
- Android自定義View控件實(shí)現(xiàn)多種水波紋漣漪擴(kuò)散效果
- Android自定義WaveProgressView實(shí)現(xiàn)水波紋加載需求
- Android自定義View實(shí)現(xiàn)水波紋效果
- Android自定義View實(shí)現(xiàn)水波紋引導(dǎo)動(dòng)畫
- Android 自定義view實(shí)現(xiàn)水波紋動(dòng)畫效果
- Android自定義View 實(shí)現(xiàn)水波紋動(dòng)畫引導(dǎo)效果
- Android自定義view實(shí)現(xiàn)水波紋進(jìn)度球效果
- Android項(xiàng)目實(shí)戰(zhàn)手把手教你畫圓形水波紋loadingview
- Android自定義View實(shí)現(xiàn)簡(jiǎn)單水波紋效果
相關(guān)文章
Android手機(jī)屏幕px與dp互轉(zhuǎn)的工具類
今天小編就為大家分享一篇關(guān)于Android手機(jī)屏幕px與dp互轉(zhuǎn)的工具類,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-03-03android通過servlet服務(wù)器保存文件到手機(jī)
這篇文章主要為大家詳細(xì)介紹了android通過servlet服務(wù)器保存文件到手機(jī),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06Android基礎(chǔ)知識(shí)之單點(diǎn)觸摸
這篇文章主要為大家詳細(xì)介紹了Android基礎(chǔ)知識(shí)之單點(diǎn)觸摸,很簡(jiǎn)單的操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06Android獲取短信驗(yàn)證碼的實(shí)現(xiàn)方法
為了保護(hù)用戶信息的安全性,開始使用通過服務(wù)器向用戶發(fā)送驗(yàn)證碼的方式,接下來通過本文給大家介紹android獲取短信驗(yàn)證碼的實(shí)現(xiàn)方法,非常不錯(cuò),感興趣的朋友一起看看吧2016-09-09android獲取手機(jī)唯一標(biāo)識(shí)的方法
這篇文章主要介紹了獲取安卓的手機(jī)或者平板的唯一標(biāo)識(shí)的方法,需要的朋友可以參考下2014-02-02Android中如何利用AIDL機(jī)制調(diào)用遠(yuǎn)程服務(wù)
這篇文章主要介紹了Android中如何利用AIDL機(jī)制調(diào)用遠(yuǎn)程服務(wù)的相關(guān)資料,需要的朋友可以參考下2016-03-03