自定义圆形经验统计View

最新推荐文章于 2022-04-08 18:05:59 发布

原创最新推荐文章于 2022-04-08 18:05:59 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

52 篇文章

订阅专栏

自定义View是我们作为一个“猿”必要掌握的招数，下面介绍下招数。

1.首先在onMeasure方法中量测量View和它的内容来确定测量的宽度和高度。

onMeasure(int widthMeasureSpec, int heightMeasureSpec)

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 获取视图宽高
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);
        // 取最小值
        if (mWidth != mHeight) {
            int mMin = Math.min(mWidth, mHeight);
            mWidth = mMin;
            mHeight = mMin;
        }
        setMeasuredDimension(mWidth, mHeight);
    }

2.在onDraw方法中得到Canvas(画布)绘制图案

draw(Canvas canvas)

得到画布后先用画笔（Paint）画出对应的图案。

  @Override
  public void draw(Canvas canvas) {
      super.draw(canvas);
      drawConfig(canvas);// 初始设置
      drawCircle(canvas);// 绘制圆
      drawScaleLine(canvas);// 绘制刻度线
      drawIndicator(canvas);// 绘制光标
      drawTitleText(canvas);// 绘制标题文本
      drawContentText(canvas);// 绘制内容文本
  }

3.效果图如下：

4.源码如下：

/**
 * 作者：秦川小将
 * 描述：CircleProgressView
 */
public class CircleProgressView extends View {

    private Context mContext;
    /**
     * 视图宽高
     */
    private int mWidth, mHeight;
    /**
     * 画圆所在的距形区域
     */
    private RectF mRectF;

    /**
     * 画圆和刻度线
     */
    private Paint mPaint;

    /**
     * 画光标
     */
    private Paint mIndicatorPaint;

    /**
     * 圆线条粗细
     */
    private int mStrokeWidth = 5;

    /**
     * 进度圆线条粗细
     */
    private int mProgressLineWidth = 8;

    /**
     * 刻度线粗细
     */
    private int mScaleLineWidth = 2;

    /**
     * 进度
     */
    private float mProgress = 0;

    /**
     * 进度最大值,默认100
     */
    private float mMaxProgress = 100;

    /**
     * 线条颜色
     */
    private int mCircleLineColor;

    /**
     * 进度条颜色
     */
    private int mCircleProgressLineColor;

    /**
     * 圆弧线宽
     */
    private float mCircleBorderWidth;

    /**
     * 内边距
     */
    private float mCirclePadding;

    /**
     * 标题文本
     */
    private String mTitleText;

    /**
     * 内容文本
     */
    private String mContentText;

    /**
     * 标题文本大小
     */
    private int mTitleTextSize;

    /**
     * 内容文本大小
     */
    private int mContentTextSize;

    /**
     * 标题字体颜色
     */
    private int mTitleTextColor;

    /**
     * 内容字体颜色
     */
    private int mContentTextColor;


    public CircleProgressView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        this.mContext = context;
        mRectF = new RectF();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mIndicatorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        TypedArray mArray = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView);
        mCircleLineColor = mArray.getColor(R.styleable.CircleProgressView_circleLineColor, Color.parseColor("#D3D3D3"));
        mCircleProgressLineColor = mArray.getColor(R.styleable.CircleProgressView_circleProgressLineColor, Color.parseColor("#FFFFFF"));
        mCircleBorderWidth = mArray.getDimensionPixelSize(R.styleable.CircleProgressView_circleLineBorderWidth, dip2px(10));
        mCirclePadding = mArray.getDimensionPixelSize(R.styleable.CircleProgressView_circleLinePadding, dip2px(5));
        mTitleTextSize = mArray.getDimensionPixelSize(R.styleable.CircleProgressView_circleTitleTextSize, dip2px(20));
        mContentTextSize = mArray.getDimensionPixelSize(R.styleable.CircleProgressView_circleContentTextSize, dip2px(20));
        mTitleTextColor = mArray.getColor(R.styleable.CircleProgressView_circleTitleTextColor, Color.parseColor("#FFFFFF"));
        mContentTextColor = mArray.getColor(R.styleable.CircleProgressView_circleContentTextColor, Color.parseColor("#FFFFFF"));
        mArray.recycle();
    }

    /**
     * 设置最大值
     *
     * @param maxProgress
     */
    public void setMaxProgress(float maxProgress) {
        this.mMaxProgress = maxProgress;
    }


    /**
     * 设置进度
     *
     * @param progress 进度值
     */
    public void setProgress(float progress) {
        this.mProgress = progress;
        invalidate();
    }


    /**
     * 设置进度
     *
     * @param progress 进度值
     * @param duration 动画时长
     */
    public void setProgress(float progress, long duration) {
        setProgressAnimator(progress, duration);
    }

    /**
     * 设置进度动画
     *
     * @param progress 进度值
     * @param duration 动画持续时长
     */
    private void setProgressAnimator(float progress, long duration) {
        float mDuration = ((mMaxProgress / duration) * progress) * 1000;
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, progress);
        valueAnimator.setDuration((long) mDuration);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mProgress = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();
    }

    /**
     * 设置进度条线条粗细
     *
     * @param width
     */
    public void setProgressLineWidth(int width) {
        this.mProgressLineWidth = width;
    }

    /**
     * 设置刻度线线条粗细
     *
     * @param width
     */
    public void setScaleLineWidth(int width) {
        this.mScaleLineWidth = width;
    }

    /**
     * 设置底圆线条颜色
     *
     * @param color
     */
    public void setCircleLineColor(int color) {
        this.mCircleLineColor = color;
    }

    /**
     * 设置进度调线条颜色
     *
     * @param color
     */
    public void setCircleProgressLineColor(int color) {
        this.mCircleProgressLineColor = color;
    }

    /**
     * 设置刻度线外边距
     *
     * @param width
     */
    public void setCircleBorderWidth(float width) {
        this.mCircleBorderWidth = width;
    }

    /**
     * 设置刻度线内边距
     *
     * @param padding
     */
    public void setCirclePadding(float padding) {
        this.mCirclePadding = padding;
    }

    /**
     * 设置标题
     *
     * @param title
     */
    public void setTitleText(String title) {
        this.mTitleText = title;
    }

    /**
     * 设置标题字体颜色
     *
     * @param color
     */
    public void setTitleTextColor(int color) {
        this.mTitleTextColor = color;
    }

    /**
     * 标题字体大小
     *
     * @param size
     */
    public void setTitleTextSize(int size) {
        this.mTitleTextSize = size;
    }

    /**
     * 设置内容
     *
     * @param content
     */
    public void setContentText(String content) {
        this.mContentText = content;
    }

    /**
     * 设置内容字体颜色
     *
     * @param color
     */
    public void setContentTextColor(int color) {
        this.mContentTextColor = color;
    }

    /**
     * 内容字体大小
     *
     * @param size
     */
    public void setContentTextSize(int size) {
        this.mContentTextSize = size;
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 获取视图宽高
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);
        // 取最小值
        if (mWidth != mHeight) {
            int mMin = Math.min(mWidth, mHeight);
            mWidth = mMin;
            mHeight = mMin;
        }
        setMeasuredDimension(mWidth, mHeight);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        drawConfig(canvas);// 初始设置
        drawCircle(canvas);// 绘制圆
        drawScaleLine(canvas);// 绘制刻度线
        drawIndicator(canvas);// 绘制光标
        drawTitleText(canvas);// 绘制标题文本
        drawContentText(canvas);// 绘制内容文本
    }

    /**
     * 初始设置
     */
    private void drawConfig(Canvas canvas) {
        mPaint.setAntiAlias(true);// 是否抗锯齿
        canvas.drawColor(Color.TRANSPARENT); // 设置画布为透明
        mPaint.setStyle(Paint.Style.STROKE);
        // 位置
        mRectF.left = 20; // 左上角X
        mRectF.top = 20; // 左上角Y
        mRectF.right = getWidth() - 20; // 右下角X
        mRectF.bottom = getWidth() - 20; // 右下角Y
    }

    /**
     * 绘制圆
     *
     * @param canvas
     */
    private void drawCircle(Canvas canvas) {
        canvas.save();
        // 绘制底层圆
        mPaint.setStrokeWidth(mStrokeWidth);
        mPaint.setColor(mCircleLineColor);
        canvas.drawArc(mRectF, -90, 360, false, mPaint);

        // 绘制进度圆
        mPaint.setStrokeWidth(mProgressLineWidth);
        mPaint.setColor(mCircleProgressLineColor);
        canvas.drawArc(mRectF, -90, (mProgress / mMaxProgress) * 360, false, mPaint);
        canvas.restore();
    }

    /**
     * 绘制刻度线
     *
     * @param canvas
     */
    private void drawScaleLine(Canvas canvas) {
        canvas.save();
        //半径
        float mRadius = (getMeasuredWidth() - mCirclePadding * 3) / 2 - mCirclePadding;
        //X轴中点坐标
        int mCenterX = getMeasuredWidth() / 2;
        // 设置刻度线颜色
        mPaint.setColor(mCircleLineColor);
        mPaint.setStrokeWidth(mScaleLineWidth);
        for (float i = 0; i < 360; i += 3.6) {
            double mArc = i * Math.PI / 180;
            float mStartX = (float) (mCenterX + (mRadius - mCircleBorderWidth) * Math.sin(mArc));
            float mStartY = (float) (mCenterX + (mRadius - mCircleBorderWidth) * Math.cos(mArc));
            float mStopX = (float) (mCenterX + mRadius * Math.sin(mArc) + 1);
            float mStopY = (float) (mCenterX + mRadius * Math.cos(mArc) + 1);
            canvas.drawLine(mStartX, mStartY, mStopX, mStopY, mPaint);
        }
        canvas.restore();
    }

    /**
     * 绘制光标
     *
     * @param canvas
     */
    private void drawIndicator(Canvas canvas) {
        canvas.save();
        float mRadius = getMeasuredWidth() / 2 - 20;
        // 计算从正上方旋转了多少度
        float mArc = (mProgress / mMaxProgress) * 360;
        // 计算圆弧上X,Y轴坐标
        float mIndicatorX = mRectF.centerX() + (float) (mRadius * Math.cos(Math.toRadians(mArc + 270)));
        float mIndicatorY = mRectF.centerY() + (float) (mRadius * Math.sin(Math.toRadians(mArc + 270)));
        // 设置相关属性
        mIndicatorPaint.setAntiAlias(true);
        mIndicatorPaint.setStyle(Paint.Style.FILL);
        mIndicatorPaint.setColor(mCircleProgressLineColor);
        // 设置过滤器,设置模糊效果时需关闭硬件加速器
        mIndicatorPaint.setMaskFilter(new BlurMaskFilter(dip2px(3), BlurMaskFilter.Blur.NORMAL));
        canvas.drawCircle(mIndicatorX, mIndicatorY, dip2px(3), mIndicatorPaint);
        canvas.restore();
    }

    /**
     * 绘制标题文本
     *
     * @param canvas
     */
    private void drawTitleText(Canvas canvas) {
        if (!TextUtils.isEmpty(mTitleText)) {
            canvas.save();
            mPaint.setColor(mTitleTextColor);
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setTextSize(mTitleTextSize);
            int mTextHeight = mHeight / 4;
            int mTextWidth = (int) mPaint.measureText(mTitleText, 0, mTitleText.length());
            canvas.drawText(mTitleText, (mWidth / 2) - (mTextWidth / 2), (mHeight / 3) + (mTextHeight / 2), mPaint);
            canvas.restore();
        }
    }

    /**
     * 绘制内容文本
     *
     * @param canvas
     */
    private void drawContentText(Canvas canvas) {
        if (!TextUtils.isEmpty(mContentText)) {
            canvas.save();
            mPaint.setColor(mContentTextColor);
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setTextSize(mContentTextSize);
            int mTextHeight = mHeight / 4;
            int mTextWidth = (int) mPaint.measureText(mContentText, 0, mContentText.length());
            canvas.drawText(mContentText, (mWidth / 2) - (mTextWidth / 2), ((mHeight / 4) + (mTextHeight / 2)) * 1.8F, mPaint);
            canvas.restore();
        }
    }

    public int dip2px(float dipValue) {
        final float scale = mContext.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }
 }

3.自定义属性：

    <declare-styleable name="CircleProgressView">
        <!--圆内刻度线宽度-->
        <attr name="circleLineBorderWidth" format="reference|dimension|integer" />
        <!--圆内刻度线内边距-->
        <attr name="circleLinePadding" format="reference|dimension|integer" />
        <!--线条颜色-->
        <attr name="circleLineColor" format="reference|color" />
        <!--进度条线条颜色-->
        <attr name="circleProgressLineColor" format="reference|color" />
        <!--标题文本字体大小-->
        <attr name="circleTitleTextSize" format="reference|dimension|integer" />
        <!--内容文字大小-->
        <attr name="circleContentTextSize" format="reference|dimension|integer" />
        <!--标题文本字体颜色-->
        <attr name="circleTitleTextColor" format="reference|color" />
        <!--内容文本字体颜色-->
        <attr name="circleContentTextColor" format="reference|color" />
    </declare-styleable>

5.在布局中使用

  <!-- 这里只对文本Size进行了设置，其他属性根据自己需求进行设置-->
  <com.example.app.view.widget.CircleProgressView
      android:layout_width="200dp"
      android:layout_height="200dp"
      circle:circleContentTextSize="25sp" />

6.在java代码中使用

  mProgress.setTitleText("No.1");
  mProgress.setContentText("Super VIP");
  mProgress.setMaxProgress(100);
  mProgress.setProgress(60, 3000);