android自定义波浪加载动画

效果图

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 mWavePath1;

    /**
     * 定义数字格式转行类
     */
    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);

        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);

        // 定义数字显示个格式
        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) {
        mWavePath1.reset();


        if (mBorderWidth > 0) {
            // 边框大于0,表示需要绘制边框
         if(mShape == ShowShape.RECT) {
                canvas.drawRect(0, 0, mWidth, mHeight, mBorderPaint);
            }
        }

        mWavePath1.moveTo(-mWaveLenght1, mChangeY);

        if (!isReset) { // 判断重置标记
            // 利用贝塞尔曲线绘制波浪
            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);

            }

            // 不断改变高度，实现逐渐水位逐渐上涨效果
            mChangeY -= 1;
            if (mChangeY < mFinalY) mChangeY = mFinalY;

            // 波峰1往右移动，波峰2往左移动
            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);
        }

        // 计算当前的百分比
        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  按钮水波纹效果

http://blog.csdn.net/wangxiaohuhu1314/article/details/78754584

android 一套代码编译多个APP

http://blog.csdn.net/wangxiaohuhu1314/article/details/79023514