金融类自定义View（四）--股票蜡烛图以及MA、BOLL指标

*本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

金融类自定义View（四）–股票蜡烛图(包含MA、BOLL指标)以及代码重构

前言

• 本文只描述蜡烛图单独的绘制逻辑，至于和分时图相同的逻辑不再阐述，感兴趣的可以查看之前的文章，会有详细的阐述。
• 首先会介绍蜡烛图的绘制思路、MA/BOLL指标的绘制、指标y轴越界问题、x轴绘制的细节处理。
• 最后会介绍一下代码的重构处理以及对后期副图部分的绘制影响。

效果图

蜡烛图【MasterView.java】

• 默认蜡烛图

• MA指标（BOLL类似）

• 蜡烛图长按

• gif

蜡烛图绘制

命名

• 主流的交易曲线图会包含两个大部分，上面一大块是走势图，包含分时图、5分图、15分图、日k、周k、月k等；下面一小块是指标，包含成交量、MACD、KDJ、RSI等。如下图，是同花顺的交易曲线图，基本也是这样构成的：

• 因此，在本项目命名如下，整个交易曲线图称为KView,上面的部分称为MasterView(主图，包含分时图和蜡烛图)；下面的部分称为MinorView(副图，包含各种副图指标)。其中蜡烛图又包含MA(5,10,20)、BOLL(26)、MA(5,10,20)\BOLL(26)三种指标，对于副图部分，计划只绘制以下三种指标，和【天厚实盘】APP保持同步：MACD(12,26,9)、RSI(6,12,24)、KDJ(9,3,3)。

蜡烛图的绘制

• 仅仅是蜡烛图的绘制很简单，之前绘制好分时图就说过这个问题。蜡烛图的矩形Y轴是根据开盘价格和闭市价格绘制对应的高度，至于哪个在上哪个在下不确定。X轴的绘制是在原来分时图目标点向左向右分别取1/2.0个单元大小。对于蜡烛间间距的处理，这里采用倍率的处理方式，间距是单个蜡烛宽度的0.1f（为什么不采用固定大小？当缩放蜡烛图时如果间距固定大小会非常丑）。至于蜡烛图Y轴中间的横线则是根据最高价和最低价对应的高度进行绘制。

• 蜡烛图的绘制如下，特别注意边界的处理，当处理可视范围内第一个Quotes时leftRectX、leftLineX必须判断和左边界的关系，取最大的，不然在界面的表现就是蜡烛图会绘制出左边界。同理，可视范围内结束点也需要考虑这个问题，同时，右侧有一个内边距需要考虑进去。

      /**
       * 绘制蜡烛图
       * @param canvas
       * @param diverWidth 蜡烛图之间的间距
       * @param List index
       * @param quotes 目标Quotes
       */
      private void drawCandleViewProcess(Canvas canvas, float diverWidth, int i,                  Quotes quotes) {
         //异常拦截以及参数设置
          ...
  
          //定位蜡烛矩形的四个点
          topRectY = (float) (mPaddingTop + mInnerTopBlankPadding +
                  mPerY * (mCandleMaxY - quotes.o));
          bottomRectY = (float) (mPaddingTop + mInnerTopBlankPadding +
                  mPerY * (mCandleMaxY - quotes.c));
          leftRectX = -mPerX / 2 + quotes.floatX + diverWidth / 2;
          rightRectX = mPerX / 2 + quotes.floatX - diverWidth / 2;
  
          //定位单个蜡烛中间线的四个点
          leftLineX = quotes.floatX;
          topLineY = (float) (mPaddingTop + mInnerTopBlankPadding +
                  mPerY * (mCandleMaxY - quotes.h));
          rightLineX = quotes.floatX;
          bottomLineY = (float) (mPaddingTop + mInnerTopBlankPadding +
                  mPerY * (mCandleMaxY - quotes.l));
  
          RectF rectF = new RectF();
          //边界处理
          if (i == mBeginIndex) {
              leftRectX = leftRectX < mPaddingLeft ? mPaddingLeft : leftRectX;
              leftLineX = leftLineX < mPaddingLeft ? mPaddingLeft : leftLineX;
          } else if (i == (mEndIndex - 1)) {
              rightRectX = rightRectX > mWidth - mPaddingRight ? mWidth - mPaddingRight : rightRectX;
              rightLineX = rightLineX > mWidth - mPaddingRight ? mWidth - mPaddingRight : rightLineX;
          }
          rectF.set(leftRectX, topRectY, rightRectX, bottomRectY);
          //设置颜色
          mCandlePaint.setColor(quotes.c > quotes.o ? mRedCandleColor : mGreenCandleColor);
  
          //绘制蜡烛图
          canvas.drawRect(rectF, mCandlePaint);
  
          //开始画low、high线
          canvas.drawLine(leftLineX, topLineY, rightLineX, bottomLineY, mCandlePaint);
      }
  

MA、BOLL的绘制

• MA、BOLL是在主图的指标表现,可以辅助用户在交易中做出策略指导。链接：百度百科：移动平均线(MA)，百度百科：布林线(BOLL)

• 在本项目中MA取最常用的5单位、10单位、20单位，简称MA(5,10,20);BOLL取常用的26单位，简称BOLL(26)。当然，在本项目中到的各种指标算法全部都抽取出来，在FinancialAlgorithm.java中。一般指标算法都是比较繁琐的，要么是多日均值，要么就是加权等等，所以对算法要求尽可能的高效。下面是MA的计算，之前写的是采用双重循环，改后之后只要一层即可，尽可能避免多重循环。

  /**
   * MA算法，period（周期）的MA的计算：带上今天，向前取period的收盘价之和除以period,即是今日的MA(period)。
   * 算法很简洁，但是是对的。
   *
   * @param period 周期，一般是：5、10、20、30、60
   */
  public static void calculateMA(List quotesList, int period) {
      if (quotesList == null || quotesList.isEmpty()) return;
      if (period < 0 || period > quotesList.size() - 1) return;
  
      double sum1 = 0;
      for (int i = 0; i < quotesList.size(); i++) {
          Quotes quotes = quotesList.get(i);
          sum1 += quotes.c;
          //边界
          if (i < period - 1) {
              continue;
          }
  
          if (i > period - 1) {
              sum1 -= quotesList.get(i - period).c;//减去之前算过的。
          }
  
          if (period == 5) {
              quotes.ma5 = sum1 / period;
          } else if (period == 10) {
              quotes.ma10 = sum1 / period;
          } else if (period == 20) {
              quotes.ma20 = sum1 / period;
          } else {
              Log.e(TAG, "calculateMA: 没有该种period，TODO:完善Quotes");
              return;
          }
  
      }
  }
  

• 对于主图指标的切换，采用的是单击click，四种类型。对于指标的绘制其实就是绘制Path，只要能确认x轴和y轴对应坐标即可。对于x轴上文已经说了，取单个蜡烛的x方向即可。对于y轴，这里取的是对应Quotes的MA值，当然这里的MA有三种MA5、MA10、MA20,因此画出来也是三条线。有心的同学看上面计算MA的算法有一个判断if (i < period - 1) {continue;}，对于i < period - 1直接就continue，意味着就没有对应的MA值。是的，对于数据集合当开始的时候是没有MA值的，有些资料会取一些默认值进行显示，这里的处理方式是不进行计算，在View的效果就是不绘制（效果如下图）。BOLL同理。

  /**
   * 主图上面的技术指标类型
   */
  public enum MasterType {
      NONE,//无
      MA,//MA5、10、20
      BOLL,//BOLL(26)
      MA_BOLL//MA5、10、20和BOLL(26)同时展示
  }
  
  
  private void drawMa(Canvas canvas) {
          //参数初始化
          ...
  
          for (int i = mBeginIndex; i < mEndIndex; i++) {
              Quotes quotes = mQuotesList.get(i);
              //在绘制蜡烛图的时候已经计算了
              float floatX = quotes.floatX;
  
                //绘制MA5的逻辑
              float floatY = getMasterDetailFloatY(quotes, MasterDetailType.MA5);
  
              //异常,在View的行为就是不显示而已，影响不大。一般都是数据的开头部分。
              if (floatY == -1) continue;
  
              if (isFirstMa5) {
                  isFirstMa5 = false;
                  path5.moveTo(floatX, floatY);
              } else {
                  path5.lineTo(floatX, floatY);
              }
  
                  //这里是绘制MA10/20的逻辑，和MA5一样
                  ...
  
            }
  
          canvas.drawPath(path5, mMa5Paint);
          canvas.drawPath(path10, mMa10Paint);
          canvas.drawPath(path20, mMa20Paint);
      }       
  

越界问题

• 在开始之前看以下两个截图，对于同一个时刻一个不展示BOLL线，一个展示BOLL线，绘制出来的蜡烛图折线图是“不一样”的。

  • 这并不是绘制错误，而是特意的处理。在绘制分时图的时候，我们对于Y轴的mPerY的计算是根据可视范围内数据集合的收盘价最大值和最小值以及Y轴有效高度计算的。这样的处理可以保证无论分时图浮动多大，可以保证分时图不会绘制出边界。分时图“值”比较单一，只需要考虑一个收盘价即可。可是，对于蜡烛图需要考虑的就比较多了，如果还是仅仅通过收盘价计算最小值和最大值，就会导致如果计算出来的“待显示的点”如果远远大于收盘价，就会导致“越界”！并且，这种情况，确实在开发过程中遇到了。因此，对于蜡烛图最大值和最小值的判断，需要遍历单个Quotes,寻找到最大和最小值。通过观察线上应用【天厚实盘】以及同花顺基本上都是这样处理的：随着主图上指标的变化，蜡烛图显示的高度并不一致，为的就是保证“不越界”。以下是寻找单个Quotes中最大值的过程，特别注意，if判断逻辑不能用else if，这个错误调试了几个小时才找到！

      /**
         * 找到单个报价中的最大值
         *
         * @param quotes
         * @param masterType
         * @return
         */
        public static double getMasterMaxY(Quotes quotes, MasterView.MasterType masterType) {
            double max = Integer.MIN_VALUE;
            //ma
            //只有在存在ma的情况下才计算
            if (masterType == MasterView.MasterType.MA || masterType == MasterView.MasterType.MA_BOLL) {
                if (quotes.ma5 != 0 && quotes.ma5 > max) {
                    max = quotes.ma5;
                }
                if (quotes.ma10 != 0 && quotes.ma10 > max) {
                    max = quotes.ma10;
                }
                if (quotes.ma20 != 0 && quotes.ma20 > max) {
                    max = quotes.ma20;
                }
            }
    
            //boll
            if (masterType == MasterView.MasterType.BOLL || masterType == MasterView.MasterType.MA_BOLL) {
                if (quotes.mb != 0 && quotes.mb > max) {
                    max = quotes.mb;
                }
                if (quotes.up != 0 && quotes.up > max) {
                    max = quotes.up;
                }
                if (quotes.dn != 0 && quotes.dn > max) {
                    max = quotes.dn;
                }
            }
            //quotes
            if (quotes.h != 0 && quotes.h > max) {
                max = quotes.h;
            }
            //没有找到
            if (max == Integer.MIN_VALUE) {
                max = 0;
            }
            return max;
    
        } 
    

代码重构

• 其实在分时图绘制完毕之后打算先整副图部分的，后来发现各种指标算法比较烦人，就直接上手蜡烛图了。
• 随着View功能、交互的的增加，代码量也大量激增，在分时图功能完成时整个View的代码行数已经过1000行了，感觉多的都没法维护了=。=，因此考虑对代码进行重构。
• 在开始绘制绘制蜡烛图之前，对代码进行了大量的重构，将一些公共的逻辑抽离到了父类，尽可能减少子类中的业务逻辑。什么是公共的逻辑？比如边距、单机长按阀值、背景、边框等等很多属性其实主图和副图都是一样的，也有部分一样的，可以分开对待，比如主图需要绘制x/y内虚线，而副图只需要绘制y轴的虚线即可。当然，还有一些父类没法实现的，可以考虑将方法抽象化，让子类去实现业务逻辑。
• 整个继承关系如下

• 在处理的时候，把和业务没有关系的View逻辑放到了BaseFinancialView中，比如各种常量的获取、View宽高的测量、以及View的工具类等。而在KView.java中则是处理主图和副图全部都有（或者部分有）的共有属性。对于部分有的特性，比如副图没有x轴的虚线绘制，可以用一个开关在父类中处理是否绘制，开关可以由子类控制。

          /**
           * 绘制内部x/y轴虚线
           * @param canvas
           */
          protected void drawInnerXy(Canvas canvas) {
              if (isShowInnerX())
                  drawInnerX(canvas);
              if (isShowInnerY())
                  drawInnerY(canvas);
          }
  

• 代码继承关系整好之后，一些线基本就OK了，下面是副图的截图，基本没有做任何处理，就可以直接显示了

• 而一些父类没法实现具体逻辑的，可以直接声明为抽象类，让子类去实现即可。

     /**
       * 父类：寻找边界和计算单元数据大小。寻找:x轴开始位置数据和结束位置的model、y轴的最大数据和最小数据对应的model；
       * 计算x/y轴数据单元大小。这个交给子类去实现，一般情况下寻找边界需要遍历，在父类中遍历没有意义，
       * 因为不知道子类还有什么遍历需求。因此改为抽象方法，子类实现。子类必须完成寻找边界的任务。
       */
      protected abstract void seekAndCalculateCellData();
  
      -------------------------------------------------------   
  
      //MasterView实现具体逻辑。
      @Override
      protected void seekAndCalculateCellData() {
          if (mQuotesList.isEmpty()) return;
  
          //对于蜡烛图，需要计算以下指标。
          if (mViewType == ViewType.CANDLE) {
             //指标算法
             ...
          }
  
  
          //寻找边界和计算单元数据大小
          ...
  
          //计算mPerX、mPerY     
         ...
  
          //重绘
          invalidate();
          }
  

• 通过代码重构的手段，实现了在分时图、蜡烛图以及蜡烛图对应指标、其它各种交互共存的情况下，MasterView的代码行数还是维持在1000多行，MasterView基本没有增加代码量。现在存在的问题是，仍然存在各种各样的属性散列在View中，感觉难以控制。MP作者PhilJay在处理这个问题是将所有属性聚合成一个对象，在使用时可能会有很多层调用，但是在使用者（开发者）层面，看到的只有一个对象，然后控制着View的各种表现。在下一阶段重构的过程中，会考虑属性的处理方式是否也采用这种方式。

code

• https://github.com/scsfwgy/FinancialCustomerView
• 注：该项目会一直维护
  
  • 绘制各种金融类的自定义View。
  • 提供金融类自定义View的实现思路。
  • 收集整理相关算法、文档以及专业资料。
  • 代码进行了大量重构。
  • 蜡烛图绘制完毕。