日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：cxy107750 ? 更新時間： 2023-01-12 編程語言

正文

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

1. 心電圖

EcgChart 跟LineChart形態上是相似的，但是EcgChart的點相對于LineChart密集的多，之前的LineChart相當于每個RecyclerView的Itemview 中的Model對應的value值，而心電圖的ItemDataModel背后有一個List的value值與之對應，針對1080px width的手機而言，極大可能地超出了1px一個Point，所以這里的繪制邏輯換成每個Item中對應一段path, path 是由ItemDataModel的List，注意處理前后兩個Path的銜接處即可, 這里具體List的大小可根據需求來定，原始的每個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是根據睡眠時長然后睡眠的Type來確定不同的高度、顏色等。這里先看下睡眠泳道動圖gif:

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

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

介紹完設置 Sleep泳道圖 ItemView 不一致的寬度，下邊就是如何繪制了, 因為Adpter里ItemView已經設置了它的width了，所以拿到ItemView的寬度之后，就可以直接根據它的寬度，然后不同的type確定其高度。

確定每一個RectF之后，繪制即可：

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

原文鏈接：https://juejin.cn/post/7176594964883701797

欄目分類
最近更新