Android 自定义View 渐变进度条

 渐变进度条?绘制两个圆角矩形不就完事了?

特殊情况 1. 进度过小   矩形的宽度小于高度  绘制的圆角就是一个竖着的长条  无法达到想要的效果。

解决方案 : 使用Path绘制求交集

 当宽度小于高度时  绘制的进度条左移

可自行抽取自定义属性  这里只记录一个简单实现

public class LinearProgressView extends View {
    private int mStartColor;//渐变开始颜色
    private int mEndColor;//渐变结束颜色
    private float mProgress = 100;//进度条总进度
    private int mbgColor;//背景边框颜色
    private float mCurrentProgress;//当前进度
    private int mRadius;
    private Paint mPaint;
    private LinearGradient gradient;
    private Path path;
    private Path pathBg;
    private Path pathPro;
    private RectF rectF;

    public LinearProgressView(Context context) {
        super(context, null);
    }

    public LinearProgressView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs, 0);
        mStartColor = SystemUtil.getColor(R.color.linear_pro_start_color);
        mEndColor = SystemUtil.getColor(R.color.linear_pro_end_color);
        mbgColor = SystemUtil.getColor(R.color.linear_pro_bg_bolder_color);
        mRadius = SystemUtil.dp2px(10);
        init();
    }

    public LinearProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mStartColor = SystemUtil.getColor(R.color.linear_pro_start_color);
        mEndColor = SystemUtil.getColor(R.color.linear_pro_end_color);
        mbgColor = SystemUtil.getColor(R.color.linear_pro_bg_bolder_color);
        mRadius = SystemUtil.dp2px(10);
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setAntiAlias(true);
        path = new Path();
        pathBg = new Path();
        pathPro = new Path();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    public void setCurrentProgressValue(float currentProgressValue, float allValue) {
        mCurrentProgress = currentProgressValue;
        mProgress = allValue;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (rectF == null) {
            rectF = new RectF();
        }
        //绘制背景
        mPaint.setColor(mbgColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(SystemUtil.dp2px(1));
        rectF.left = 0;
        rectF.bottom = getHeight();
        rectF.right = getWidth();
        rectF.top = 0;
        pathBg.addRoundRect(rectF, mRadius, mRadius, Path.Direction.CW);
        canvas.drawPath(pathBg, mPaint);
        //绘制进度条
        if (gradient == null) {
            gradient = new LinearGradient(0, getHeight() / 2, getWidth(), getHeight() / 2,
                     mStartColor, mEndColor , Shader.TileMode.MIRROR);
        }
        mPaint.setShader(gradient);
        mPaint.setStyle(Paint.Style.FILL);
        float progressValue = 0;
        if (mProgress != 0) {
            progressValue = mCurrentProgress / mProgress * getWidth();
        }
        if (progressValue>getWidth()){
            progressValue = getWidth();
        }
        rectF.bottom = getHeight();
        rectF.left = progressValue < getHeight() ? progressValue - getHeight() : 0;
        rectF.right = progressValue;
        rectF.top = 0;
        pathPro.addRoundRect(rectF, mRadius, mRadius, Path.Direction.CW);
        path.op(pathBg, pathPro, Path.Op.INTERSECT);
        canvas.drawPath(path, mPaint);
        path.reset();
        pathBg.reset();
        pathPro.reset();
        mPaint.reset();
    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值