自定义view画渐变柱形图

记录一下画柱形图的过程,效果图如下:


自定义view画渐变柱形图_第1张图片

效果图非常简单,就不用第三方库了,我们直接画吧,这里主要用到LinearGradient线性渐变这个属性。

1、新建RectView 继承 View
    //柱形图的分值,100分满分
    private int data[] = {10, 20, 30, 50};
    public RectView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
2、重写onDraw方法
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画矩形
        Paint paint = new Paint();
        LinearGradient linearGradient = new LinearGradient(0, 0, 0, getHeight(), new int[]{Color.parseColor("#F9D423"), Color.parseColor("#FF4E50")}, null, LinearGradient.TileMode.MIRROR);
        paint.setShader(linearGradient);
        paint.setStyle(Paint.Style.FILL);

        //画分割线
        Paint linePaint = new Paint();
        linePaint.setColor(Color.parseColor("#e9e9e9"));
        for (int i = 0; i < data.length; i++) {
            canvas.drawRect((getWidth() / data.length) * i, getHeight() - (getHeight() / 100 * data[i]), getWidth() / data.length * (i + 1), getHeight(), paint);
            canvas.drawLine((getWidth() / data.length) * i, 0, (getWidth() / data.length) * i, getHeight(), linePaint);
        }

        //画最后一条线
        canvas.drawLine(getWidth() - 2, 0, getWidth() - 2, getHeight(), linePaint);
    }
3、设置数据源更新
    public void setData(int data[]) {
        this.data = data;
        invalidate();
    }
4、LinearGradient属性

LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[], TileMode tile)
注:Android中计算x,y坐标都是以屏幕左上角为原点,向右为x+,向下为y+
第一个参数为线性起点的x坐标
第二个参数为线性起点的y坐标
第三个参数为线性终点的x坐标
第四个参数为线性终点的y坐标
第五个参数为实现渐变效果的颜色的组合
第六个参数为前面的颜色组合中的各颜色在渐变中占据的位置(比重),如果为空,则表示上述颜色的集合在渐变中均匀出现
第七个参数为渲染器平铺的模式,一共有三种
1、CLAMP-----边缘拉伸
2、REPEAT----在水平和垂直两个方向上重复,相邻图像没有间隙
3、MIRROR---以镜像的方式在水平和垂直两个方向上重复,相邻图像有间隙

简单的柱形图就出来啦。

你可能感兴趣的:(自定义view画渐变柱形图)