一、效果圖
十載專業(yè)網(wǎng)站制作公司歷程，堅持以創(chuàng)新為先導(dǎo)的網(wǎng)站服務(wù)，服務(wù)超過上千企業(yè)及個人，涉及網(wǎng)站設(shè)計、手機APP定制開發(fā)、微信開發(fā)、平面設(shè)計、互聯(lián)網(wǎng)整合營銷等多個領(lǐng)域。在不同行業(yè)和領(lǐng)域給人們的工作和生活帶來美好變化。
本控件已上傳Github，歡迎Star和Fork，項目地址：CircleWaterWaveView
二、設(shè)計思路
觀察效果圖，可以看出，該自定義控件由三個部分構(gòu)成：外圓、內(nèi)圓、正弦曲線。他們的關(guān)系如下圖：
因為控件是動態(tài)的，所以我們需要一個線程去不停地繪制，所以我選擇了SurfaceView來作為該控件地父類。該控件地核心是如何去繪制波浪，我采用如下的思路來進行內(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) {
//計算正弦曲線的路徑
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ù)更新才會開始增長
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)控件被隱藏不在前臺顯示時，自動結(jié)束繪制線程，當(dāng)控件顯示在前臺時，再次開啟繪制。
@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è)置外，同時也加入了在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"[移動速度] app:strokeSize="4dp" app:textSize="20dp"
五、后記
代碼已經(jīng)上傳Github，歡迎有興趣的朋友去看看。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
