Android繪制簡單條形圖
更新時間：2022年08月17日 10:19:12 作者：z真真
這篇文章主要為大家詳細介紹了Android繪制簡單條形圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Android繪制簡單條形圖的具體代碼，供大家參考，具體內(nèi)容如下
- 一種方案是：path先添加一個圓角矩形，再添加一個角的正方形
- 另一種直接通過api ，radii 需要傳入8個數(shù)值，分四組，從左上角開始 addRoundRect(RectF rect, float[] radii, Direction dir)
中間有個小點：如果在一個循環(huán)里，同時畫柱子和文字，會出現(xiàn)前面3個柱子上的文字被柱子覆蓋，只有最后1個柱子才展示文字標記。
比如說1是柱子，2是文字，畫個柱子，畫個文字；往右邊挪挪位置，再畫個柱子，再畫個文字就是12121212的順序，會出現(xiàn)前面3個2被1覆蓋；使用兩個循環(huán)，先把柱子全部畫完，然后再畫文字，就是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節(jié)-xxx", "第2節(jié)", "第3節(jié)", "第4節(jié)")
? ? 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份，用于彌補數(shù)據(jù)源的非百分比
? ? ? ? stepY /= 100f
? ? ? ? //繪制X軸
? ? ? ? var stepX = -_17DP
? ? ? ? val halfTextWidth = mPaint.measureText("第1節(jié)") / 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
? ? ? ? ? ? //標記第一個豎狀圖的分數(shù)
? ? ? ? ? ? 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)
? ? ? ? ? ? //標記第二個豎狀圖的分數(shù)
? ? ? ? ? ? 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()
? ? ? ? }
? ? }
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹Android應(yīng)用中插入廣告,這里提供了詳細的資料及實現(xiàn)示例代碼，有興趣的小伙伴可以參考下2016-08-08
這篇文章主要介紹了Android控件陰影顏色調(diào)整示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Android通過自定義View實現(xiàn)隨機驗證碼的相關(guān)資料,需要的朋友可以參考下2016-03-03
本文為大家分享了25個實用酷炫的Android開源UI框架，靈活運用這些UI框架可在日常工作中節(jié)省不少時間2018-04-04
Flutter 枚舉值enum和int互相轉(zhuǎn)化總結(jié)
這篇文章主要為大家介紹了Flutter 枚舉值enum和int互相轉(zhuǎn)化總結(jié)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Android中AutoCompleteTextView自動提示
這篇文章主要為大家詳細介紹了Android中AutoCompleteTextView自動提示的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Kotlin如何優(yōu)雅地判斷EditText數(shù)據(jù)是否為空詳解
這篇文章主要給大家介紹了關(guān)于Kotlin如何優(yōu)雅地判斷EditText數(shù)據(jù)是否為空的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用kotlin具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
Android垃圾回收機制及程序優(yōu)化System.gc
這篇文章主要介紹了Android垃圾回收機制及程序優(yōu)化System.gc的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了Android如何使用插件實現(xiàn)代碼混淆，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下2021-03-03
Android 獲取屏幕高度,標題高度,狀態(tài)欄高度(實例代碼)
getWindow().findViewById(Window.ID_ANDROID_CONTENT)這個方法獲取到的view就是程序不包括標題欄的部分，然后就可以知道標題欄的高度了2013-11-11