Android編程使用自定義View實現(xiàn)水波進(jìn)度效果示例
更新時間：2017年01月20日 14:18:35 作者：books1958
這篇文章主要介紹了Android編程使用自定義View實現(xiàn)水波進(jìn)度效果,結(jié)合實例形式詳細(xì)分析了Android水波動畫效果的具體實現(xiàn)步驟與相關(guān)注意事項,需要的朋友可以參考下
本文實例講述了Android編程使用自定義View實現(xiàn)水波進(jìn)度效果。分享給大家供大家參考，具體如下：
首先上效果圖：
簡介：
1.自動適應(yīng)屏幕大小；
2.水波自動橫向滾動；
3.各種繪制參數(shù)可通過修改常量進(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;
/**
* 繪制波浪的畫筆
*/
private Paint progressPaint;
//波紋振幅與半徑之比。(建議設(shè)置：<0.1)
private static final float A = 0.05f;
//繪制文字的畫筆
private Paint textPaint;
//繪制邊框的畫筆
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();
//計算圓弧半徑和圓心點
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);
//測量文字長度
float w1 = textPaint.measureText(text1);
//測量文字高度
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;
//每一個像素對應(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]; //波浪線起點
float[] endPoint = new float[2]; //波浪線終點
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));
//只計算內(nèi)圓內(nèi)部的點，邊框上的忽略
if (calDistance(x, y, centerX, centerY) > VALID_RADIUS) {
if (x < centerX) {
continue; //左邊框,繼續(xù)循環(huán)
} else {
break; //右邊框,結(jié)束循環(huán)
}
}
//第1個點
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) {
//滿格
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ìn)度條已經(jīng)轉(zhuǎn)過的角度。
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();
}
/**
* 自動刷新頁面，創(chuà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)銷毀
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)容感興趣的讀者可查看本站專題：《Android開發(fā)動畫技巧匯總》、《Android編程之a(chǎn)ctivity操作技巧總結(jié)》、《Android視圖View技巧總結(jié)》、《Android布局layout技巧總結(jié)》、《Android開發(fā)入門與進(jìn)階教程》、《Android資源操作技巧匯總》及《Android控件用法總結(jié)》
希望本文所述對大家Android程序設(shè)計有所幫助。
您可能感興趣的文章:
- Android實現(xiàn)固定屏幕顯示的方法
- Android側(cè)滑導(dǎo)航欄的實例代碼
- Android編程實現(xiàn)點擊鏈接打開APP功能示例
- Android編程使用android-support-design實現(xiàn)MD風(fēng)格對話框功能示例
- Android編程實現(xiàn)的簡易路徑導(dǎo)航條功能示例
- Android編程實現(xiàn)ActionBar的home圖標(biāo)動畫切換效果
- Android 屏幕切換監(jiān)聽的實例代碼
- Android SQLite數(shù)據(jù)庫中的表詳解
- Android實現(xiàn)第三方登錄的上拉展開，下拉隱藏，下拉隱藏示例
- 詳解Android應(yīng)用開發(fā)--MP3音樂播放器代碼實現(xiàn)（一）
- Android6.0 固定屏幕功能實現(xiàn)方法及實例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android截取指定View為圖片的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
android:layout_gravity和android:gravity的區(qū)別
本篇文章主要介紹了android中g(shù)iavity和layout_gravity的區(qū)別。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
Android開發(fā)中synchronized的三種使用方式詳解
這篇文章主要介紹了Android開發(fā)中synchronized的三種使用方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了Android使用剪切板傳遞數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
使用Jetpack Compose實現(xiàn)翻轉(zhuǎn)卡片效果流程詳解
Jetpack Compose 是一款基于 Kotlin 的聲明式 UI 工具包，可以方便地創(chuàng)建漂亮的用戶界面。使用 Compose 的動畫 API 和可繪制 API，可以輕松實現(xiàn)翻轉(zhuǎn)卡片效果。通過設(shè)置旋轉(zhuǎn)角度和透明度等屬性，可以使卡片沿著 Y 軸翻轉(zhuǎn)，并實現(xiàn)翻頁效果2023-05-05
這篇文章主要為大家介紹了基于Android?Kotlin高頻面試題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家詳細(xì)介紹了android驗證郵箱輸入是否合法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了Android 三種動畫詳解及簡單實例的相關(guān)資料,需要的朋友可以參考下2017-04-04
Android中context可以作很多操作，但是最主要的功能是加載和訪問資源,下面詳解了解一下它的使用方法2014-02-02
這篇文章主要介紹了Android路由框架ARouter分析,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07