地震波紋效果_SeismiWaveView

自定義地震波紋效果 SeismiWaveView

效果如圖所示

代碼還是比較簡單的

package com.csdn.icoder.rswork.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import java.util.ArrayList;

/**
 * Created by icoder on 15/9/20.
 */
public class SeismiWaveView extends View {

    /**
     * 畫筆
     */
    private Paint mPaint;

    /**
     * 圓環的最大直徑
     */
    private boolean isGoing = false;

    /**
     * 圓環的最大直徑
     */
    private final int MAXWIDTH = 255;
    /**
     * 圓環的透明度
     */
    private ArrayList<String> mAlphaLists = new ArrayList<String>();

    /**
     * 圓環的d
     */
    private ArrayList<String> mWidthList = new ArrayList<String>();


    public SeismiWaveView(Context context) {
        this(context, null);
    }

    public SeismiWaveView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SeismiWaveView (Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.BLUE);
        mAlphaLists.add("255");
        mWidthList.add("0");
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        this.setBackgroundColor(Color.TRANSPARENT);
        for (int i = 0; i < mAlphaLists.size(); i++) {
            int alpha = Integer.parseInt(mAlphaLists.get(i));
            int width = Integer.parseInt(mWidthList.get(i));

            mPaint.setAlpha(alpha);
            canvas.drawCircle(getWidth() / 2, getHeight() / 2, width, mPaint);

            if (isGoing && alpha > 0 && width < MAXWIDTH) {
                mAlphaLists.set(i, alpha - 1 + "");
                mWidthList.set(i, (width + 1) + "");
            }
        }
        //當從圓心出來的圓環到達1/5的時候,添加一個圓環
        if (isGoing&&Integer.parseInt(mWidthList.get(mWidthList.size()-1))==MAXWIDTH/5)
        {
            mAlphaLists.add("255");
            mWidthList.add("0");
        }
        //當圓的個數達到6個的時候，把最外面的移除掉
        if (isGoing&&mWidthList.size()==6)
        {
            mAlphaLists.remove(0);
            mWidthList.remove(0);
        }
        invalidate();

    }

    public void stop() {
        isGoing = false;
    }

    public void start() {
        isGoing = true;
    }

    public boolean isGoing() {
        return isGoing;
    }

}

在xml的佈局如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.csdn.icoder.rswork.widget.SeismicWaveView
            android:id="@+id/mSeismicWaveView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <ImageView
            android:id="@+id/img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@mipmap/ic_launcher" />
    </RelativeLayout>

</LinearLayout>

java中的調用如下

        btn = (Button) findViewById(R.id.btn);
        mSeismicWaveView = (SeismicWaveView) findViewById(R.id.mSeismicWaveView);
        btn.setText("開始");
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mSeismicWaveView.isGoing()) {
                    btn.setText("繼續");
                    mSeismicWaveView.stop();
                } else {
                    btn.setText("停止");
                    mSeismicWaveView.start();
                }
            }
        });

that’s all ,thx~