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();
    }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的 Android 自定义 View 进度条的代码,进度条颜色为渐变色,宽高可以自行设置: ```java public class GradientProgressBar extends View { private Paint mPaint; private int mWidth; private int mHeight; private int mProgress; private int mMaxProgress; private int[] mColors; public GradientProgressBar(Context context) { this(context, null); } public GradientProgressBar(Context context, AttributeSet attrs) { super(context, attrs); mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL); mColors = new int[]{Color.RED, Color.YELLOW, Color.GREEN}; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mWidth = MeasureSpec.getSize(widthMeasureSpec); mHeight = MeasureSpec.getSize(heightMeasureSpec); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); float progressWidth = (float) mProgress / mMaxProgress * mWidth; LinearGradient gradient = new LinearGradient(0, 0, progressWidth, mHeight, mColors, null, Shader.TileMode.CLAMP); mPaint.setShader(gradient); canvas.drawRect(0, 0, progressWidth, mHeight, mPaint); } public void setProgress(int progress) { mProgress = progress; invalidate(); } public void setMaxProgress(int maxProgress) { mMaxProgress = maxProgress; } public void setColors(int[] colors) { mColors = colors; } } ``` 你可以在布局文件使用这个自定义 View,例如: ```xml <com.example.GradientProgressBar android:id="@+id/progress_bar" android:layout_width="match_parent" android:layout_height="10dp" app:colors="@array/progress_colors" app:maxProgress="100" app:progress="50" /> ``` 其,`colors` 属性是一个颜色数组,`maxProgress` 属性是最大进度值,`progress` 属性是当前进度值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值