Android 个人中心波纹效果

先看下效果：

Android 个人中心波纹效果就是波动效果。。。

晒下代码吧！

1.DynamicWave代码

public class DynamicWave  extends View {

    // 波纹颜色
    private static final int WAVE_PAINT_COLOR_1 = Color.parseColor("#80ffffff") ;
    private static final int WAVE_PAINT_COLOR_2 = Color.parseColor("#ffffff") ;
    // y = Asin(wx+b)+h
    private static final float STRETCH_FACTOR_A = 10;
    private static final int OFFSET_Y = 0;
    // 第一条水波移动速度
    private static final int TRANSLATE_X_SPEED_ONE = 7;
    // 第二条水波移动速度
    private static final int TRANSLATE_X_SPEED_TWO = 5;
    private float mCycleFactorW;

    private int mTotalWidth, mTotalHeight;
    private float[] mYPositions;
    private float[] mResetOneYPositions;
    private float[] mResetTwoYPositions;
    private int mXOffsetSpeedOne;
    private int mXOffsetSpeedTwo;
    private int mXOneOffset;
    private int mXTwoOffset;

    private Paint mWavePaintOne;
    private Paint mWavePaintTwo;

    private DrawFilter mDrawFilter;

    public DynamicWave(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 移动速度
        mXOffsetSpeedOne = TRANSLATE_X_SPEED_ONE;
        mXOffsetSpeedTwo = TRANSLATE_X_SPEED_TWO;

        // 初始绘制波纹的画笔
        mWavePaintOne = new Paint();
        mWavePaintTwo = new Paint();
        // 去除画笔锯齿
        mWavePaintOne.setAntiAlias(true);
        mWavePaintTwo.setAntiAlias(true);
        // 设置风格为实线
        mWavePaintOne.setStyle(Paint.Style.FILL);
        mWavePaintTwo.setStyle(Paint.Style.FILL);
        // 设置画笔颜色
        mWavePaintOne.setColor(WAVE_PAINT_COLOR_1);
        mWavePaintTwo.setColor(WAVE_PAINT_COLOR_2);
        mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 从canvas层面去除绘制时锯齿
        canvas.setDrawFilter(mDrawFilter);
        resetPositonY();
        for (int i = 0; i < mTotalWidth; i++) {

            // 减20只是为了控制波纹绘制的y的在屏幕的位置，大家可以改成一个变量，然后动态改变这个变量，从而形成波纹上升下降效果
            // 绘制第一条水波纹
            canvas.drawLine(i, mTotalHeight - mResetOneYPositions[i] - 20, i,
                    mTotalHeight,
                    mWavePaintOne);

            // 绘制第二条水波纹
            canvas.drawLine(i, mTotalHeight - mResetTwoYPositions[i] - 20, i,
                    mTotalHeight,
                    mWavePaintTwo);
        }

        // 改变两条波纹的移动点
        mXOneOffset += mXOffsetSpeedOne;
        mXTwoOffset += mXOffsetSpeedTwo;

        // 如果已经移动到结尾处，则重头记录
        if (mXOneOffset >= mTotalWidth) {
            mXOneOffset = 0;
        }
        if (mXTwoOffset > mTotalWidth) {
            mXTwoOffset = 0;
        }

        // 引发view重绘，一般可以考虑延迟20-30ms重绘，空出时间片
        postInvalidate();
    }

    private void resetPositonY() {
        // mXOneOffset代表当前第一条水波纹要移动的距离
        int yOneInterval = mYPositions.length - mXOneOffset;
        // 使用System.arraycopy方式重新填充第一条波纹的数据
        System.arraycopy(mYPositions, mXOneOffset, mResetOneYPositions, 0, yOneInterval);
        System.arraycopy(mYPositions, 0, mResetOneYPositions, yOneInterval, mXOneOffset);

        int yTwoInterval = mYPositions.length - mXTwoOffset;
        System.arraycopy(mYPositions, mXTwoOffset, mResetTwoYPositions, 0,
                yTwoInterval);
        System.arraycopy(mYPositions, 0, mResetTwoYPositions, yTwoInterval, mXTwoOffset);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 记录下view的宽高
        mTotalWidth = w;
        mTotalHeight = h;
        // 用于保存原始波纹的y值
        mYPositions = new float[mTotalWidth];
        // 用于保存波纹一的y值
        mResetOneYPositions = new float[mTotalWidth];
        // 用于保存波纹二的y值
        mResetTwoYPositions = new float[mTotalWidth];

        // 将周期定为view总宽度
        mCycleFactorW = (float) (2 * Math.PI / mTotalWidth);

        // 根据view总宽度得出所有对应的y值
        for (int i = 0; i < mTotalWidth; i++) {
            mYPositions[i] = (float) (STRETCH_FACTOR_A * Math.sin(mCycleFactorW * i) + OFFSET_Y);
        }
    }
}

2.activity_main.xml代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#EBEBEB">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#FF4081">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_centerVertical="true"
            android:layout_marginBottom="15dp"
            android:layout_marginLeft="10dp"
            app:srcCompat="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text"
            android:textColor="#ffffff"
            android:layout_marginLeft="10dp"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/imageView"
            android:layout_toEndOf="@+id/imageView" />


    </RelativeLayout>

    <com.example.hp.handertext.DynamicWave
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="#FF4081"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:background="#ffffff">
    </RelativeLayout>
</LinearLayout>

仅供大家参考。。。

Android 个人中心波纹效果

相关推荐