Android仿360手机卫士波浪球进度的实现

思路：

1. 首先用clipPath裁剪园区域，

2.将Bitmap不断绘制到Canvas上，再用偏移量来控制移动的速度，从而形成波浪动态效果。

activity_main.xml

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <com.jackie.sinkview.SinkView
        android:id="@+id/sink"
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:layout_centerInParent="true" >
    </com.jackie.sinkview.SinkView>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/check"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="体验" />

    </LinearLayout>

</RelativeLayout>

SinkView.java

package com.jackie.sinkview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Region;
import android.util.AttributeSet;
import android.widget.FrameLayout;

/**
 * 水波浪球形进度条
 */
public class SinkView extends FrameLayout {
    private Bitmap mBitmap, mScaleBitmap;
    private Paint mPaint = new Paint();

    private int mRepeatCount;
    private int mSpeed = 15;
    private float mLeft, mPercent;

    private static final int mTextColor = 0xFFFFFFFF;
    private static final int mTextSize = 250;

    public SinkView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setPercent(float percent) {
        mPercent = percent;
        postInvalidate();
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        int width = getWidth();
        int height = getHeight();

        //裁剪成圆形区域
        Path path = new Path();
        canvas.save();
        path.reset();
        canvas.clipPath(path);
        path.addCircle(width / 2, height / 2, width / 2, Path.Direction.CCW);
        canvas.clipPath(path, Region.Op.REPLACE);

        if (mScaleBitmap == null) {
            mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sink);
            mScaleBitmap = Bitmap.createScaledBitmap(mBitmap, mBitmap.getWidth(), getHeight(), false);
            mBitmap.recycle();
            mBitmap = null;
            mRepeatCount = (int) Math.ceil(getWidth() / mScaleBitmap.getWidth() + 0.5) + 1;
        }

        for (int i = 0; i < mRepeatCount; i++) {
            canvas.drawBitmap(mScaleBitmap, mLeft + (i - 1) * mScaleBitmap.getWidth(), (1 - mPercent) * getHeight(), null);
        }
        String text = (int) (mPercent * 100) + "%";
        mPaint.setColor(mTextColor);
        mPaint.setTextSize(mTextSize);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawText(text, (getWidth() - mPaint.measureText(text)) / 2, getHeight() / 2 + mTextSize / 2, mPaint);

        mLeft += mSpeed;
        if (mLeft >= mScaleBitmap.getWidth()) {
            mLeft = 0;
        }

        //绘制外圆环
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(4);
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.rgb(33, 211, 39));
        canvas.drawCircle(width / 2, height / 2, width / 2 - 2, mPaint);
        postInvalidateDelayed(20);

        canvas.restore();
    }
}

MainActivity.java

package com.jackie.sinkview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity {
    private SinkView mSinkView;
    private float mPercent;

    private Thread mThread;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mSinkView = (SinkView) findViewById(R.id.sink);

        findViewById(R.id.check).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                check();
            }
        });

        mPercent = 0.3f;
        mSinkView.setPercent(mPercent);
    }

    private void check() {
        mThread = new Thread(new Runnable() {

            @Override
            public void run() {

                mPercent = 0;
                while (mPercent <= 1) {
                    mSinkView.setPercent(mPercent);
                    mPercent += 0.01f;
                    try {
                        Thread.sleep(40);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
                //当进度条到100%时，重置初始百分比
                mPercent = 0.3f;
                mSinkView.setPercent(mPercent);
            }
        });
        mThread.start();
    }
}

效果图如下：

版权声明：本文为博主原创文章，未经博主允许不得转载。