快捷導(dǎo)航

RecyclerChart動(dòng)態(tài)屬性圖標(biāo)聯(lián)動(dòng)數(shù)據(jù)動(dòng)態(tài)加載詳解

更新時(shí)間：2023年03月02日 08:55:36 作者：cxy107750

這篇文章主要為大家介紹了RecyclerChart動(dòng)態(tài)屬性圖標(biāo)聯(lián)動(dòng)數(shù)據(jù)動(dòng)態(tài)加載詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

本章節(jié)繼上一章節(jié)中相關(guān)的動(dòng)態(tài)屬性作介紹，主要講述三個(gè)功能實(shí)現(xiàn)點(diǎn)，第一個(gè)是上下圖表聯(lián)動(dòng)問(wèn)題，類(lèi)似于股票軟件K線(xiàn)上面的Candle圖跟下邊的MACD之類(lèi)的圖表聯(lián)動(dòng)的實(shí)現(xiàn)；第二點(diǎn)是左右滑動(dòng)，觸邊時(shí)數(shù)據(jù)動(dòng)態(tài)加載的實(shí)現(xiàn)；第三點(diǎn)當(dāng)滑動(dòng)Fling結(jié)束后，顯示數(shù)據(jù)跨了日、周、月視圖的一個(gè)周期時(shí)，數(shù)據(jù)回溯回彈的一個(gè)效果，之前IPhone的健康A(chǔ)PP實(shí)現(xiàn)了類(lèi)似的效果，最近新的好像已經(jīng)去除了該效果。

下面的這個(gè)能量的圖表gif 能夠較好地看出聯(lián)動(dòng)跟回溯的過(guò)程：

圖表聯(lián)動(dòng)

類(lèi)似于股票的K線(xiàn)跟底部成交量Barchat圖表，這里也是上下兩個(gè)Chart圖表，筆者在寫(xiě)到這里的時(shí)候，突然間有個(gè)大膽的想法，就是完全可以在一個(gè)Chart里去繪制上下兩部分的數(shù)據(jù)展現(xiàn)，這樣的話(huà)也不會(huì)存在兩個(gè)圖表聯(lián)動(dòng)的問(wèn)題，同時(shí)可能會(huì)因?yàn)樯倭艘粋€(gè)Chart，性能更好。

好了，這里先講目前的實(shí)現(xiàn)方式。MPAndroidChart中的兩個(gè)上下兩個(gè)圖表也可以實(shí)現(xiàn)連動(dòng)的方式實(shí)現(xiàn)，通過(guò)OnChartGestureListener接口實(shí)現(xiàn)。因?yàn)镽ecyclerChart是基于Recyclerview 實(shí)現(xiàn)的，所以其實(shí)只需實(shí)現(xiàn)兩個(gè)Recylcerview的聯(lián)動(dòng)即可。

如下在recyclerBarChart 的滑動(dòng)監(jiān)聽(tīng)中同步處理recyclerLineChart的滑動(dòng)，同樣包括回溯的滑動(dòng)。

recyclerBarChart.addOnScrollListener(new RecyclerView.OnScrollListener() {
  private boolean isRightScrollInner;
  @Override
  public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
    super.onScrollStateChanged(recyclerView, newState);
    if (newState == RecyclerView.SCROLL_STATE_IDLE) {
      ....
      //回溯
      if (mBarChartAttrs.enableScrollToScale) {
        int scrollToByDx = ChartComputeUtil.computeScrollByXOffset(recyclerView, displayNumber, getXAxisType());
        recyclerView.scrollBy(scrollToByDx, 0);
        recyclerLineChart.scrollBy(scrollToByDx, 0);
      }
      .....
    }
  }
  @Override
  public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    //判斷左滑，右滑時(shí)，ScrollView的位置不一樣。
    isRightScrollInner = dx < 0;
    if (recyclerBarChart.getScrollState() != RecyclerView.SCROLL_STATE_IDLE) {
      mItemGestureListener.resetSelectedBarEntry();//清除recyclerLineChart的長(zhǎng)按。
      recyclerLineChart.scrollBy(dx, dy);
    }
  }
});

同樣的，在線(xiàn)性表 recyclerLineChart 的滑動(dòng)監(jiān)聽(tīng)里需要同步處理recyclerBarChart的滑動(dòng)，代碼類(lèi)似。

數(shù)據(jù)動(dòng)態(tài)加載

其實(shí)類(lèi)似于分頁(yè)加載數(shù)據(jù)，跟縱向vertical加載類(lèi)似，這里是橫向horizontal處理的，同樣在上面的監(jiān)聽(tīng)的Listener里面處理當(dāng)條件 !

recyclerView.canScrollHorizontally(-1) 左滑不動(dòng)，加載數(shù)據(jù)到左邊，這里L(fēng)ayoutManager因?yàn)?reverse的，所以是 DataList.addAll(list)；

當(dāng)!recyclerView.canScrollHorizontally(1) 右滑不動(dòng)是，DataList.addAll(0， list)

@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
  super.onScrollStateChanged(recyclerView, newState);
  if (newState == RecyclerView.SCROLL_STATE_IDLE) {
    //加載更多
    if (!recyclerView.canScrollHorizontally(-1) && isRightScrollInner) {//左滑不動(dòng)
      loadData(updateUI(start))
    } else if (!recyclerView.canScrollHorizontally(1)) {//右滑不動(dòng)
      loadData(updateUI(end))
    }
  }
}

回溯

這里先介紹一下實(shí)現(xiàn)方案：筆者在構(gòu)建Entry的時(shí)候埋了一個(gè)type的鉤子，當(dāng)Entry屬于日周月視圖的邊界，比如日視圖的0點(diǎn)，周視圖的周一，月視圖的1號(hào)，通常情況下是這個(gè)Item的左邊界；但是當(dāng)RTL時(shí)需要特殊處理。

第二，當(dāng)停下來(lái)的時(shí)候，遍歷當(dāng)前屏幕顯示的Items時(shí)，當(dāng)不對(duì)齊的時(shí)候，這里必定存在一個(gè)上述提到的特殊邊界的Item，計(jì)算它到Chart邊界的(不包含XAis)的距離，存到一個(gè)DistanceCompare的對(duì)象中。

第三, 在RecyclerView松手Fling停止的時(shí)候，計(jì)算上面的DistanceCompare對(duì)象中的，distanceLeft、distanceRight；根據(jù) isNearLeft() 去判斷是向左，還是向右回彈，isNearLeft() true 向左，否則向右。

//月線(xiàn)靠近左邊
public boolean isNearLeft(){
    return distanceLeft < distanceRight;
}
//計(jì)算 DistanceCompare 
private static <T extends RecyclerBarEntry> DistanceCompare findDisplayFirstTypePosition(RecyclerView recyclerView, int displayNumbers) {
  LinearLayoutManager manager = (LinearLayoutManager) recyclerView.getLayoutManager();
  DistanceCompare distanceCompare = new DistanceCompare(0, 0);
  BaseBarChartAdapter adapter = (BaseBarChartAdapter) recyclerView.getAdapter();
  if (null == manager || null == adapter) {
    return distanceCompare;
  }
  List<T> entries = adapter.getEntries();
  int firstVisibleItemPosition = manager.findFirstVisibleItemPosition();
  int position = firstVisibleItemPosition; //從右邊的第一個(gè)View開(kāi)始找
  int parentRight = recyclerView.getWidth() - recyclerView.getPaddingRight();
  int parentLeft = recyclerView.getPaddingLeft();
  for (int i = 0; i < displayNumbers; i++) {
    if (i > 0) {
      position++;
    }
    if (position >= 0 && position < entries.size()) {
      T barEntry = entries.get(position);
      if (barEntry.type == RecyclerBarEntry.TYPE_XAXIS_FIRST || barEntry.type == RecyclerBarEntry.TYPE_XAXIS_SPECIAL) {
        distanceCompare.position = position;
        View positionView = manager.findViewByPosition(position);
        if (null != positionView){
          int viewLeft = positionView.getLeft();
          int viewRight = positionView.getRight();
          distanceCompare.distanceRight = parentRight - viewRight;
          distanceCompare.distanceLeft = viewLeft - parentLeft;
        }
        distanceCompare.setBarEntry(barEntry);
        break;
      }
    }
  }
  return distanceCompare;
}

根據(jù) distanceCompare 計(jì)算 scrollByXOffset：簡(jiǎn)單的數(shù)學(xué)計(jì)算，不過(guò)需要仔細(xì)。

public static <T extends RecyclerBarEntry> int computeScrollByXOffset(RecyclerView recyclerView, int displayNumbers, int type) {
  DistanceCompare distanceCompare = findDisplayFirstTypePosition(recyclerView, displayNumbers);
  LinearLayoutManager manager = (LinearLayoutManager) recyclerView.getLayoutManager();
  BaseBarChartAdapter adapter = (BaseBarChartAdapter) recyclerView.getAdapter();
  if (null == adapter) {
  return 0;
  }
  List<T> entries = adapter.getEntries();
  int positionCompare = distanceCompare.position;
  //T entry = entries.get(positionCompare);
  View compareView = manager.findViewByPosition(positionCompare);
  if (null == compareView) {
  return 0;
  }
  int compareViewRight = compareView.getRight();
  int compareViewLeft = compareView.getLeft();
  int childWidth = compareView.getWidth();
  int parentLeft = recyclerView.getPaddingLeft();
  int parentRight = recyclerView.getWidth() - recyclerView.getPaddingRight();
  int scrollByXOffset;
  if (distanceCompare.isNearLeft()) {
  //靠近左邊，content左移，recyclerView右移，取正。
  //情況 1.
  int distance = AppUtils.isRTLDirection() ? compareViewLeft - parentLeft 
    : compareViewRight - parentLeft;//原始調(diào)整距離
  if (positionCompare < displayNumbers + 1) {
    //防止 positionCompare過(guò)大，計(jì)算firstViewRight時(shí)，int越界
  int firstViewRight = compareViewRight + positionCompare * childWidth;
  int distanceRightBoundary = Math.abs(firstViewRight - parentRight);//右邊界
  if (distanceRightBoundary < distance) { //content左移不夠,頂?shù)筋^,用distanceRightBoundary
  distance = distanceRightBoundary;
  }
  }
  scrollByXOffset = distance;
  } else {//靠近右邊，content右移，recyclerView左移，取負(fù)。
  int distance = AppUtils.isRTLDirection()?parentRight - compareViewLeft : 
    parentRight - compareViewRight;//原始調(diào)整距離
  if (entries.size() - positionCompare < displayNumbers) {
  //這個(gè)值會(huì)為負(fù)的。
  int lastViewLeft = compareViewLeft - (entries.size() - 1 - positionCompare) * childWidth;
  int distanceLeftBoundary = Math.abs(parentLeft - lastViewLeft);
    //右邊 - 左邊，因?yàn)?lastViewLeft是負(fù)值，實(shí)際上是兩值相加。
  if (distanceLeftBoundary < distance) {//content右移不夠，頂?shù)筋^，distanceLeftBoundary
  distance = distanceLeftBoundary;
  }
  }
  //記得取負(fù)， scrollBy的話(huà)f
  scrollByXOffset = distance - 2 * distance;
  }
  return scrollByXOffset;
}

最終也在onScrollStateChanged 實(shí)現(xiàn)回溯：

@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
  super.onScrollStateChanged(recyclerView, newState);
  if (newState == RecyclerView.SCROLL_STATE_IDLE) {
    .....
    //回溯
    if (mBarChartAttrs.enableScrollToScale) {
      int scrollToByDx = ChartComputeUtil.computeScrollByXOffset(
        recyclerView, displayNumber, getXAxisType());
      recyclerView.scrollBy(scrollToByDx, 0);
      recyclerLineChart.scrollBy(scrollToByDx, 0);
    }
    ......
  }
}

至此，RecyclerChart相關(guān)的動(dòng)態(tài)屬性相關(guān)介紹完了，另外比如回溯完后，YAXis的變化等。

以上就是RecyclerChart動(dòng)態(tài)屬性圖標(biāo)聯(lián)動(dòng)數(shù)據(jù)動(dòng)態(tài)加載詳解的詳細(xì)內(nèi)容，更多關(guān)于RecyclerChart動(dòng)態(tài)屬性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: