怎么在android中自定義一個波浪加載動畫

這篇文章給大家介紹怎么在android中自定義一個波浪加載動畫，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

Android是什么

Android是一種基于Linux內核的自由及開放源代碼的操作系統，主要使用于移動設備，如智能手機和平板電腦，由美國Google公司和開放手機聯盟領導及開發。

1.自定義控件 WaveView

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 {
 
 /**
 * 默認波浪1長度
 */
 private final int WAVE_LENGTH1 = 600;
 
 /**
 * 默認波浪1高度
 */
 private final int WAVE_HEIGHT1 = 30;
 
 /**
 * 波浪1高度
 */
 private int mWaveHeight1 = WAVE_HEIGHT1;
 
 /**
 * 波浪1長度
 */
 private int mWaveLenght1 = WAVE_LENGTH1;
 
 /**
 * 默認波浪1顏色
 */
 private final int WAVE_COLOR1 = Color.parseColor("#0000ff");
 
 /**
 * 默認邊框顏色
 */
 private final int BORDER_COLOR = Color.parseColor("#800000ff");
 
 /**
 * 默認文字顏色
 */
 private final int DEFAULT_TEXT_COLOR = Color.parseColor("#ff0000");
 /**
 * 默認文字大小
 */
 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;
 
 /**
 * 默認每一次重繪時波峰1的移動的距離，實現移動效果
 */
 private final int WAVE_OFFSET1 = 8;
 
 /**
 * 每一次重繪時波峰1的移動的距離，實現移動效果
 */
 private int mOffset1 = WAVE_OFFSET1;
 
 /**
 * 默認邊框寬度
 */
 private final int BORDER_WIDTH = 2;
 
 /**
 * 邊框顏色
 */
 private int mBorderColor = BORDER_COLOR;
 
 /**
 * 邊框寬度
 */
 private int mBorderWidth = BORDER_WIDTH;
 
 /**
 * 繪制的高度，百分比。0表示內有高度，1表示全部高度
 */
 private float mPrecent = 0.5f;
 
 /**
 * 形狀枚舉，暫時只支持矩形和圓形，可擴展
 */
 public enum ShowShape {
 RECT
 }
 
 /**
 * 形狀默認矩形
 */
 private ShowShape mShape = ShowShape.RECT;
 
 /**
 * 默認兩次重繪之間間隔的時間，5毫秒
 */
 private final int DEFAULT_TIME = 5;
 
 /**
 * 兩次重繪之間間隔的時間，毫秒。
 */
 private int mTime = DEFAULT_TIME;
 
 /**
 * 設置兩次重繪之間的間隔時間，毫秒
 *
 * @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 mWavePath2;
 
 /**
 * 定義數字格式轉行類
 */
 private DecimalFormat mFormat;
 
 /**
 * 控件的寬度
 */
 private int mWidth;
 /**
 * 控件的高度
 */
 private int mHeight;
 
 /**
 * 水位上升時不斷變化的 y 坐標
 */
 private float mChangeY;
 
 /**
 * 水位最終的高度，通過控件的高度和百分比計算出來
 */
 private float mFinalY;
 
 /**
 * 波峰的個數
 */
 private int mWaveCount = 8;
 
 /**
 * 重置標記，開始為重置狀態
 */
 private boolean isReset = true;
 
 
 /**
 * 當前百分比
 */
 private float mCurrentPrecent = 0.0f;
 
 /**
 * 重繪值波峰移動距離的和
 */
 private int mMoveSum1;
 
 /**
 * 能夠繪制標記位，開始不能繪制
 */
 private boolean invalidateFlag = false;
 
 /**
 * 百分比改變監聽
 */
 private PrecentChangeListener mPrecentChangeListener;
 
 
 /**
 * 百分比改變監聽接口
 */
 public interface PrecentChangeListener {
 /**
  * 百分比發生改變時調用的方法
  *
  * @param precent 當前的百分比，格式 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表示內有高度，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);
 
 mWavePath2 = 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);
 
 // 定義數字顯示個格式
 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;
 // 計算波峰個數，為了實現移動效果，保證至少繪制兩個波峰
 mFinalY = (1 - mPrecent) * mHeight; // 計算水位最終高度
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 mWavePath2.reset();
 
 
 if (mBorderWidth > 0) {
  // 邊框大于0,表示需要繪制邊框
  if(mShape == ShowShape.RECT) {
  canvas.drawRect(0, 0, mWidth, mHeight, mBorderPaint);
  }
 }
 
 mWavePath2.moveTo(-mWaveLenght1, mChangeY);
 
 if (!isReset) { // 判斷重置標記
  // 利用貝塞爾曲線繪制波浪
  for (int i = 0; i < mWaveCount; i++) {
  // 繪制波浪1的曲線
  mWavePath2.quadTo((-mWaveLenght1 * 3 / 4) + (i * mWaveLenght1) + mMoveSum1, mChangeY + mWaveHeight1, (-mWaveLenght1 / 2) + (i * mWaveLenght1) + mMoveSum1, mChangeY);
  mWavePath2.quadTo((-mWaveLenght1 * 1 / 4) + (i * mWaveLenght1) + mMoveSum1, mChangeY - mWaveHeight1, (i * mWaveLenght1) + mMoveSum1, mChangeY);
 
  }
 
  // 不斷改變高度，實現逐漸水位逐漸上漲效果
  mChangeY -= 1;
  if (mChangeY < mFinalY) mChangeY = mFinalY;
 
  // 波峰1往右移動，波峰2往左移動
  mMoveSum1 += mOffset1;
  if (mMoveSum1 >= mWaveLenght1) mMoveSum1 = 0;
 
  // 填充矩形，讓上漲之后的水位下面填充顏色
  mWavePath2.lineTo(mWidth, mHeight);
  mWavePath2.lineTo(0, mHeight);
  mWavePath2.close();
 
  canvas.drawPath(mWavePath2, mWavePaint1);
 } else {
  // 是重置
  canvas.drawColor(Color.TRANSPARENT);
 }
 
 // 計算當前的百分比
 mCurrentPrecent = 1 - mChangeY / mHeight;
 // 格式化數字格式
 String format1 = mFormat.format(mCurrentPrecent);
 // 繪制文字，將百分比繪制到界面。此處用的是 "50%" 的形式，可以根據需求改變格式
 double parseDouble = Double.parseDouble(format1);
 canvas.drawText((int) (parseDouble * 100) + " %", (mWidth - mTextPaint.measureText(format1)) / 2, mHeight / 5, mTextPaint);
 // 監聽對象不為null并且沒有達到設置高度時，調用監聽方法
 if (mPrecentChangeListener != null && mChangeY != mFinalY) {
  mPrecentChangeListener.precentChange(parseDouble);
 }
 
 //高度到達設置高度
 if (mChangeY == mFinalY){
  canvas.drawColor(ContextCompat.getColor(getContext(), R.color.bowencolor));
 }
 
 // 判斷繪制標記
 if (invalidateFlag) postInvalidateDelayed(mTime);
 }
 
 /**
 * 設置邊框寬度
 *
 * @param borderWidth
 * @return
 */
 public WaveView setBorderWidth(int borderWidth) {
 this.mBorderWidth = borderWidth;
 return this;
 }
 
 /**
 * 設置波浪1顏色
 *
 * @param waveColor1
 * @return
 */
 public WaveView setWaveColor1(int waveColor1) {
 this.mWaveColor1 = waveColor1;
 return this;
 }
 
 /**
 * 設置邊框顏色
 *
 * @param borderColor
 * @return
 */
 public WaveView setBorderColor(int borderColor) {
 this.mBorderColor = borderColor;
 return this;
 }
 
 /**
 * 設置文字顏色
 *
 * @param textColor
 * @return
 */
 public WaveView setTextColor(int textColor) {
 this.mTextColor = textColor;
 return this;
 }
 
 /**
 * 設置百分比
 *
 * @param precent
 * @return
 */
 public WaveView setPrecent(float precent) {
 this.mPrecent = precent;
 return this;
 }
 
 
 /**
 * 設置文字大小
 *
 * @param textSize
 * @return
 */
 public WaveView setTextSize(int textSize) {
 this.mTextSize = textSize;
 return this;
 }
 
 
 /**
 * 設置當前顯示形狀
 *
 * @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();
 }
}

2.attrs

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <!--自定義水波紋效果屬性-->
 <declare-styleable name="WaveView">
 <!--波浪1的長度、高度、顏色和每次重繪的偏移量-->
 <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" />
 <!--兩次重繪的間隔時間-->
 <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>

3.布局

<?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>

4.MainActivity

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);
 
 // 代碼設置相關屬性
 waveview1.setBorderWidth(2)
  .setWaveColor1(Color.RED)
  .setBorderColor(Color.GREEN)
  .setTextColor(Color.BLUE)
  .setShape(WaveView.ShowShape.RECT)
  .setTextSize(36)
  .setPrecent(1f)//設置水波紋的百分比
  .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();
  }
 });
 }
}

關于怎么在android中自定義一個波浪加載動畫就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。