效果图
第一张为非会员gif制作的效果图会有些模糊,第二张为在模拟器显示的原图


思路
拿到一个自定义view UI是,先要分析怎么一步一步画出来,在进行代码编写
比如这个圆形柱状图,从下面几步开始
- 应该画5根距离相同的灰色坐标线,
- 画柱状图三块文字部分
- 画柱状图灰色部分
- 柱状图蓝色部分
- 画柱状图黄色圆圈和黄线部分
- 把柱状图数据赋值和画柱状图功能分离出来,不在自定义类里,做到项目需要使用时无需看内部代码,直接看外部调用显示即可。
主要知识点
圆形柱状图有由 顶部半圆+方形+底部半圆组成
边界值注意点
当蓝色长度值小于底部圆半径时,不画蓝色方形,只画底部半圆
颜色渐变效果
startx,starty, 开始渐变的xy轴坐标,结束颜色渐变的XY轴坐标。
backGradient = new LinearGradient(startx,starty, stopx, stopy,
new int[]{cylinderColorBlueStart, cylinderColorBlueMiddle, cylinderColorBlueMiddleEnd}, null, Shader.TileMode.CLAMP);
bluePaint.setShader(backGradient);
画圆是根据方形的四个坐标进行绘画的
方形四个坐标相对原点坐标位置

圆起始点0度位置为3点钟位置,画到多少度,
负数为逆时针方向开始画起,正数为顺时针开始画起,
如下图画的为水平半圆,则画的起始坐标为矩形高度的1/2开始,若画的为垂直半圆,其实坐标为矩形宽度的1/2

网友评论