本文实例讲述了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程序设计有所帮助。
如对本文有疑问， 点击进行留言回复！！
Codeforces C. A Cookie for You (模拟 / 分类 / 贪心) (Round #654 Div.2)
DialogFragment弹窗（带黑色透明背景和不带黑色透明背景）
网友评论