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（）;}@Overrideprotected 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;@Overrideprotected 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~180float endDegree = calDegreeByPosition（endPoint[0], endPoint[1]）; //180~360wavePath.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（） {@Overridepublic void run（） {while （！detached） {xOffset += （VALID_RADIUS >> 4）;SystemClock.sleep（100）;postInvalidate（）;}}}）.start（）;}//标记View是否已经销毁private boolean detached = false;@Overrideprotected 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程序设计有所帮助。