自定义view实现圆形进度条

创建布局 利用按钮控制 进度条开始

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/activity_main"

    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="com.example.zhouzipeng20171009.MainActivity">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="改变外圈圆环颜色"

        />

    <com.example.zhouzipeng20171009.MyView

        android:id="@+id/view1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        app:unprogress_color="@color/colorPrimary"

        app:progress_color="@color/colorAccent"

        />

    <Button

        android:id="@+id/start"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:onClick="startButton"

        android:text="开始"

        android:layout_marginTop="500dp"

        />

    <Button

        android:id="@+id/reset"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:onClick="resetButton"

        android:text="重置"

        android:layout_marginTop="500dp"

        android:layout_marginLeft="100dp"

        />

</RelativeLayout>

创建自定义view

public class MyView extends View {

    /*设置宽高*/

    private int mwidth;

    private int mheight;

    /*圆的直径大小*/

    private int d=500;

    /*设置画笔*/

    private Paint bgpaint;

    private Paint tppaint;

    private Paint linepaint;

    //外层线条长度

    private int LongItem=dip2px(20);

    //线条与圆的间距

    private int DItem=dip2px(10);

    private int dip2px(float dip) {

        float density=getContext().getResources().getDisplayMetrics().density;

        return (int) (dip*density+0.5f);

    }

    //进度条最大宽度

    private int progressWidth;

    /*底层颜色和上层颜色区分*/

    private int bgColor;

    private int tpColor;

    /*底层宽度和上层宽度区分*/

    private float bgWidth;

    private float tpWidth;

    /*设置进度*/

    private float currentvalue;

    /*动画演示*/

    private ValueAnimator animator;

    privat
4000
e int curvalue;

    public MyView(Context context, AttributeSet attrs) {

        this(context, attrs,0);

    }

    public MyView(Context context) {

        this(context,null,0);

    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        /*获取自定义的数据*/

        TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.MyView);

        bgColor= ta.getColor(R.styleable.MyView_unprogress_color, Color.BLACK);

        tpColor=ta.getColor(R.styleable.MyView_progress_color,bgColor);

        bgWidth=ta.getDimension(R.styleable.MyView_unprogress_height,dip2px(10));

        tpWidth=ta.getDimension(R.styleable.MyView_progress_height,dip2px(10));

        progressWidth=bgWidth>tpWidth?(int)bgWidth:(int)tpWidth;

        /*释放*/

        ta.recycle();

        /*初始化数据*/

        init();

    }

    private void init() {

        /*给画笔赋予自定义的属性*/

        bgpaint=new Paint(Paint.ANTI_ALIAS_FLAG);

        bgpaint.setStrokeWidth(bgWidth);

        bgpaint.setColor(bgColor);

        bgpaint.setStrokeCap(Paint.Cap.ROUND);

        bgpaint.setStyle(Paint.Style.STROKE);

        tppaint=new Paint(Paint.ANTI_ALIAS_FLAG);

        tppaint.setStrokeWidth(tpWidth);

        tppaint.setColor(tpColor);

        tppaint.setStrokeCap(Paint.Cap.ROUND);

        tppaint.setStyle(Paint.Style.STROKE);

        linepaint=new Paint(Paint.ANTI_ALIAS_FLAG);

        linepaint.setColor(Color.WHITE);

        linepaint.setStrokeWidth(5);

    }

    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        /*计算宽高*/

        mwidth=(int)2*(LongItem+DItem+progressWidth*2+d/2);

        mheight=(int)2*(LongItem+DItem+progressWidth*2+d/2);

        setMeasuredDimension(mwidth,mheight);

    }

    @Override

    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {

        super.onLayout(changed, left, top, right, bottom);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        /*首先绘制底层的图形*/

        canvas.drawArc(new RectF(progressWidth/2+DItem+LongItem,progressWidth/2+DItem+LongItem,mwidth-progressWidth/2-DItem-LongItem,mheight-progressWidth/2- DItem-LongItem),0,360,true,bgpaint);

       /*绘制边缘的线*/

        canvas.save();

        canvas.rotate(144,mwidth/2,mheight/2);

        for(int i=0;i<=30;i++){

            canvas.rotate(-9,mwidth/2,mheight/2);

            if(i%5==0){

                canvas.drawLine(mwidth/2,5,mwidth/2,LongItem,linepaint);

            }else{

                canvas.drawLine(mwidth/2,25,mwidth/2,LongItem,linepaint);

            }

        }

        canvas.restore();

        /*给画笔设置颜色渐变*/

//        SweepGradient sg=new SweepGradient(mwidth/2,mheight/2,Color.RED,Color.YELLOW);

//        tppaint.setShader(sg);

        canvas.drawArc(new RectF(progressWidth/2+DItem+LongItem,progressWidth/2+DItem+LongItem,mwidth-progressWidth/2-DItem-LongItem,mheight-progressWidth/2- DItem-LongItem),135,currentvalue,false,tppaint);

        tppaint.setTextSize(100);

        tppaint.setTextAlign(Paint.Align.CENTER);

        canvas.drawText(String.format("%.0f",currentvalue),mwidth/2,mheight/2+50,tppaint);

//        canvas.drawText("78%",mwidth/2,mheight/2+50,tppaint);

        invalidate();

    }

    public void setCurrentvalue(float value) {

/*设置动画效果*/

        animator=ValueAnimator.ofFloat(currentvalue,value);

        /*设置时间间隔*/

        animator.setDuration(3000);

        animator.setTarget(currentvalue);

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override

            public void onAnimationUpdate(ValueAnimator animation) {

                currentvalue= (float) animation.getAnimatedValue();

                curvalue=curvalue/10;

            }

        });

        /*开启动画*/

        animator.start();

    }

    @Override

    public boolean onTouchEvent(MotionEvent event) {

        return super.onTouchEvent(event);

    }

}

自定义view创建 实现动画

创建我们的mainactivity

实例化我们的view 调用自定义view的setCurrentvalue方法 将参数放入

定义方法的时长