Android?RecyclerChart其它圖表繪制示例詳解
正文
之前章節(jié)介紹了RecyclerChart 中一些通用的圖表的相關(guān)繪制邏輯,本章節(jié)介紹兩種Special的Chart的繪制,一種是心電圖,一種是睡眠圖。首先我們來看下心電圖EcgChart的繪制。
1. 心電圖
EcgChart 跟LineChart形態(tài)上是相似的,但是EcgChart的點相對于LineChart密集的多,之前的LineChart相當(dāng)于每個RecyclerView的Itemview 中的Model對應(yīng)的value值,而心電圖的ItemDataModel背后有一個List的value值與之對應(yīng),針對1080px width的手機而言,極大可能地超出了1px一個Point,所以這里的繪制邏輯換成每個Item中對應(yīng)一段path, path 是由ItemDataModel的List,注意處理前后兩個Path的銜接處即可, 這里具體List的大小可根據(jù)需求來定,原始的每個Item中是20個Point。首先先看下橫屏無線右滑的EcgChart動圖gif:
繪制的邏輯代碼, 因為每個ItemView的width也很小就沒有像之前的LineChart單獨處理邊界的繪制問題了。
private <T extends BarEntry> void drawLineChartWithoutPoint(Canvas canvas, RecyclerView parent, YAxis mYAxis) { final float parentRightBoard = parent.getWidth() - parent.getPaddingRight(); final float parentLeft = parent.getPaddingLeft(); //BaseBarChartAdapter adapter = (BaseBarChartAdapter) parent.getAdapter(); final int childCount = parent.getChildCount(); for (int i = 0; i < childCount; i++) { View child = parent.getChildAt(i); T barEntry = (T) child.getTag(); float preValue = Integer.MIN_VALUE; if (i > 0){ View pointF1Child = parent.getChildAt(i - 1); T barEntryLeft = (T) pointF1Child.getTag(); if (barEntryLeft instanceof EcgEntry){ List<Float> values = ((EcgEntry) barEntryLeft).values; if (values.size() > 0){ preValue = values.get(values.size() - 1); } } } if (barEntry instanceof EcgEntry){ List<Float> values = ((EcgEntry) barEntry).values; RectF rectF = ChartComputeUtil.getBarChartRectF(child, parent, mYAxis, mLineChartAttrs, barEntry); if (rectF.left < parentLeft || rectF.right > parentRightBoard){ continue; } float innerItemWidth = rectF.width()/values.size(); float startX = rectF.left; // preValue 用來銜接兩個ItemView中的path,防止斷連的問題。 preValue = preValue == Integer.MIN_VALUE?values.get(0): preValue; float firstPosition = ChartComputeUtil.getYPosition(preValue, parent, mYAxis, mLineChartAttrs); Path pathItem = new Path(); pathItem.moveTo(startX, firstPosition); for (int j = 0; j < values.size(); j++) { float yPosition = ChartComputeUtil.getYPosition(values.get(j), parent, mYAxis, mLineChartAttrs); pathItem.lineTo(startX + j * innerItemWidth, yPosition ); } canvas.drawPath(pathItem, mLineChartPaint); } } }
EcgChart整體的繪制邏輯還是比較簡單的, 這里的Entry對象也如上所述的包含一個List
public class EcgEntry extends BarEntry{ public List<Float> values = new ArrayList<>(); public EcgEntry(int i, float value, long timestamp, int type) { super(i, value, timestamp, type); } }
2. 睡眠圖
之前在MPChart的繪制中有介紹過睡眠泳道圖的繪制,不同與之前的Chart圖表,每個Itemview 是等寬的,這里的Item是根據(jù)睡眠時長然后睡眠的Type來確定不同的高度、顏色等。這里先看下睡眠泳道動圖gif:
看下代碼在SleepChartAdapter中設(shè)置不同的ItemView的寬度,setLinearLayout函數(shù)設(shè)置:
以上代碼里通過SleepItemEntry計算出ItemWidth的寬度,然后傳給setLinearLayout函數(shù):
介紹完設(shè)置 Sleep泳道圖 ItemView 不一致的寬度,下邊就是如何繪制了, 因為Adpter里ItemView已經(jīng)設(shè)置了它的width了,所以拿到ItemView的寬度之后,就可以直接根據(jù)它的寬度,然后不同的type確定其高度。
確定每一個RectF之后,繪制即可:
本文主要介紹在除了基本的BarChart、LineChart、BezierChart等之外,可以看到RecyclerChart 可以繪制更多的可能性的圖表,在RecyclerView的 Adapter, dataModel, Render的配合下會有不同的可能性,能夠解決各種不同的需求,同樣例如之前的MPChart中介紹的SegmentBarChart這種變種的柱狀圖等,都可以實現(xiàn)的。
以上就是Android RecyclerChart其它圖表繪制示例詳解的詳細(xì)內(nèi)容,更多關(guān)于RecyclerChart圖表繪制的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Flutter開發(fā)之動態(tài)權(quán)限的使用
眾所周知,Android在6.0版本后將權(quán)限修改成了動態(tài)權(quán)限,而iOS則一直使用的是動態(tài)權(quán)限,所以在Flutter應(yīng)用開發(fā)中如果涉及到一些危險權(quán)限,就需要進行動態(tài)申請,本文就詳細(xì)的介紹一下,感興趣的可以了解一下2021-09-09Android使用百度地圖出現(xiàn)閃退及定位時顯示藍(lán)屏問題的解決方法
這篇文章主要介紹了Android使用百度地圖出現(xiàn)閃退及定位時顯示藍(lán)屏問題的解決方法,需要的朋友可以參考下2018-01-01Android 抽屜效果的導(dǎo)航菜單實現(xiàn)代碼實例
本篇文章主要介紹了Android 抽屜效果的導(dǎo)航菜單實現(xiàn)代碼實例,這種側(cè)滑的抽屜效果的菜單很好,有興趣的可以了解一下。2016-12-12