彩虹进度条哦

作者: cuieney | 来源:发表于2017-02-23 14:45 被阅读435次

彩虹进度条哦
iOS 使用CAShapeLayer绘制一个动态的彩虹🌈
这才是我想要的彩虹进度条-[vue-ins-progress-b
街角有卖彩虹哦
路遇彩虹美美哒！
邂逅彩虹
故乡彩虹
永不消失的彩虹
教你搞定Android自定义ViewGroup
岁月神偷

某天的某个时刻，看到了代码家的开源库NumberProgressBar，里面有着色彩鲜明的进度条。无所事事的我，就想到了写个彩虹进度条。idea来源于这

首先呢

对于彩虹肯定要有色彩丰富的颜色了，而且还要美观大方，这个自定义view并不难，相信写过的自定义view的都有能力写出这样的进度条。

那么不多说先上图：

progress.gif

就是这么简单的一个进度条，没有任何花哨，简单大方。

源码解析 _ _!

1.进度条吗，肯定你的首先新建一个class吧，然后呢当然是继承View了，咱们就建个RainbowProgressBar这个类吧，对于view 的绘制流程那我就不说了，大家自行google。

2.那么类建好了要干嘛呢，当然是配置需要的attribute的属性了，和代码中的初始化方法了。下面是attrs里面的内容


<resources>
    <declare-styleable name="RainbowProgressBar">
        <attr name="progress_current" format="integer"/>
        <attr name="progress_max" format="integer"/>

        <attr name="progress_start_color" format="color"/>
        <attr name="progress_end_color" format="color"/>
        <attr name="progress_unreached_color" format="color"/>

        <attr name="progress_height" format="dimension"/>
        <attr name="progress_radius" format="dimension"/>

        <attr name="progress_type" format="enum">
            <enum name="circle" value="0"/>
            <enum name="line" value="1"/>
        </attr>
    </declare-styleable>
</resources>

好了我的属性也就这些。

3.那么接下来干嘛呢，当然是在构造方法里获取这些用户需要配置的属性了
and 初始化画笔


  public RainbowProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray attributes = context.obtainStyledAttributes(attrs,
                R.styleable.RainbowProgressBar);
        max = attributes.getInteger(R.styleable.RainbowProgressBar_progress_max,100);
        progress = attributes.getInteger(R.styleable.RainbowProgressBar_progress_current,0);
        startColor = attributes.getColor(R.styleable.RainbowProgressBar_progress_start_color,startColor);
        endColor = attributes.getColor(R.styleable.RainbowProgressBar_progress_end_color,endColor);
        radius = attributes.getDimension(R.styleable.RainbowProgressBar_progress_radius,dp2px(35));
        progressHeight = attributes.getDimension(R.styleable.RainbowProgressBar_progress_height,dp2px(5));
        unreachedColor = attributes.getColor(R.styleable.RainbowProgressBar_progress_unreached_color,unreachedColor);
        type = attributes.getInteger(R.styleable.RainbowProgressBar_progress_type,1);
        attributes.recycle();
        init();
    }

大概就这些属性了。这些都无关紧要的。

我们来说重点吧，如何画出这样的彩虹呢

1.在开始说这个之前你必须的了解一下某个类，可能用的不多吧，主要功能是用来渲染色彩的 duang duang duang 没错就是他让我们的进度条上色了LinearGradient
总共要传七个参数，ヾ(｡｀Д´｡)我擦咋这么多呢。前四个参数就是你的着色范围，后三个参数，有一个还可以为空呢，另一个呢就是要你配置它的色彩，然后最后一个呢，那就是着色的模式了。简单吧

2.了解了LinearGradient这个类之后那我们开始画画了哦，but 现在还是不行的，我们需要获取这些用户配置好的起始颜色和结束颜色，直接的过度颜色啊，不然你怎么画啊
用户给我们的肯定是hex 16进制的颜色啊（#ff00ff）就这样的,那我们现在上代码吧，下面这个代码是，hex 转 ARGB

 private int[] convertColor(int color) {
        int alpha = (color & 0xff000000) >>> 24;
        int red = (color & 0x00ff0000) >> 16;
        int green = (color & 0x0000ff00) >> 8;
        int blue = (color & 0x000000ff);
        return new int[]{alpha, red, green, blue};
    }

那我们怎么获取每个点（就是每个进度点）对应的颜色呢，不多说上代码


 private int getCurrentColor(int progress) {
        int alpha = 0;
        int red = 0;
        int green = 0;
        int blue = 0;

        if (progress == 0) {
            return startColor;
        }
        int[] startARGB = convertColor(startColor);
        int[] endARGB = convertColor(endColor);

        alpha = startARGB[0] - ((startARGB[0] - endARGB[0]) / max * progress);
        red = startARGB[1] - ((startARGB[1] - endARGB[1]) / max * progress);
        green = startARGB[2] - ((startARGB[2] - endARGB[2]) / max * progress);
        blue = startARGB[3] - ((startARGB[3] - endARGB[3]) / max * progress);

        return Color.argb(alpha, red, green, blue);
    }

我们根据每个进度的位子拿到当前的颜色点即可，

3.刚刚说的那个叼叼类还记得吗（LinearGradient），我们做的这一切准备都是为了给他colors数组的，就问你这家伙叼不刁吧，给他吧，谁让他这么叼

 private void initColors() {
        for (int i = 0; i < max; i++) {
            colors[i] = getCurrentColor(i);
        }
    }

4.好了我们准备工作做好了，那么现在要干嘛呢，当然是拿着我们的画板（Canvas）和笔（Paint）画画了
因为我们配置文件中设置了type类型所以会有线性和圆的区别

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (type == CIRCLE_TYPE) {
            drawCircle(canvas);
        }else if(type == LINE_TYPE){
            drawLine(canvas);
        }
    }

接下来奉上线性代码

   private void drawLine(Canvas canvas) {
        measuredWidth = getWidth();
        measuredHeight = getHeight();
        canvas.drawLine(0, 0, measuredWidth, 0, paint);
        float x1 = measuredWidth / max * progress;
        shader = new LinearGradient(0, 0, x1, 0, colors, null,
                Shader.TileMode.CLAMP);
        rainbowPaint.setShader(shader);
        canvas.drawLine(0, 0, x1, 0, rainbowPaint);
    }

接下来奉上圆形代码

    private void drawCircle(Canvas canvas) {
        measuredWidth = getWidth();
        measuredHeight = getHeight();
        float x = radius+progressHeight;
        float y = radius+progressHeight;
        float sweepAngle = 360f / max * progress;

        canvas.drawCircle(x, y, radius, paint);
        shader = new LinearGradient(x - radius, y - radius,
                x - radius + radius, y + radius, colors, null, Shader.TileMode.MIRROR);
        rainbowPaint.setShader(shader);
        RectF rect = new RectF(((int) (x - radius)),
                ((int) (y - radius)),
                ((int) (x + radius)),
                ((int) (y + radius)));
        canvas.drawArc(
                rect,
                -90, sweepAngle, false, rainbowPaint
        );
    }

怎么样，还算满意吗！！！

这不就结束了彩虹进度条哦！！！！