自定义属性 来实现 ProgressBar 圆形进度条

实现圆形进度条的拖拽，点击实现效果如下图所示：

自定义属性

在src/values中新建attrs.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="XProgressBar">        <attr name="progress" format="integer"/>        <attr name="max" format="integer"/>        <attr name="smallCircleColor" format="color"/>        <attr name="progressColor" format="color"/>        <attr name="textColor" format="color"/>        <attr name="borderOutWidth" format="dimension"/>    </declare-styleable></resources>

在主布局中引用自定义属性

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.xykj.xprogressbar.MainActivity"    android:orientation="vertical">    <com.xykj.view.XProgressBar        android:layout_width="match_parent"        android:layout_height="100dp"        app:progress="30"        app:progressColor="@color/colorAccent"/>    <com.xykj.view.XSeekBar        android:layout_width="match_parent"        android:layout_height="300dp"        android:layout_marginTop="10dp"/></LinearLayout>

定义类XProgressBar继承View

public class XProgressBar extends View {    protected int radius;    //小圆半径    private int smallRadius;    //中心点    protected Point center;    //当前进度    protected int progress;    //总进度    protected int max = 100;    //外部的进度的宽度    private int borderOutWidth = 20;    //内部小圆的颜色    private int smallCircleColor = 0xff00A2E8;    //进度的颜色    private int progressColor = 0xff22B14C;    //文本颜色    private int textColor = 0xFFFFFFFF;    //画笔    private Paint paint;    //进度弧度所在的矩形区域    private RectF progressRect;    public XProgressBar(Context context) {        super(context);        init();    }    public XProgressBar(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.XProgressBar);        progress = ta.getInteger(R.styleable.XProgressBar_progress, 0);        max = ta.getInteger(R.styleable.XProgressBar_max, 100);        borderOutWidth = ta.getDimensionPixelSize(R.styleable.XProgressBar_borderOutWidth, 20);        smallCircleColor = ta.getColor(R.styleable.XProgressBar_smallCircleColor, 0xff00A2E8);        progressColor = ta.getColor(R.styleable.XProgressBar_progressColor, 0xff22B14C);        textColor = ta.getColor(R.styleable.XProgressBar_textColor, 0xffffffff);        ta.recycle();        init();    }    private void init() {        center = new Point();        progressRect = new RectF();        //初始化画笔        paint = new Paint();        paint.setAntiAlias(true);        paint.setStrokeWidth(borderOutWidth);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        int width = getDefaultSize(80, widthMeasureSpec);        int height = getDefaultSize(80, heightMeasureSpec);        //记录中心点        center.set(width / 2, height / 2);        //取小的一边作为显示的最大半径        radius = width > height ? center.y : center.x;        progressRect.set(center.x - radius + borderOutWidth / 2,                center.y - radius + borderOutWidth / 2,                center.x + radius - borderOutWidth / 2,                center.y + radius - borderOutWidth / 2);        if (smallRadius == 0) {            smallRadius = radius - borderOutWidth - 3;            paint.setTextSize(smallRadius / 2);        }        setMeasuredDimension(width, height);    }    public static int getDefaultSize(int size, int measureSpec) {        int result = size;        int specMode = MeasureSpec.getMode(measureSpec);        if (specMode == MeasureSpec.EXACTLY) {            int specSize = MeasureSpec.getSize(measureSpec);            if (specSize > size) {                result = specSize;            }        }        return result;    }    Rect textRect = new Rect();    @Override    protected void onDraw(Canvas canvas) {        //画小圆背景(实心)        paint.setStyle(Paint.Style.FILL);        paint.setColor(smallCircleColor);        canvas.drawCircle(center.x, center.y, smallRadius, paint);        //画文本        String text = progress + "%";  //0% 50% 100%        paint.getTextBounds(text, 0, text.length(), textRect);        paint.setColor(textColor);        canvas.drawText(text, center.x - textRect.centerX(),                center.y - textRect.centerY(), paint);        //画进度的弧度        paint.setStyle(Paint.Style.STROKE);        paint.setColor(progressColor);        int degress = getDegress();        canvas.drawArc(progressRect, -90, degress, false, paint);    }    protected int getDegress(){        return 360 * progress / max;    }    public int getProgress() {        return progress;    }    public void setProgress(int progress) {        if (this.progress != progress && progress <= max) {            this.progress = progress;            invalidate();        }    }    public int getMax() {        return max;    }    public void setMax(int max) {        this.max = max;    }    public int getBorderOutWidth() {        return borderOutWidth;    }    public void setBorderOutWidth(int borderOutWidth) {        this.borderOutWidth = borderOutWidth;    }    public int getSmallCircleColor() {        return smallCircleColor;    }    public void setSmallCircleColor(int smallCircleColor) {        if(this.smallCircleColor != smallCircleColor) {            this.smallCircleColor = smallCircleColor;            invalidate();        }    }    public int getProgressColor() {        return progressColor;    }    public void setProgressColor(int progressColor) {        if(this.progressColor != progressColor) {            this.progressColor = progressColor;            invalidate();        }    }    public int getTextColor() {        return textColor;    }    public void setTextColor(int textColor) {        if(this.textColor != textColor) {            this.textColor = textColor;            invalidate();        }    }}

定义类XSeekBar继承XProgressBar

public class XSeekBar extends XProgressBar {    public XSeekBar(Context context) {        super(context);    }    public XSeekBar(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);    }    private int degress;    @Override    public boolean onTouchEvent(MotionEvent event) {        int action = event.getAction();        switch (action) {            case MotionEvent.ACTION_DOWN:                if (null != onXSeekBarChangeListener) {                    onXSeekBarChangeListener.onStartTrackingTouch(this);                }            case MotionEvent.ACTION_MOVE:                float x = event.getX();                float y = event.getY();                float dis = getDistence(x, y);                if (dis >= radius - 10 && dis <= radius + 10) {                    //在圆上，计算触控点和圆顶部切线的tan值                    float tanValue = (y - center.y + radius) / Math.abs(x - center.x);                    //反tan获取触控点和顶部切线的夹角(0-2PI)                    float dPi = (float) Math.atan(tanValue);                    //触控点和顶部切线夹角的2倍即为弧度角                    int d = (int) Math.toDegrees(dPi);                    if (x < center.x) {                        d = 180 - d;                    }                    degress = d * 2;                    if (degress > 360) {                        degress = 360;                    } else if (degress < 0) {                        degress = 0;                    }                    progress = max * degress / 360;                    if (null != onXSeekBarChangeListener) {                        onXSeekBarChangeListener.onProgressChanged(this, progress, true);                    }                    invalidate();                }                break;            case MotionEvent.ACTION_UP:                if (null != onXSeekBarChangeListener) {                    onXSeekBarChangeListener.onStopTrackingTouch(this);                }                break;        }        return true;    }    /**     * 计算触控点到圆心的距离     *     * @param x     * @param y     * @return     */    private float getDistence(float x, float y) {        return (float) Math.sqrt(Math.pow(x - center.x, 2) + Math.pow(y - center.y, 2));    }    @Override    protected int getDegress() {        return degress;    }    @Override    public void setProgress(int progress) {        if (this.progress != progress && null != onXSeekBarChangeListener) {            onXSeekBarChangeListener.onProgressChanged(this, progress, false);        }        super.setProgress(progress);    }    public OnXSeekBarChangeListener getOnXSeekBarChangeListener() {        return onXSeekBarChangeListener;    }    public void setOnXSeekBarChangeListener(OnXSeekBarChangeListener onXSeekBarChangeListener) {        this.onXSeekBarChangeListener = onXSeekBarChangeListener;    }    private OnXSeekBarChangeListener onXSeekBarChangeListener;    public interface OnXSeekBarChangeListener {        void onStartTrackingTouch(XSeekBar bar);        void onProgressChanged(XSeekBar seekBar, int progress, boolean fromUser);        void onStopTrackingTouch(XSeekBar bar);    }}