导语

6月初自己的项目有一个需要进度条的地方，先看需求，要求挺低的，就展示一个项目进度，不需要转，不需要跑，就是一个横着的一根把棍子，没毛病，系统自带的progressbar，drawable里面画几个样式OK了。当拿到UI图的那一刻，原来事情并没有辣么简单。

如图

进度条

我了个去，道理我都懂，中间那个小圆球是啥东西。有些麻烦，去找UI沟通，看看能不能改一下图，把中间的小圆点去掉,嘿嘿嘿。

啪啪啪

    恩.....我回来了，此路不通，看上去也没啥难的，自己画一个好了。

开始分析

既然就只是简单的展示，画几个圆几个四方框放一张图片好了。想想，先起个草稿好了。

我是草稿

    恩，可以看出作者深厚的画工。分析下，外面的一套进度条小圆点的位置和大小，里面是进度条的大小。所以看上去，我们只需先要确定好小圆点的位置就可以了，然后进度条两边是两个半圆，里面是两个长方形，左边橙色进度和右边的灰色进度。OK，开整。等等，哎呦，我可以偷个懒，因为两边的半圆会被小圆点盖住，那岂不是在计算的时候可以省去这一段，反正0%的时候和100%的时候基本可以盖住，嘿嘿嘿。

代码

public class LZProgressbar extends View {


    private Paint mPaintO = new Paint();
    private Paint mPaintB = new Paint();
    private double progress = 0;
    private int pbColor;
    private int bgColor;
    private int circularPic;
    private Bitmap circularBm;
    private int heightPx;


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

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

    public LZProgressbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint(attrs);
    }


    // 2.初始化画笔
    private void initPaint(AttributeSet attrs) {
        final TypedArray a = getContext().obtainStyledAttributes(attrs,
                R.styleable.cProgressbarStyle);
        pbColor = a.getColor(R.styleable.cProgressbarStyle_cPbNowColor, 0xffff0000);
        bgColor = a.getColor(R.styleable.cProgressbarStyle_cPbBackgroundColor, 0xffff0000);
        circularPic = a.getResourceId(R.styleable.cProgressbarStyle_picSrc, R.drawable.yuandian);
        heightPx = a.getDimensionPixelOffset(R.styleable.cProgressbarStyle_heightPx,60);


        setBitmap();




        mPaintB.setColor(bgColor);       //设置画笔颜色
        mPaintB.setStyle(Paint.Style.FILL);  //设置画笔模式为填充
        mPaintB.setAntiAlias(true);
        mPaintO.setColor(pbColor);       //设置画笔颜色
        mPaintO.setStyle(Paint.Style.FILL);  //设置画笔模式为填充
        mPaintO.setAntiAlias(true);
    }

    private void setBitmap() {
        Bitmap bm = BitmapFactory.decodeResource(getResources(), circularPic);
        int width = bm.getWidth();
        int height = bm.getHeight();
        // 设置想要的大小
        int newWidth = heightPx;
        int newHeight = heightPx;
        // 计算缩放比例
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        // 取得想要缩放的matrix参数
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        // 得到新的图片
        circularBm = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, true);
    }


    @Override
    protected synchronized void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int w = getWidth();
        int h = getHeight();
        //第一个圆
        canvas.drawCircle(h / 2, h / 2, (h - 14) / 2, mPaintO);
        //第一个矩形
        canvas.drawRect(h / 2, 7, (float) ((w - h) * progress + 7 + (h - 14) / 2), h - 7, mPaintO);
        //第二个圆
        canvas.drawCircle(w - (h / 2), h / 2, (h - 14) / 2, mPaintB);
        //第二个矩形
        canvas.drawRect((float) ((w - h) * progress + 7 + (h - 14) / 2), 7, w - (h / 2), h - 7, mPaintB);
        //图形圆点
        canvas.drawBitmap(circularBm, (float) (((getWidth() - getHeight()) * progress)), 0, new Paint());

    }






    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }

    public void setProgress(double progress) {
        this.progress = progress;
    }


}

一万年以后......
    搞定，运行下，可以的，基本满足了UI的要求。中间踩了个坑就是两边绘制图片和各种测量，墨迹的不行。也不知道性能如何，会不会卡什么的......要不拓展一下？加上XML属性？好的，说干......等等UI走过来了，看上去她有什么要对我说。
    “那个进度条不好看，我们换一个吧，一会我给你图”
    “......”
    等我去找一把刀。

给我刀

补张图最后的样子

最终进度条

其他

UI出图这个事肯定每个开发都会遇到，有弊有利吧。如果项目催得不紧，基本无所谓，反正都是整。但是要是催得紧，那酸爽，high的不行。不过总结下来就是自己技术差的不行，不然不会因为这种小玩意琢磨半天 = =

OVER 老白想嗑瓜子磕到上火。

咔嚓咔嚓咔嚓