Android自定义圆形的波浪百分比进度
先上效果图
自定义代码如下：
package com.langteng.courtesy.customview;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;
//作者： 冯浩 on 2019/1/23 09:36
// _ooOoo_
// o8888888o
// 88" . "88
// (| ^_^ |)
// O\ = /O
// ____/`---'\____
// .' \\| |// `.
// / \\||| : |||// \
// / _||||| -:- |||||- \
// | | \\\ - /// | |
// | \_| ''\---/'' | |
// \ .-\__ `-` ___/-. /
// ___`. .' /--.--\ `. . ___
// ."" '< `.___\_<|>_/___.' >'"".
// | | : `- \`.;`\ _ /`;.`/ - ` : | |
// \ \ `-. \_ __\ /__ _/ .-` / /
// ========`-.____`-.___\_____/___.-`____.-'========
// `=---='
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// 佛祖保佑 永无BUG 永不修改
// 程序员之歌 作者:冯浩（字：德明）
// 十年生死两茫茫 ，写程序，到天亮。
// 千行代码 ，Bug何处藏 ？
// 纵使上线又怎样 ，朝令改 ，夕断肠。
//
// 领导每天新想法 ，日日改 ，夜夜忙。
// 相顾无言 ，唯有泪千行。
// 每晚灯火阑珊处 ，夜难寐 ，加班狂。
// ************************************************************************************************
public class WaveProgressView extends View {
private static final float DEFAULT_AMPLITUDE_RATIO = 0.05f;
private static final float DEFAULT_WATER_LEVEL_RATIO = 0.5f;
private static final float DEFAULT_WAVE_LENGTH_RATIO = 1.0f;
private static final float DEFAULT_WAVE_SHIFT_RATIO = 0.0f;
public static final int DEFAULT_BEHIND_WAVE_COLOR = Color.parseColor("#28FFFFFF");
public static final int DEFAULT_FRONT_WAVE_COLOR = Color.parseColor("#3CFFFFFF");
public static final ShapeType DEFAULT_WAVE_SHAPE = ShapeType.CIRCLE;
private boolean showBehindLine = true;
public enum ShapeType {
CIRCLE,
SQUARE
}
// if true, the shader will display the wave
private boolean mShowWave;
// shader containing repeated waves
private BitmapShader mWaveShader;
// shader matrix
private Matrix mShaderMatrix;
// paint to draw wave
private Paint mViewPaint;
// paint to draw border
private Paint mBorderPaint;//边界画笔
// paint to draw backgroup
private Paint mBgPaint; //背景画笔
private float mDefaultAmplitude;
private float mDefaultWaterLevel;
private float mDefaultWaveLength;
private double mDefaultAngularFrequency;
private float mAmplitudeRatio = DEFAULT_AMPLITUDE_RATIO;
private float mWaveLengthRatio = DEFAULT_WAVE_LENGTH_RATIO;
private float mWaterLevelRatio = DEFAULT_WATER_LEVEL_RATIO;
private float mWaveShiftRatio = DEFAULT_WAVE_SHIFT_RATIO;
private int mBehindWaveColor = DEFAULT_BEHIND_WAVE_COLOR;
private int mFrontWaveColor = DEFAULT_FRONT_WAVE_COLOR;
private ShapeType mShapeType = DEFAULT_WAVE_SHAPE;
public WaveProgressView(Context context) {
super(context);
init();
}
public WaveProgressView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public WaveProgressView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
mShaderMatrix = new Matrix();
mViewPaint = new Paint();
mViewPaint.setAntiAlias(true);
mBgPaint = new Paint();
mBgPaint.setAntiAlias(true);
/**默认背景色---淡黄色*/
mBgPaint.setColor(0xff282828);
}
public float getWaveShiftRatio() {
return mWaveShiftRatio;
}
/**
* Shift the wave horizontally according to waveShiftRatio.
*
* @param waveShiftRatio Should be 0 ~ 1. Default to be 0.
*
Result of waveShiftRatio multiples width of WaveView is the length to shift.
*/
public void setWaveShiftRatio(float waveShiftRatio) {
if (mWaveShiftRatio != waveShiftRatio) {
mWaveShiftRatio = waveShiftRatio;
invalidate();
}
}
public float getWaterLevelRatio() {
return mWaterLevelRatio;
}
/**
* Set water level according to waterLevelRatio.
*
* @param waterLevelRatio Should be 0 ~ 1. Default to be 0.5.
*
Ratio of water level to WaveView height.
*/
public void setWaterLevelRatio(float waterLevelRatio) {
if (mWaterLevelRatio != waterLevelRatio) {
mWaterLevelRatio = waterLevelRatio;
invalidate();
}
}
public float getAmplitudeRatio() {
return mAmplitudeRatio;
}
/**
* Set vertical size of wave according to amplitudeRatio
*
* @param amplitudeRatio Default to be 0.05. Result of amplitudeRatio + waterLevelRatio should be less than 1.
*
Ratio of amplitude to height of WaveView.
*/
public void setAmplitudeRatio(float amplitudeRatio) {
if (mAmplitudeRatio != amplitudeRatio) {
mAmplitudeRatio = amplitudeRatio;
invalidate();
}
}
public float getWaveLengthRatio() {
return mWaveLengthRatio;
}
/**
* Set horizontal size of wave according to waveLengthRatio
*
* @param waveLengthRatio Default to be 1.
*
Ratio of wave length to width of WaveView.
*/
public void setWaveLengthRatio(float waveLengthRatio) {
mWaveLengthRatio = waveLengthRatio;
}
public boolean isShowWave() {
return mShowWave;
}
public void setShowWave(boolean showWave) {
mShowWave = showWave;
}
public void setBorder(int width, int color) {
if (mBorderPaint == null) {
mBorderPaint = new Paint();
mBorderPaint.setAntiAlias(true);
mBorderPaint.setStyle(Paint.Style.STROKE);
}
mBorderPaint.setColor(color);
mBorderPaint.setStrokeWidth(width);
invalidate();
}
public void setWaveColor(int behindWaveColor, int frontWaveColor) {
mBehindWaveColor = behindWaveColor;
mFrontWaveColor = frontWaveColor;
if (getWidth() > 0 && getHeight() > 0) {
// need to recreate shader when color changed
mWaveShader = null;
createShader();
invalidate();
}
}
public void setShapeType(ShapeType shapeType) {
mShapeType = shapeType;
invalidate();
}
public void setShowBehindLine(boolean showBehindLine){
this.showBehindLine = showBehindLine;
invalidate();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
createShader();
}
/**
* Create the shader with default waves which repeat horizontally, and clamp vertically
*/
private void createShader() {
mDefaultAngularFrequency = 2.0f * Math.PI / DEFAULT_WAVE_LENGTH_RATIO / getWidth();
mDefaultAmplitude = getHeight() * DEFAULT_AMPLITUDE_RATIO;
mDefaultWaterLevel = getHeight() * DEFAULT_WATER_LEVEL_RATIO;
mDefaultWaveLength = getWidth();
Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint wavePaint = new Paint();
wavePaint.setStrokeWidth(2);
wavePaint.setAntiAlias(true);
// Draw default waves into the bitmap
// y=Asin(ωx+φ)+h
final int endX = getWidth() + 1;
final int endY = getHeight() + 1;
float[] waveY = new float[endX];
wavePaint.setColor(mBehindWaveColor);
for (int beginX = 0; beginX < endX; beginX++) {
double wx = beginX * mDefaultAngularFrequency;
float beginY = (float) (mDefaultWaterLevel + mDefaultAmplitude * Math.sin(wx));
if(showBehindLine){
canvas.drawLine(beginX, beginY, beginX, endY, wavePaint);
}
waveY[beginX] = beginY;
}
wavePaint.setColor(mFrontWaveColor);
final int wave2Shift = (int) (mDefaultWaveLength / 4);
for (int beginX = 0; beginX < endX; beginX++) {
canvas.drawLine(beginX, waveY[(beginX + wave2Shift) % endX], beginX, endY, wavePaint);
}
// use the bitamp to create the shader
mWaveShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);
mViewPaint.setShader(mWaveShader);
}
@Override
protected void onDraw(Canvas canvas) {
// modify paint shader according to mShowWave state
if (mShowWave && mWaveShader != null) {
// first call after mShowWave, assign it to our paint
if (mViewPaint.getShader() == null) {
mViewPaint.setShader(mWaveShader);
}
// sacle shader according to mWaveLengthRatio and mAmplitudeRatio
// this decides the size(mWaveLengthRatio for width, mAmplitudeRatio for height) of waves
mShaderMatrix.setScale(
mWaveLengthRatio / DEFAULT_WAVE_LENGTH_RATIO,
mAmplitudeRatio / DEFAULT_AMPLITUDE_RATIO,
0,
mDefaultWaterLevel);
// translate shader according to mWaveShiftRatio and mWaterLevelRatio
// this decides the start position(mWaveShiftRatio for x, mWaterLevelRatio for y) of waves
mShaderMatrix.postTranslate(
mWaveShiftRatio * getWidth(),
(DEFAULT_WATER_LEVEL_RATIO - mWaterLevelRatio) * getHeight());
// assign matrix to invalidate the shader
mWaveShader.setLocalMatrix(mShaderMatrix);
float borderWidth = mBorderPaint == null ? 0f : mBorderPaint.getStrokeWidth();
switch (mShapeType) {
case CIRCLE:
if (borderWidth > 0) {
canvas.drawCircle(getWidth() / 2f, getHeight() / 2f,
(getWidth() - borderWidth) / 2f - 1f, mBorderPaint);
}
float radius = getWidth() / 2f - borderWidth;
canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, radius, mBgPaint);
canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, radius, mViewPaint);
break;
case SQUARE:
if (borderWidth > 0) {
canvas.drawRect(
borderWidth / 2f,
borderWidth / 2f,
getWidth() - borderWidth / 2f - 0.5f,
getHeight() - borderWidth / 2f - 0.5f,
mBorderPaint);
}
canvas.drawRect(borderWidth, borderWidth, getWidth() - borderWidth,
getHeight() - borderWidth, mViewPaint);
break;
}
} else {
mViewPaint.setShader(null);
}
}
}
//布局中代码
//界面中动态改变数值以及颜色
WaveProgressView mWaveProgressView = (WaveProgressView) helper.getView(R.id.progress);
mWaveProgressView.setShapeType(WaveProgressView.ShapeType.CIRCLE);
/**绘制边界线的宽及颜色，不需要的可以注销，此处默认宽4，白色*/
mWaveProgressView.setBorder(4, 0xffffffff);
/**是否显示双线*/
mWaveProgressView.setShowBehindLine(false);
mWaveHelper = new WaveHelper(mWaveProgressView);
// mWaveProgressView.setWaterLevelRatio(0.1F);
mWaveProgressView.setWaterLevelRatio(Float.parseFloat(item.getProportion()) / 100f);
mWaveHelper.start();
if (helper.getPosition() > getArgb().size()) {
mWaveProgressView.setWaveColor(
Color.parseColor("#fff7bfc0"),//波浪线上（淡紫色）setShowBehindLine为true时显示,false不显示
getArgb().get(helper.getPosition() - getArgb().size()));//波浪线下（橘黄色）
} else {
mWaveProgressView.setWaveColor(
Color.parseColor("#fff7bfc0"),//波浪线上（淡紫色）setShowBehindLine为true时显示,false不显示
getArgb().get(helper.getPosition()));//波浪线下（橘黄色）
}
}
private List getArgb() {
List argbs = new ArrayList<>();
argbs.add(Color.argb(255, 253, 177, 49));
argbs.add(Color.argb(255, 126, 185, 255));
argbs.add(Color.argb(255, 80, 227, 194));
argbs.add(Color.argb(255, 255, 94, 98));
argbs.add(Color.argb(255, 157, 221, 85));
argbs.add(Color.argb(255, 198, 158, 255));
return argbs;
}