Android編程使用自定義View實(shí)現(xiàn)水波進(jìn)度效果示例
本文實(shí)例講述了Android編程使用自定義View實(shí)現(xiàn)水波進(jìn)度效果。分享給大家供大家參考,具體如下:
首先上效果圖:

簡(jiǎn)介:
1.自動(dòng)適應(yīng)屏幕大?。?br />
2.水波自動(dòng)橫向滾動(dòng);
3.各種繪制參數(shù)可通過(guò)修改常量進(jìn)行控制。
代碼不多,注釋也比較詳細(xì),全部貼上:
(一)自定義組件:
/**
* 水波進(jìn)度效果.
*/
public class WaterWaveView extends View {
//邊框?qū)挾?
private int STROKE_WIDTH;
//組件的寬,高
private int width, height;
/**
* 進(jìn)度條最大值和當(dāng)前進(jìn)度值
*/
private float max, progress;
/**
* 繪制波浪的畫(huà)筆
*/
private Paint progressPaint;
//波紋振幅與半徑之比。(建議設(shè)置:<0.1)
private static final float A = 0.05f;
//繪制文字的畫(huà)筆
private Paint textPaint;
//繪制邊框的畫(huà)筆
private Paint circlePaint;
/**
* 圓弧圓心位置
*/
private int centerX, centerY;
//內(nèi)圓所在的矩形
private RectF circleRectF;
public WaterWaveView(Context context) {
super(context);
init();
}
public WaterWaveView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public WaterWaveView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
//初始化
private void init() {
progressPaint = new Paint();
progressPaint.setColor(Color.parseColor("#77cccc88"));
progressPaint.setAntiAlias(true);
textPaint = new Paint();
textPaint.setColor(Color.WHITE);
textPaint.setAntiAlias(true);
circlePaint = new Paint();
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint.setAntiAlias(true);
circlePaint.setColor(Color.parseColor("#33333333"));
autoRefresh();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (width == 0 || height == 0) {
width = getWidth();
height = getHeight();
//計(jì)算圓弧半徑和圓心點(diǎn)
int circleRadius = Math.min(width, height) >> 1;
STROKE_WIDTH = circleRadius / 10;
circlePaint.setStrokeWidth(STROKE_WIDTH);
centerX = width / 2;
centerY = height / 2;
VALID_RADIUS = circleRadius - STROKE_WIDTH;
RADIANS_PER_X = (float) (Math.PI / VALID_RADIUS);
circleRectF = new RectF(centerX - VALID_RADIUS, centerY - VALID_RADIUS,
centerX + VALID_RADIUS, centerY + VALID_RADIUS);
}
}
private Rect textBounds = new Rect();
//x方向偏移量
private int xOffset;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//繪制圓形邊框
canvas.drawCircle(centerX, centerY, VALID_RADIUS + (STROKE_WIDTH >> 1), circlePaint);
//繪制水波曲線
canvas.drawPath(getWavePath(xOffset), progressPaint);
//繪制文字
textPaint.setTextSize(VALID_RADIUS >> 1);
String text1 = String.valueOf(progress);
//測(cè)量文字長(zhǎng)度
float w1 = textPaint.measureText(text1);
//測(cè)量文字高度
textPaint.getTextBounds("8", 0, 1, textBounds);
float h1 = textBounds.height();
float extraW = textPaint.measureText("8") / 3;
canvas.drawText(text1, centerX - w1 / 2 - extraW, centerY + h1 / 2, textPaint);
textPaint.setTextSize(VALID_RADIUS / 6);
textPaint.getTextBounds("M", 0, 1, textBounds);
float h2 = textBounds.height();
canvas.drawText("M", centerX + w1 / 2 - extraW + 5, centerY - (h1 / 2 - h2), textPaint);
String text3 = "共" + String.valueOf(max) + "M";
float w3 = textPaint.measureText(text3, 0, text3.length());
textPaint.getTextBounds("M", 0, 1, textBounds);
float h3 = textBounds.height();
canvas.drawText(text3, centerX - w3 / 2, centerY + (VALID_RADIUS >> 1) + h3 / 2, textPaint);
String text4 = "流量剩余";
float w4 = textPaint.measureText(text4, 0, text4.length());
textPaint.getTextBounds(text4, 0, text4.length(), textBounds);
float h4 = textBounds.height();
canvas.drawText(text4, centerX - w4 / 2, centerY - (VALID_RADIUS >> 1) + h4 / 2, textPaint);
}
//繪制水波的路徑
private Path wavePath;
//每一個(gè)像素對(duì)應(yīng)的弧度數(shù)
private float RADIANS_PER_X;
//去除邊框后的半徑(即內(nèi)圓半徑)
private int VALID_RADIUS;
/**
* 獲取水波曲線(包含圓弧部分)的Path.
*
* @param xOffset x方向像素偏移量.
*/
private Path getWavePath(int xOffset) {
if (wavePath == null) {
wavePath = new Path();
} else {
wavePath.reset();
}
float[] startPoint = new float[2]; //波浪線起點(diǎn)
float[] endPoint = new float[2]; //波浪線終點(diǎn)
for (int i = 0; i <= VALID_RADIUS * 2; i += 2) {
float x = centerX - VALID_RADIUS + i;
float y = (float) (centerY + VALID_RADIUS * (1.0f + A) * 2 * (0.5f - progress / max)
+ VALID_RADIUS * A * Math.sin((xOffset + i) * RADIANS_PER_X));
//只計(jì)算內(nèi)圓內(nèi)部的點(diǎn),邊框上的忽略
if (calDistance(x, y, centerX, centerY) > VALID_RADIUS) {
if (x < centerX) {
continue; //左邊框,繼續(xù)循環(huán)
} else {
break; //右邊框,結(jié)束循環(huán)
}
}
//第1個(gè)點(diǎn)
if (wavePath.isEmpty()) {
startPoint[0] = x;
startPoint[1] = y;
wavePath.moveTo(x, y);
} else {
wavePath.lineTo(x, y);
}
endPoint[0] = x;
endPoint[1] = y;
}
if (wavePath.isEmpty()) {
if (progress / max >= 0.5f) {
//滿(mǎn)格
wavePath.moveTo(centerX, centerY - VALID_RADIUS);
wavePath.addCircle(centerX, centerY, VALID_RADIUS, Path.Direction.CW);
} else {
//空格
return wavePath;
}
} else {
//添加圓弧部分
float startDegree = calDegreeByPosition(startPoint[0], startPoint[1]); //0~180
float endDegree = calDegreeByPosition(endPoint[0], endPoint[1]); //180~360
wavePath.arcTo(circleRectF, endDegree - 360, startDegree - (endDegree - 360));
}
return wavePath;
}
private float calDistance(float x1, float y1, float x2, float y2) {
return (float) Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
}
//根據(jù)當(dāng)前位置,計(jì)算出進(jìn)度條已經(jīng)轉(zhuǎn)過(guò)的角度。
private float calDegreeByPosition(float currentX, float currentY) {
float a1 = (float) (Math.atan(1.0f * (centerX - currentX) / (currentY - centerY)) / Math.PI * 180);
if (currentY < centerY) {
a1 += 180;
} else if (currentY > centerY && currentX > centerX) {
a1 += 360;
}
return a1 + 90;
}
public void setMax(int max) {
this.max = max;
invalidate();
}
//直接設(shè)置進(jìn)度值(同步)
public void setProgressSync(float progress) {
this.progress = progress;
invalidate();
}
/**
* 自動(dòng)刷新頁(yè)面,創(chuàng)造水波效果。組件銷(xiāo)毀后該線城將自動(dòng)停止。
*/
private void autoRefresh() {
new Thread(new Runnable() {
@Override
public void run() {
while (!detached) {
xOffset += (VALID_RADIUS >> 4);
SystemClock.sleep(100);
postInvalidate();
}
}
}).start();
}
//標(biāo)記View是否已經(jīng)銷(xiāo)毀
private boolean detached = false;
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
detached = true;
}
}
(二)使用方法:
在xml布局中引入上述組件,然后在activity或fragment中設(shè)置屬性:
WaterWaveView bar = (WaterWaveView) getActivity().findViewById(R.id.water_wave_view);
bar.setMax(500);
bar.setProgressSync(361.8f);
更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《Android開(kāi)發(fā)動(dòng)畫(huà)技巧匯總》、《Android編程之a(chǎn)ctivity操作技巧總結(jié)》、《Android視圖View技巧總結(jié)》、《Android布局layout技巧總結(jié)》、《Android開(kāi)發(fā)入門(mén)與進(jìn)階教程》、《Android資源操作技巧匯總》及《Android控件用法總結(jié)》
希望本文所述對(duì)大家Android程序設(shè)計(jì)有所幫助。
- Android實(shí)現(xiàn)固定屏幕顯示的方法
- Android側(cè)滑導(dǎo)航欄的實(shí)例代碼
- Android編程實(shí)現(xiàn)點(diǎn)擊鏈接打開(kāi)APP功能示例
- Android編程使用android-support-design實(shí)現(xiàn)MD風(fēng)格對(duì)話(huà)框功能示例
- Android編程實(shí)現(xiàn)的簡(jiǎn)易路徑導(dǎo)航條功能示例
- Android編程實(shí)現(xiàn)ActionBar的home圖標(biāo)動(dòng)畫(huà)切換效果
- Android 屏幕切換監(jiān)聽(tīng)的實(shí)例代碼
- Android SQLite數(shù)據(jù)庫(kù)中的表詳解
- Android實(shí)現(xiàn)第三方登錄的上拉展開(kāi),下拉隱藏,下拉隱藏示例
- 詳解Android應(yīng)用開(kāi)發(fā)--MP3音樂(lè)播放器代碼實(shí)現(xiàn)(一)
- Android6.0 固定屏幕功能實(shí)現(xiàn)方法及實(shí)例
相關(guān)文章
Android 封裝Okhttp+Retrofit+RxJava,外加攔截器實(shí)例
下面小編就為大家分享一篇Android封裝Okhttp+Retrofit+RxJava,外加攔截器實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Android?ScrollView實(shí)現(xiàn)滾動(dòng)超過(guò)邊界松手回彈
這篇文章主要為大家詳細(xì)介紹了Android?ScrollView實(shí)現(xiàn)滾動(dòng)超過(guò)邊界松手回彈,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Android SharedPreferences數(shù)據(jù)存儲(chǔ)詳解
SharedPreferences是安卓平臺(tái)上一個(gè)輕量級(jí)的存儲(chǔ)類(lèi),用來(lái)保存應(yīng)用的一些常用配置,比如Activity狀態(tài),Activity暫停時(shí),將此activity的狀態(tài)保存到SharedPereferences中;當(dāng)Activity重載,系統(tǒng)回調(diào)方法onSaveInstanceState時(shí),再?gòu)腟haredPreferences中將值取出2022-11-11
Android 如何保證service在后臺(tái)不被kill
本文主要介紹了Android 如何保證service在后臺(tái)不被kill的方法。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
Android Flutter實(shí)現(xiàn)GIF動(dòng)畫(huà)效果的方法詳解
如果我們想對(duì)某個(gè)組件實(shí)現(xiàn)一組動(dòng)效應(yīng)該怎么辦呢?本文將利用Android Flutter實(shí)現(xiàn)GIF動(dòng)畫(huà)效果,文中的示例代碼講解詳細(xì),需要的可以參考一下2022-06-06
android studio實(shí)現(xiàn)簡(jiǎn)單考試應(yīng)用程序?qū)嵗a詳解
這篇文章主要介紹了android studio實(shí)現(xiàn)簡(jiǎn)單考試應(yīng)用程序,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
Android學(xué)習(xí)筆記之ContentProvider和Uri詳解
本篇文章主要介紹了Android學(xué)習(xí)筆記之ContentProvider和Uri詳解,對(duì)于學(xué)習(xí)Android的朋友具有一定的參考價(jià)值,有需要可以可以了解一下。2016-11-11
Android Handler的postDelayed()關(guān)閉的方法及遇到問(wèn)題
這篇文章主要介紹了Android Handler的postDelayed()關(guān)閉的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04
如何設(shè)置Android studio 3.0顯示光標(biāo)返回上一次瀏覽位置的箭頭圖標(biāo)
這篇文章主要介紹了如何設(shè)置Android studio 3.0顯示光標(biāo)返回上一次瀏覽位置的箭頭圖標(biāo) 很多朋友反映剛升級(jí)了Android studio 3.0,發(fā)現(xiàn)光標(biāo)返回上一次瀏覽位置的箭頭圖標(biāo)沒(méi)有了,下文給大家介紹的非常詳細(xì),需要的朋友可以參考下2017-11-11

