Android繪制簡(jiǎn)單條形圖
更新時(shí)間：2022年08月17日 10:19:12 作者：z真真
這篇文章主要為大家詳細(xì)介紹了Android繪制簡(jiǎn)單條形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Android繪制簡(jiǎn)單條形圖的具體代碼，供大家參考，具體內(nèi)容如下
- 一種方案是：path先添加一個(gè)圓角矩形，再添加一個(gè)角的正方形
- 另一種直接通過(guò)api ，radii 需要傳入8個(gè)數(shù)值，分四組，從左上角開(kāi)始 addRoundRect(RectF rect, float[] radii, Direction dir)
中間有個(gè)小點(diǎn)：如果在一個(gè)循環(huán)里，同時(shí)畫(huà)柱子和文字，會(huì)出現(xiàn)前面3個(gè)柱子上的文字被柱子覆蓋，只有最后1個(gè)柱子才展示文字標(biāo)記。
比如說(shuō)1是柱子，2是文字，畫(huà)個(gè)柱子，畫(huà)個(gè)文字；往右邊挪挪位置，再畫(huà)個(gè)柱子，再畫(huà)個(gè)文字就是12121212的順序，會(huì)出現(xiàn)前面3個(gè)2被1覆蓋；使用兩個(gè)循環(huán)，先把柱子全部畫(huà)完，然后再畫(huà)文字，就是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)
? ? ? ? //中心點(diǎn)
// ? ? ? ?mPaint.color = Color.RED
// ? ? ? ?canvas.drawCircle(0f, 0f, 10f, mPaint)
? ? ? ? //繪制標(biāo)題欄的兩個(gè)圓點(diǎn)
? ? ? ? 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)
? ? ? ? //繪制標(biāo)題欄的兩行文字
? ? ? ? mPaint.color = titleColor
? ? ? ? mPaint.textSize = _12SP
? ? ? ? mPaint.typeface = Typeface.DEFAULT_BOLD
? ? ? ? canvas.drawText("寶貝xxxxxxxxxx", 2 * circleRadius + _8DP, -0.76f * height, mPaint)
? ? ? ? canvas.drawText("全國(guó)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份，用于彌補(bǔ)數(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)
? ? ? ? ? ? //繪制條形圖，計(jì)算x點(diǎn)
? ? ? ? ? ? val mid = stepX + halfTextWidth
? ? ? ? ? ? val left = mid - itemWidth
? ? ? ? ? ? val right = mid + itemWidth
? ? ? ? ? ? //繪制第一個(gè)豎狀圖
? ? ? ? ? ? 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)
? ? ? ? ? ? //繪制第二個(gè)豎狀圖
? ? ? ? ? ? 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
? ? ? ? ? ? //繪制條形圖，計(jì)算x點(diǎn)
? ? ? ? ? ? val mid = stepX + halfTextWidth
? ? ? ? ? ? val left = mid - itemWidth
? ? ? ? ? ? val right = mid + itemWidth
? ? ? ? ? ? val item1Height = stepY * mData[index].childRate
? ? ? ? ? ? val item2Height = stepY * mData[index].averageRate
? ? ? ? ? ? //標(biāo)記第一個(gè)豎狀圖的分?jǐn)?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)
? ? ? ? ? ? //標(biāo)記第二個(gè)豎狀圖的分?jǐn)?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()
? ? ? ? }
? ? }
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決NDK開(kāi)發(fā)中Eclipse報(bào)錯(cuò)Unresolved inclusion jni.h的最終解決方法(已測(cè))
這篇文章主要介紹了解決NDK開(kāi)發(fā)中Eclipse報(bào)錯(cuò)Unresolved inclusion jni.h的最終方法,需要的朋友可以參考下2016-12-12
Android屏幕旋轉(zhuǎn) 處理Activity與AsyncTask的最佳解決方案
運(yùn)行時(shí)變更就是設(shè)備在運(yùn)行時(shí)發(fā)生變化（例如屏幕旋轉(zhuǎn)、鍵盤(pán)可用性及語(yǔ)言）。發(fā)生這些變化，Android會(huì)重啟Activity，這時(shí)就需要保存activity的狀態(tài)及與activity相關(guān)的任務(wù)，以便恢復(fù)activity的狀態(tài)。為此，google提供了三種解決方案，本文將對(duì)這三種方案進(jìn)行逐一介紹。2016-12-12
Android自定義View實(shí)現(xiàn)拖拽效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了Android 讀取資源文件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
本文主要介紹Android 自定義ListView的知識(shí)，這里整理了相關(guān)資料及實(shí)現(xiàn)示例代碼，和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-09-09
Android入門(mén)之使用RecyclerView完美實(shí)現(xiàn)瀑布流界面詳解
網(wǎng)上充滿著不完善的基于RecyclerView的瀑布流實(shí)現(xiàn)，要么根本是錯(cuò)的、要么就是只知其一不知其二。本文就來(lái)用RecyclerView完美實(shí)現(xiàn)瀑布流界面，希望大家有所幫助2023-02-02
這篇文章主要給大家介紹了關(guān)于Kotlin中高階函數(shù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Flutter開(kāi)發(fā)中的路由參數(shù)處理
在實(shí)際開(kāi)發(fā)中，我們經(jīng)常會(huì)需要在頁(yè)面跳轉(zhuǎn)的時(shí)候攜帶路由參數(shù)，典型的例子就是從列表到詳情頁(yè)的時(shí)候，需要攜帶詳情的 id，以便詳情頁(yè)獲取對(duì)應(yīng)的數(shù)據(jù)。同時(shí)，有些時(shí)候還需要返回時(shí)攜帶參數(shù)返回上一級(jí)，以便上級(jí)頁(yè)面根據(jù)返回結(jié)果更新。本篇將介紹這兩種情形的實(shí)現(xiàn)。2021-06-06
這篇文章主要為大家詳細(xì)介紹了android文件管理器的用法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Android ListView構(gòu)建支持單選和多選的投票項(xiàng)目
如何在Android的ListView中構(gòu)建CheckBox和RadioButton列表？這篇文章主要為大家詳細(xì)介紹了Android ListView實(shí)現(xiàn)支持單選和多選的投票項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01