Android绘制简单条形图
更新时间：2022年08月17日 10:19:12 作者：z真真
这篇文章主要为大家详细介绍了Android绘制简单条形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Android绘制简单条形图的具体代码，供大家参考，具体内容如下
- 一种方案是：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()
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
解决NDK开发中Eclipse报错Unresolved inclusion jni.h的最终解决方法(已测)
这篇文章主要介绍了解决NDK开发中Eclipse报错Unresolved inclusion jni.h的最终方法,需要的朋友可以参考下2016-12-12
Android屏幕旋转 处理Activity与AsyncTask的最佳解决方案
运行时变更就是设备在运行时发生变化（例如屏幕旋转、键盘可用性及语言）。发生这些变化，Android会重启Activity，这时就需要保存activity的状态及与activity相关的任务，以便恢复activity的状态。为此，google提供了三种解决方案，本文将对这三种方案进行逐一介绍。2016-12-12
这篇文章主要为大家详细介绍了Android自定义View实现拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了Android 读取资源文件实例详解的相关资料,需要的朋友可以参考下2017-06-06
本文主要介绍Android 自定义ListView的知识，这里整理了相关资料及实现示例代码，和实现效果图，有兴趣的小伙伴可以参考下2016-09-09
Android入门之使用RecyclerView完美实现瀑布流界面详解
网上充满着不完善的基于RecyclerView的瀑布流实现，要么根本是错的、要么就是只知其一不知其二。本文就来用RecyclerView完美实现瀑布流界面，希望大家有所帮助2023-02-02
这篇文章主要给大家介绍了关于Kotlin中高阶函数的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
在实际开发中，我们经常会需要在页面跳转的时候携带路由参数，典型的例子就是从列表到详情页的时候，需要携带详情的 id，以便详情页获取对应的数据。同时，有些时候还需要返回时携带参数返回上一级，以便上级页面根据返回结果更新。本篇将介绍这两种情形的实现。2021-06-06
这篇文章主要为大家详细介绍了android文件管理器的用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
Android ListView构建支持单选和多选的投票项目
如何在Android的ListView中构建CheckBox和RadioButton列表？这篇文章主要为大家详细介绍了Android ListView实现支持单选和多选的投票项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
最新评论