快捷導(dǎo)航

Android?RecyclerChart其它圖表繪制示例詳解

更新時(shí)間：2022年12月14日 08:56:25 作者：cxy107750

這篇文章主要為大家介紹了Android?RecyclerChart其它圖表繪制示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

之前章節(jié)介紹了RecyclerChart 中一些通用的圖表的相關(guān)繪制邏輯，本章節(jié)介紹兩種Special的Chart的繪制，一種是心電圖，一種是睡眠圖。首先我們來看下心電圖EcgChart的繪制。

1. 心電圖

EcgChart 跟LineChart形態(tài)上是相似的，但是EcgChart的點(diǎn)相對(duì)于LineChart密集的多，之前的LineChart相當(dāng)于每個(gè)RecyclerView的Itemview 中的Model對(duì)應(yīng)的value值，而心電圖的ItemDataModel背后有一個(gè)List的value值與之對(duì)應(yīng)，針對(duì)1080px width的手機(jī)而言，極大可能地超出了1px一個(gè)Point，所以這里的繪制邏輯換成每個(gè)Item中對(duì)應(yīng)一段path, path 是由ItemDataModel的List，注意處理前后兩個(gè)Path的銜接處即可, 這里具體List的大小可根據(jù)需求來定，原始的每個(gè)Item中是20個(gè)Point。首先先看下橫屏無線右滑的EcgChart動(dòng)圖gif:

繪制的邏輯代碼, 因?yàn)槊總€(gè)ItemView的width也很小就沒有像之前的LineChart單獨(dú)處理邊界的繪制問題了。

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 用來銜接兩個(gè)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對(duì)象也如上所述的包含一個(gè)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圖表，每個(gè)Itemview 是等寬的，這里的Item是根據(jù)睡眠時(shí)長然后睡眠的Type來確定不同的高度、顏色等。這里先看下睡眠泳道動(dòng)圖gif:

看下代碼在SleepChartAdapter中設(shè)置不同的ItemView的寬度，setLinearLayout函數(shù)設(shè)置：

以上代碼里通過SleepItemEntry計(jì)算出ItemWidth的寬度，然后傳給setLinearLayout函數(shù)：

介紹完設(shè)置 Sleep泳道圖 ItemView 不一致的寬度，下邊就是如何繪制了, 因?yàn)锳dpter里ItemView已經(jīng)設(shè)置了它的width了，所以拿到ItemView的寬度之后，就可以直接根據(jù)它的寬度，然后不同的type確定其高度。

確定每一個(gè)RectF之后，繪制即可：

本文主要介紹在除了基本的BarChart、LineChart、BezierChart等之外，可以看到RecyclerChart 可以繪制更多的可能性的圖表，在RecyclerView的 Adapter， dataModel, Render的配合下會(huì)有不同的可能性，能夠解決各種不同的需求，同樣例如之前的MPChart中介紹的SegmentBarChart這種變種的柱狀圖等，都可以實(shí)現(xiàn)的。

以上就是Android RecyclerChart其它圖表繪制示例詳解的詳細(xì)內(nèi)容，更多關(guān)于RecyclerChart圖表繪制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: