美文网首页
自定义view画渐变柱形图

自定义view画渐变柱形图

作者: 在寻找雪见的景天 | 来源:发表于2019-03-30 11:42 被阅读0次

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



效果图非常简单,就不用第三方库了,我们直接画吧,这里主要用到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---以镜像的方式在水平和垂直两个方向上重复,相邻图像有间隙

简单的柱形图就出来啦。

相关文章

  • 2019-12-23

    自定义view画渐变图形,inflate 自定义view:画渐变图形 参考:自定义View-第十六步:Linear...

  • 自定义view画渐变柱形图

    记录一下画柱形图的过程,效果图如下: 效果图非常简单,就不用第三方库了,我们直接画吧,这里主要用到LinearGr...

  • Android 多色渐变按钮

    多渐变色自定义view style

  • 2018-06-27

    自定义View之画文字

  • Android炫酷应用300例读书笔记四

    第4章图形和图像89.在自定义View中绘制径向渐变的图形 90.在自定义View中实现图像波纹起伏效果 Wave...

  • Androd自定义view--简单实战练习

    参考文章:Android 自定义 View(2) -- 使用 1.渐变的SeekBar 地址:https://gi...

  • 线性渐变颜色实现

    采用drawable xml 中的shape gradient属性 多重渐变,自定义view,实现复杂需求的可以采...

  • 自定义view的阴影

    记录下自己因为自定义view的阴影耗时,RadialGradient是径向渐变,可以设置r,startcolor,...

  • 2018-03-28

    图片优化,加载大图 自定义view,实现方案 Textview 7行后缀全文 下拉刷新 渐变浮层 技术积累

  • android常用知识

    自定义view 画矩形canvas.drawRect(left, top, right, bottom, pain...

网友评论

      本文标题:自定义view画渐变柱形图

      本文链接:https://www.haomeiwen.com/subject/lbdjbqtx.html