package com.example.wh.myapplication;  import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.support.annotation.Nullable;import android.support.v4.content.ContextCompat;import android.util.AttributeSet;import android.view.View; import java.text.DecimalFormat;public class WaveView extends View {  /** * 默認(rèn)波浪1長(zhǎng)度 */ private final int WAVE_LENGTH1 = 600;  /** * 默認(rèn)波浪1高度 */ private final int WAVE_HEIGHT1 = 30;  /** * 波浪1高度 */ private int mWaveHeight1 = WAVE_HEIGHT1;  /** * 波浪1長(zhǎng)度 */ private int mWaveLenght1 = WAVE_LENGTH1;  /** * 默認(rèn)波浪1顏色 */ private final int WAVE_COLOR1 = Color.parseColor("#0000ff");  /** * 默認(rèn)邊框顏色 */ private final int BORDER_COLOR = Color.parseColor("#800000ff");  /** * 默認(rèn)文字顏色 */ private final int DEFAULT_TEXT_COLOR = Color.parseColor("#ff0000"); /** * 默認(rèn)文字大小 */ private final int DEFAULT_TEXT_SIZE = 30;  /** * 文字顏色 */ private int mTextColor = DEFAULT_TEXT_COLOR; /** * 文字大小 */ private int mTextSize = DEFAULT_TEXT_SIZE;  /** * 波浪1顏色 */ private int mWaveColor1 = WAVE_COLOR1;  /** * 默認(rèn)每一次重繪時(shí)波峰1的移動(dòng)的距離，實(shí)現(xiàn)移動(dòng)效果 */ private final int WAVE_OFFSET1 = 8;  /** * 每一次重繪時(shí)波峰1的移動(dòng)的距離，實(shí)現(xiàn)移動(dòng)效果 */ private int mOffset1 = WAVE_OFFSET1;  /** * 默認(rèn)邊框?qū)挾?*/ private final int BORDER_WIDTH = 2;  /** * 邊框顏色 */ private int mBorderColor = BORDER_COLOR;  /** * 邊框?qū)挾?*/ private int mBorderWidth = BORDER_WIDTH;  /** * 繪制的高度，百分比。0表示內(nèi)有高度，1表示全部高度 */ private float mPrecent = 0.5f;  /** * 形狀枚舉，暫時(shí)只支持矩形和圓形，可擴(kuò)展 */ public enum ShowShape { RECT }  /** * 形狀默認(rèn)矩形 */ private ShowShape mShape = ShowShape.RECT;  /** * 默認(rèn)兩次重繪之間間隔的時(shí)間，5毫秒 */ private final int DEFAULT_TIME = 5;  /** * 兩次重繪之間間隔的時(shí)間，毫秒。 */ private int mTime = DEFAULT_TIME;  /** * 設(shè)置兩次重繪之間的間隔時(shí)間，毫秒 * * @param time * @return */ public WaveView setTime(int time) { this.mTime = time; return this; }  /** * 波浪1畫筆 */ private Paint mWavePaint1;  /** * 邊框畫筆 */ private Paint mBorderPaint; /** * 文字畫筆 */ private Paint mTextPaint;  /** * 波浪1路徑 */ private Path mWavePath1;  /** * 定義數(shù)字格式轉(zhuǎn)行類 */ private DecimalFormat mFormat;  /** * 控件的寬度 */ private int mWidth; /** * 控件的高度 */ private int mHeight;  /** * 水位上升時(shí)不斷變化的 y 坐標(biāo) */ private float mChangeY;  /** * 水位最終的高度，通過控件的高度和百分比計(jì)算出來 */ private float mFinalY;  /** * 波峰的個(gè)數(shù) */ private int mWaveCount = 8;  /** * 重置標(biāo)記，開始為重置狀態(tài) */ private boolean isReset = true;   /** * 當(dāng)前百分比 */ private float mCurrentPrecent = 0.0f;  /** * 重繪值波峰移動(dòng)距離的和 */ private int mMoveSum1;  /** * 能夠繪制標(biāo)記位，開始不能繪制 */ private boolean invalidateFlag = false;  /** * 百分比改變監(jiān)聽 */ private PrecentChangeListener mPrecentChangeListener;   /** * 百分比改變監(jiān)聽接口 */ public interface PrecentChangeListener { /**  * 百分比發(fā)生改變時(shí)調(diào)用的方法  *  * @param precent 當(dāng)前的百分比，格式 0.00 范圍 [0.00 , 1.00]  */ void precentChange(double precent); }   public WaveView(Context context) { this(context, null); }  public WaveView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); }  public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);  initAttrs(context, attrs); // 獲取布局文件中dingy9i的屬性 init(); }  //獲取布局中的初始屬性 private void initAttrs(Context context, AttributeSet attrs) { TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaveView); mWaveLenght1 = typedArray.getInteger(R.styleable.WaveView_wave1Length, WAVE_LENGTH1); mWaveHeight1 = typedArray.getInteger(R.styleable.WaveView_wave1Height, WAVE_HEIGHT1); mWaveColor1 = typedArray.getColor(R.styleable.WaveView_wave1Color, WAVE_COLOR1); mOffset1 = typedArray.getInteger(R.styleable.WaveView_wave1Offset, WAVE_OFFSET1);  mBorderWidth = typedArray.getDimensionPixelSize(R.styleable.WaveView_borderWidth, BORDER_WIDTH); mBorderColor = typedArray.getColor(R.styleable.WaveView_borderColor, BORDER_COLOR);  mTime = typedArray.getInteger(R.styleable.WaveView_intervalTime, DEFAULT_TIME); mPrecent = typedArray.getFloat(R.styleable.WaveView_precent, 0.5f); /**  * 繪制的高度，百分比。0表示內(nèi)有高度，1表示全部高度  */ int shapeValue = typedArray.getInteger(R.styleable.WaveView_showShape, 0);  mShape = ShowShape.RECT; typedArray.recycle(); }  private void init() { mWavePaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); mBorderPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  mWavePath1 = new Path();  mWavePaint1.setColor(mWaveColor1); mWavePaint1.setStyle(Paint.Style.FILL);  mBorderPaint.setColor(mBorderColor); mBorderPaint.setStrokeWidth(mBorderWidth); mBorderPaint.setStyle(Paint.Style.STROKE);   mTextPaint.setColor(mTextColor); mTextPaint.setTextSize(mTextSize);  // 定義數(shù)字顯示個(gè)格式 mFormat = new DecimalFormat("###,###,##0.00"); }  @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h;  mChangeY = mHeight; // 計(jì)算波峰個(gè)數(shù)，為了實(shí)現(xiàn)移動(dòng)效果，保證至少繪制兩個(gè)波峰 mFinalY = (1 - mPrecent) * mHeight; // 計(jì)算水位最終高度 }  @Override protected void onDraw(Canvas canvas) { mWavePath1.reset();   if (mBorderWidth > 0) {  // 邊框大于0,表示需要繪制邊框  if(mShape == ShowShape.RECT) {  canvas.drawRect(0, 0, mWidth, mHeight, mBorderPaint);  } }  mWavePath1.moveTo(-mWaveLenght1, mChangeY);  if (!isReset) { // 判斷重置標(biāo)記  // 利用貝塞爾曲線繪制波浪  for (int i = 0; i < mWaveCount; i++) {  // 繪制波浪1的曲線  mWavePath1.quadTo((-mWaveLenght1 * 3 / 4) + (i * mWaveLenght1) + mMoveSum1, mChangeY + mWaveHeight1, (-mWaveLenght1 / 2) + (i * mWaveLenght1) + mMoveSum1, mChangeY);  mWavePath1.quadTo((-mWaveLenght1 * 1 / 4) + (i * mWaveLenght1) + mMoveSum1, mChangeY - mWaveHeight1, (i * mWaveLenght1) + mMoveSum1, mChangeY);   }   // 不斷改變高度，實(shí)現(xiàn)逐漸水位逐漸上漲效果  mChangeY -= 1;  if (mChangeY < mFinalY) mChangeY = mFinalY;   // 波峰1往右移動(dòng)，波峰2往左移動(dòng)  mMoveSum1 += mOffset1;  if (mMoveSum1 >= mWaveLenght1) mMoveSum1 = 0;   // 填充矩形，讓上漲之后的水位下面填充顏色  mWavePath1.lineTo(mWidth, mHeight);  mWavePath1.lineTo(0, mHeight);  mWavePath1.close();   canvas.drawPath(mWavePath1, mWavePaint1); } else {  // 是重置  canvas.drawColor(Color.TRANSPARENT); }  // 計(jì)算當(dāng)前的百分比 mCurrentPrecent = 1 - mChangeY / mHeight; // 格式化數(shù)字格式 String format1 = mFormat.format(mCurrentPrecent); // 繪制文字，將百分比繪制到界面。此處用的是 "50%" 的形式，可以根據(jù)需求改變格式 double parseDouble = Double.parseDouble(format1); canvas.drawText((int) (parseDouble * 100) + " %", (mWidth - mTextPaint.measureText(format1)) / 2, mHeight / 5, mTextPaint); // 監(jiān)聽對(duì)象不為null并且沒有達(dá)到設(shè)置高度時(shí)，調(diào)用監(jiān)聽方法 if (mPrecentChangeListener != null && mChangeY != mFinalY) {  mPrecentChangeListener.precentChange(parseDouble); }  //高度到達(dá)設(shè)置高度 if (mChangeY == mFinalY){  canvas.drawColor(ContextCompat.getColor(getContext(), R.color.bowencolor)); }  // 判斷繪制標(biāo)記 if (invalidateFlag) postInvalidateDelayed(mTime); }  /** * 設(shè)置邊框?qū)挾?* * @param borderWidth * @return */ public WaveView setBorderWidth(int borderWidth) { this.mBorderWidth = borderWidth; return this; }  /** * 設(shè)置波浪1顏色 * * @param waveColor1 * @return */ public WaveView setWaveColor1(int waveColor1) { this.mWaveColor1 = waveColor1; return this; }  /** * 設(shè)置邊框顏色 * * @param borderColor * @return */ public WaveView setBorderColor(int borderColor) { this.mBorderColor = borderColor; return this; }  /** * 設(shè)置文字顏色 * * @param textColor * @return */ public WaveView setTextColor(int textColor) { this.mTextColor = textColor; return this; }  /** * 設(shè)置百分比 * * @param precent * @return */ public WaveView setPrecent(float precent) { this.mPrecent = precent; return this; }   /** * 設(shè)置文字大小 * * @param textSize * @return */ public WaveView setTextSize(int textSize) { this.mTextSize = textSize; return this; }   /** * 設(shè)置當(dāng)前顯示形狀 * * @param shape * @return */ public WaveView setShape(ShowShape shape) { this.mShape = shape; return this; }  /** * 開始 */ public void start() { invalidateFlag = true; isReset = false; postInvalidateDelayed(mTime); }  /** * 暫停 */ public void stop() { invalidateFlag = false; isReset = false; }  /** * 重置 */ public void reset() { invalidateFlag = false; isReset = true; mChangeY = mHeight; postInvalidate(); }}

<?xml version="1.0" encoding="utf-8"?><resources> <!--自定義水波紋效果屬性--> <declare-styleable name="WaveView"> <!--波浪1的長(zhǎng)度、高度、顏色和每次重繪的偏移量--> <attr name="wave1Length" format="integer" /> <attr name="wave1Height" format="integer" /> <attr name="wave1Color" format="color" /> <attr name="wave1Offset" format="integer" />  <!--邊框的寬度和顏色--> <attr name="borderWidth" format="dimension" /> <attr name="borderColor" format="color" /> <!--文字的大小和顏色--> <attr name="textColor" format="color" /> <attr name="textSize" format="dimension" /> <!--水位高度的百分比--> <attr name="precent" format="float" /> <!--兩次重繪的間隔時(shí)間--> <attr name="intervalTime" format="integer" /> <!--控件的顯示形狀，rect矩形、circle圓形--> <attr name="showShape" format="enum">  <enum name="rect" value="0" />  <enum name="circle" value="1" /> </attr> </declare-styleable></resources>

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.wh.myapplication.MainActivity">  <com.example.wh.myapplication.WaveView android:id="@+id/waveview1" android:layout_width="200dp" android:layout_height="200dp" />  <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="30dp" android:orientation="horizontal">  <Button  android:id="@+id/bt_start"  android:layout_width="0dp"  android:layout_height="wrap_content"  android:layout_weight="1"  android:text="開始"/>  <Button  android:id="@+id/bt_stop"  android:layout_width="0dp"  android:layout_height="wrap_content"  android:layout_weight="1"  android:text="暫停"/>  <Button  android:id="@+id/bt_reset"  android:layout_width="0dp"  android:layout_height="wrap_content"  android:layout_weight="1"  android:text="重置"/> </LinearLayout></LinearLayout>

package com.example.wh.myapplication; import android.graphics.Color;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button; public class MainActivity extends AppCompatActivity {  private WaveView waveview1; private Button btStart; private Button btStop; private Button btReset;  @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);  waveview1 = (WaveView) findViewById(R.id.waveview1);  btStart = (Button) findViewById(R.id.bt_start); btStop = (Button) findViewById(R.id.bt_stop); btReset = (Button) findViewById(R.id.bt_reset);  // 代碼設(shè)置相關(guān)屬性 waveview1.setBorderWidth(2)  .setWaveColor1(Color.RED)  .setBorderColor(Color.GREEN)  .setTextColor(Color.BLUE)  .setShape(WaveView.ShowShape.RECT)  .setTextSize(36)  .setPrecent(1f)//設(shè)置水波紋的百分比  .setTime(2);  btStart.setOnClickListener(new View.OnClickListener() {  @Override  public void onClick(View v) {  waveview1.start();  } });  btStop.setOnClickListener(new View.OnClickListener() {  @Override  public void onClick(View v) {  waveview1.stop();  } });  btReset.setOnClickListener(new View.OnClickListener() {  @Override  public void onClick(View v) {  waveview1.reset();  } }); }}