Android编程使用自定义View实现水波进度效果示例
本文实例讲述了Android编程使用自定义View实现水波进度效果。分享给大家供大家参考，具体如下：
首先上效果图：
简介：
1.自动适应屏幕大小；
2.水波自动横向滚动；
3.各种绘制参数可通过修改常量进行控制。
代码不多，注释也比较详细，全部贴上：
（一）自定义组件：
/**
* 水波进度效果.
*/
public class WaterWaveView extends View {
//边框宽度
private int STROKE_WIDTH;
//组件的宽，高
private int width, height;
/**
* 进度条最大值和当前进度值
*/
private float max, progress;
/**
* 绘制波浪的画笔
*/
private Paint progressPaint;
//波纹振幅与半径之比。(建议设置：<0.1)
private static final float A = 0.05f;
//绘制文字的画笔
private Paint textPaint;
//绘制边框的画笔
private Paint circlePaint;
/**
* 圆弧圆心位置
*/
private int centerX, centerY;
//内圆所在的矩形
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;
//每一个像素对应的弧度数
private float RADIANS_PER_X;
//去除边框后的半径（即内圆半径）
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));
//只计算内圆内部的点，边框上的忽略
if (calDistance(x, y, centerX, centerY) > VALID_RADIUS) {
if (x < centerX) {
continue; //左边框,继续循环
} else {
break; //右边框,结束循环
}
}
//第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));
}
//根据当前位置，计算出进度条已经转过的角度。
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();
}
//直接设置进度值（同步）
public void setProgressSync(float progress) {
this.progress = progress;
invalidate();
}
/**
* 自动刷新页面，创造水波效果。组件销毁后该线城将自动停止。
*/
private void autoRefresh() {
new Thread(new Runnable() {
@Override
public void run() {
while (!detached) {
xOffset += (VALID_RADIUS >> 4);
SystemClock.sleep(100);
postInvalidate();
}
}
}).start();
}
//标记View是否已经销毁
private boolean detached = false;
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
detached = true;
}
}
（二）使用方法：
在xml布局中引入上述组件，然后在activity或fragment中设置属性：
WaterWaveView bar = (WaterWaveView) getActivity().findViewById(R.id.water_wave_view);
bar.setMax(500);
bar.setProgressSync(361.8f);
更多关于Android相关内容感兴趣的读者可查看本站专题：《Android开发动画技巧汇总》、《Android编程之activity操作技巧总结》、《Android视图View技巧总结》、《Android布局layout技巧总结》、《Android开发入门与进阶教程》、《Android资源操作技巧汇总》及《Android控件用法总结》
希望本文所述对大家Android程序设计有所帮助。
以上是 Android编程使用自定义View实现水波进度效果示例 的全部内容， 来源链接： utcz.com/z/329683.html
