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-09
Android使用百度地圖出現(xiàn)閃退及定位時顯示藍(lán)屏問題的解決方法
這篇文章主要介紹了Android使用百度地圖出現(xiàn)閃退及定位時顯示藍(lán)屏問題的解決方法,需要的朋友可以參考下2018-01-01
Android 抽屜效果的導(dǎo)航菜單實現(xiàn)代碼實例
本篇文章主要介紹了Android 抽屜效果的導(dǎo)航菜單實現(xiàn)代碼實例,這種側(cè)滑的抽屜效果的菜單很好,有興趣的可以了解一下。2016-12-12

