Android绘制条形图
z真真 人气:0- 一种方案是:path先添加一个圆角矩形,再添加一个角的正方形
- 另一种直接通过api ,radii 需要传入8个数值,分四组,从左上角开始 addRoundRect(RectF rect, float[] radii, Direction dir)
中间有个小点:如果在一个循环里,同时画柱子和文字,会出现前面3个柱子上的文字被柱子覆盖,只有最后1个柱子才展示文字标记。
比如说1是柱子,2是文字,画个柱子,画个文字;往右边挪挪位置,再画个柱子,再画个文字就是12121212的顺序,会出现前面3个2被1覆盖;使用两个循环,先把柱子全部画完,然后再画文字,就是11112222的顺序,这样是ok的
完整代码
class BarGraphView @JvmOverloads constructor(context: Context, attributeSet: AttributeSet? = null, defStyle: Int = 0) : View(context, attributeSet, defStyle) { private val item1BgColor = 0xFFA28AFF.toInt() private val item2BgColor = 0xFFD4EFFF.toInt() private val item1TextColor = Color.WHITE private val item2TextColor = 0xFF3FB6FF.toInt() private val textColor = 0xFF999999.toInt() private val titleColor = 0xFF666666.toInt() private val dividerColor = 0xFFEEEEEE.toInt() private val _11SP = DensityUtil.sp2px(11f).toFloat() private val _12SP = DensityUtil.sp2px(12f).toFloat() private val circleRadius = DensityUtil.dp2px(3.5f).toFloat() private val _8DP = DensityUtil.dp2px(8f).toFloat() private val _17DP = DensityUtil.dp2px(17f).toFloat() private val _24DP = DensityUtil.dp2px(24f).toFloat() private var itemWidth = 0f private val mPaint = Paint() private val paintItem1 = Paint() private val paintItem2 = Paint() private val pathItem1 = Path() private val pathItem2 = Path() private val rectFItem1 = RectF() private val rectFItem2 = RectF() private val radiiItem1: FloatArray = floatArrayOf(_8DP, _8DP, _8DP, _8DP, 0f, 0f, _8DP, _8DP) private val radiiItem2: FloatArray = floatArrayOf(_8DP, _8DP, _8DP, _8DP, _8DP, _8DP, 0f, 0f) // private val rectFTemp = RectF() private var graphHeight = 0f private val verticalAxis = arrayListOf<String>("0%", "25%", "50%", "75%", "100%") private val horizontalAxis = arrayListOf<String>("第1节-xxx", "第2节", "第3节", "第4节") private val mData = arrayListOf<RateItem>() init { mPaint.isAntiAlias = true mPaint.style = Paint.Style.FILL mPaint.strokeWidth = 1f paintItem1.isAntiAlias = true paintItem1.style = Paint.Style.FILL paintItem1.color = item1BgColor paintItem2.isAntiAlias = true paintItem2.style = Paint.Style.FILL paintItem2.color = item2BgColor setLayerType(View.LAYER_TYPE_SOFTWARE, mPaint) setLayerType(View.LAYER_TYPE_SOFTWARE, paintItem1) setLayerType(View.LAYER_TYPE_SOFTWARE, paintItem2) } override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh) "w $w h $h oldw $oldw oldh $oldh".log() graphHeight = h - _17DP itemWidth = 0.08f * w } fun setData(data: List<RateItem>) { mData.clear() mData.addAll(data) invalidate() } override fun onDraw(canvas: Canvas) { canvas.translate(0f, 0.88f * height) //中心点 // mPaint.color = Color.RED // canvas.drawCircle(0f, 0f, 10f, mPaint) //绘制标题栏的两个圆点 mPaint.color = item1BgColor canvas.drawCircle(circleRadius, -0.78f * height, circleRadius, mPaint) mPaint.color = item2BgColor canvas.drawCircle(width / 2f - _8DP - circleRadius, -0.78f * height, circleRadius, mPaint) //绘制标题栏的两行文字 mPaint.color = titleColor mPaint.textSize = _12SP mPaint.typeface = Typeface.DEFAULT_BOLD canvas.drawText("宝贝xxxxxxxxxx", 2 * circleRadius + _8DP, -0.76f * height, mPaint) canvas.drawText("全国xxxxxxxxxxxxxxxxxxx", width / 2f, -0.76f * height, mPaint) mPaint.textSize = _11SP mPaint.typeface = Typeface.DEFAULT val heightInterval = graphHeight / 6f val widthInterval = width / 4.5f var stepY = heightInterval //绘制Y轴,百分比 for (item in verticalAxis) { stepY -= heightInterval mPaint.color = dividerColor canvas.drawLine(0.4f * widthInterval, stepY, width.toFloat(), stepY, mPaint) mPaint.color = textColor canvas.drawText(item, 0f, stepY + _11SP / 2f, mPaint) "heightInterval $heightInterval widthInterval $widthInterval stepY $stepY ".log() } //把Y轴高度分成100份,用于弥补数据源的非百分比 stepY /= 100f //绘制X轴 var stepX = -_17DP val halfTextWidth = mPaint.measureText("第1节") / 2f for (index in 0 until horizontalAxis.size) { if (index >= mData.size) break stepX += widthInterval //绘制X轴 mPaint.textSize = _11SP mPaint.color = textColor mPaint.typeface = Typeface.DEFAULT canvas.drawText(horizontalAxis[index], stepX - (mPaint.measureText(horizontalAxis[index]) / 2f - halfTextWidth), heightInterval - _8DP, mPaint) //绘制条形图,计算x点 val mid = stepX + halfTextWidth val left = mid - itemWidth val right = mid + itemWidth //绘制第一个竖状图 val item1Height = stepY * mData[index].childRate rectFItem1.set(left, item1Height, mid, 0f) pathItem1.moveTo(mid, 0f) pathItem1.addRoundRect(rectFItem1, radiiItem1, Path.Direction.CCW) // rectFTemp.set(mid - _8DP, -_8DP, mid, 0f) // pathItem1.addRect(rectFTemp, Path.Direction.CCW) pathItem1.close() canvas.drawPath(pathItem1, paintItem1) //绘制第二个竖状图 val item2Height = stepY * mData[index].averageRate rectFItem2.set(mid, item2Height, right, 0f) pathItem2.moveTo(mid, 0f) pathItem2.addRoundRect(rectFItem2, radiiItem2, Path.Direction.CW) // rectFTemp.set(mid, -_8DP, mid + _8DP, 0f) // pathItem2.addRect(rectFTemp, Path.Direction.CW) pathItem2.close() canvas.drawPath(pathItem2, paintItem2) "heightInterval $heightInterval widthInterval $widthInterval stepX $stepX pathItem1 $rectFItem1 pathItem2 $rectFItem2 _17DP$_17DP".log() } //绘制X轴 stepX = -_17DP mPaint.textSize = _12SP mPaint.typeface = Typeface.DEFAULT_BOLD for (index in 0 until horizontalAxis.size) { if (index >= mData.size) break stepX += widthInterval //绘制条形图,计算x点 val mid = stepX + halfTextWidth val left = mid - itemWidth val right = mid + itemWidth val item1Height = stepY * mData[index].childRate val item2Height = stepY * mData[index].averageRate //标记第一个竖状图的分数 mPaint.color = item1TextColor val childRateStr = mData[index].childRate.toString() val x1 = (left + mid - mPaint.measureText(childRateStr)) / 2; val y1 = if (item1Height > -_24DP) item1Height else item1Height + _17DP canvas.drawText(childRateStr, x1, y1, mPaint) //标记第二个竖状图的分数 mPaint.color = item2TextColor val averageRateStr = mData[index].averageRate.toString() val x2 = (mid + right - mPaint.measureText(childRateStr)) / 2 val y2 = if (item2Height > -_24DP) item2Height + _11SP else item2Height + _17DP canvas.drawText(averageRateStr, x2, y2, mPaint) "childRateStr $childRateStr averageRateStr $averageRateStr text1 $x1 * $y1 text2 $x2 * $y2".log() // "childRateStr $childRateStr averageRateStr $averageRateStr heightInterval $heightInterval widthInterval $widthInterval stepX $stepX pathItem1 $rectFItem1 pathItem2 $rectFItem2 _17DP$_17DP".log() } } }
加载全部内容