Android - 条纹进度条实现，调整view宽度仿进度条

最新推荐文章于 2024-04-11 10:37:43 发布

a52654

最新推荐文章于 2024-04-11 10:37:43 发布

阅读量2.1k

点赞数 1

相关代码请参阅： https://github.com/RustFisher/aboutView/blob/master/app/src/main/java/com/rust/aboutview/activity/RoundCornerActivity.java

美工同学指定了一个进度条样式

进度条样式

这斑斓的进度条，如果要自己画实在是劳民伤财。于是请美工切了一张素材。

素材样例

如果用shape或者.9图片不太好处理这个条纹。转变思路，放置2张图片。一张作为背景（底，bottom），一张作为进度条图片（cover）。
进度改变时，改变上面图片的宽度。

这就要求上面的图片是圆角的。自定义ImageView，调用canvas.clipPath来切割画布。

public class RoundCornerImageView extends android.support.v7.widget.AppCompatImageView {
    private float mRadius = 18;
    private Path mClipPath = new Path();
    private RectF mRect = new RectF();

    public RoundCornerImageView(Context context) {
        super(context);
    }

    public RoundCornerImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public RoundCornerImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public void setRadiusDp(float dp) {
        mRadius = dp2px(dp, getResources());
        postInvalidate();
    }

    public void setRadiusPx(int px) {
        mRadius = px;
        postInvalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mRect.set(0, 0, this.getWidth(), this.getHeight());
        mClipPath.reset(); // remember to reset path
        mClipPath.addRoundRect(mRect, mRadius, mRadius, Path.Direction.CW);
        canvas.clipPath(mClipPath);
        super.onDraw(canvas);
    }

    private float dp2px(float value, Resources resources) {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, resources.getDisplayMetrics());
    }
}

每次绘制都切割一次圆角。记得调用Path.reset()方法。https://yq.aliyun.com/articles/614754?utm_content=m_1000007245