自定义下载圆形进度条

最新推荐文章于 2021-05-25 16:11:44 发布

原创最新推荐文章于 2021-05-25 16:11:44 发布 · 304 阅读

CC 4.0 BY-SA版权

本文介绍了一种自定义圆形进度条的实现方法，通过继承View并利用Canvas绘制圆形及进度弧线，同时实现了触摸监听及动画效果。

public class Circle extends View{

    OnClickListener onClickListener;

    //画整个圆圈的画笔
    Paint paint;
    //画当前进度条的画笔
    Paint cpaint;

    Paint percentpaint;

    //最大进度
    int max = 360;
    //当前进度
    int current;

    float textSize = 20;

    public void addrest(int max,int current){
        this.max = max;
        this.current = current;
        //发送到子线程
        postInvalidate();

        //主线程
        //invalidate();
    }

    public Circle(Context context) {
        super(context);
    }

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if(getWidth()== 0 || getHeight() == 0){

            return;
        }

        Circle(canvas);

    }

    //进度条
    public void Circle(Canvas canvas){

        //实例化画笔
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(5);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);

        cpaint = new Paint();
        cpaint.setColor(Color.RED);
        cpaint.setStrokeWidth(5);
        cpaint.setAntiAlias(true);
        cpaint.setStyle(Paint.Style.STROKE);

        percentpaint = new Paint();
        percentpaint.setTextSize(textSize);
        percentpaint.setStrokeWidth(2);
        percentpaint.setColor(Color.BLACK);

        //获取圆心位置
        int center = getWidth()/2;
        //获取半径
        int radio = (getWidth()-20)/2;

        //绘制圆
        canvas.drawCircle(getWidth()/2,getHeight()/2,(getWidth()-20)/2,paint);

        //设置 rect
        RectF rect = new RectF(center-radio,center-radio,center+radio,center+radio);

        //绘制当前进度的圆
        canvas.drawArc(rect,0,360*current/max,false,cpaint);

        //进度条百分比
        int perent = (int) ((current*1.0/max*1.0)*100);
        float textWidth = paint.measureText(perent + "%");

        canvas.drawText(perent+"%",center-textWidth/2,center+textSize/2,percentpaint);

    }

    //观察者模式
    public interface OnClickListener{

        public void OnClickListener();
    }

    public void setOnClickListener(OnClickListener onClickListener){
        this.onClickListener = onClickListener;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()){

            case MotionEvent.ACTION_DOWN:

                int x = (int) event.getX();
                int y = (int) event.getY();

                int radio = (getWidth()-20)/2;

                int x1 = (x - getWidth()/2)*(x - getWidth()/2);
                int y1 = (y - getHeight()/2)*(y - getHeight()/2);

                if(x1+y1<= radio*radio){

                    if(null != onClickListener){
                        onClickListener.OnClickListener();
                    }
                }

                break;
        }

        return true;
    }

}

Main方法

public class MainActivity extends AppCompatActivity {

    int cuout = 360;
    int current = 0;

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

       circle = (MyCicle)findViewById(R.id.circle);

        new Thread(new Runnable() {
            @Override
            public void run() {

                while (current<=cuout){

                    current++;
                   circle.addrest(current,cuout);

                    try {
                        Thread.sleep(10);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
               }

            }
        }).start();
    }
}