android-柱狀圖、折線圖、x軸、y軸繪制以及實例代碼 [復制鏈接]

2019-6-5 10:19
littleRed 閱讀:644 評論:1 贊:1
Tag:  

代碼:http://www.osshmv.com.cn/thread-607430-1-1.html

第一幅圖是幾個實例,折線圖、柱狀圖,同時還有x軸、y軸的實現。

下面的兩幅圖分別有橫軸、縱軸、和折線圖或者柱狀圖。

作者的思路非常明確,每幅圖分為三個部分,x軸部分,y軸部分,和中間的圖形部分。每一部分都是一個自定義的view!! 


三個部分如圖所示,每個部分可有可無,可以組裝。 
其中橫軸、縱軸都是數字的列表的顯示,只不過是橫向和縱向的區別,因此可以有一個基類。中間的柱狀圖部分和折線圖也可以有一個基類,整個代碼的結構如下圖: 
 
看類名稱就可以看出類之間的關系。在此不多說。

下面是實現思路:

橫軸、縱軸實現思路 
因為是坐標圖,所以橫軸、縱軸數據應該從服務器或者本地獲取到的,應該提前知道要顯示的數據,此時,橫軸縱軸要顯示的數據的個數已知,最大致最小值也可以知道,由此,可以得到兩個數據之間顯示的間距,有了間距,就可以一個個的顯示數據啦。 
公式表示就是:
x = gap * (i - 1) + gap - (textWidth / 2);

x 表示橫軸坐標 
gap 最大值最小值差值除以數據個數,就是間距 
textWidth 表示數字寬度 
i 循環變量 循環繪制數據

有了關鍵的x軸坐標,那么y軸坐標呢?這不就簡單了嗎? 
對于橫向顯示的坐標來說y軸是固定值啊。y軸設置為view的高度的一半值就可以啦!

想想! 
再想! 
是不是? 
就是這么easy!!

上面的公式表示的是橫軸的顯示,對于縱軸顯示的呢?那就是比葫蘆畫瓢!!!不說啦!!!

折線圖實現思路
折線圖是模擬真實數據的形式展現出來的,把真實數據按一定的比例放在坐標軸中進行顯示的。首先,折線圖中顯示的也是一個個的數據,然后使用path類把一個個的數據連接起來,連成線就可以啦。剩下的問題就是如何把真實數據換算成坐標中的x、y值?要顯示的數據我們已經提前知道啦。不然,我么你是畫不出來圖形的。數據的最大值最小值也已知。最大值最小值的差值與縱軸的坐標關系可以得到數值顯示的y值坐標。 
公式表示就是:

    y = height -(value-min)*(max-min)/height

其中y代表數據顯示的y軸坐標。 
height代表view的高度值 
value代表數據值 
min代表數據的最小值 
max代表數據的最大值 
看懂此公式至關重要。

那么x坐標如何搞呢?那就是數據的index啦。有了自定義view的寬度值,要顯示的數據的個數,那么橫軸方向上的數據間距是不是有了? 
想想上面的橫軸縱軸的思路,是不是有啦!!比葫蘆畫瓢!!easy!

柱狀圖實現思路
也是比葫蘆畫瓢啊!柱狀圖是矩形!需要left、top、right、bottom四個值才能確定矩形的大小。首先我們知道數據的個數、數據的最大值最小值,由此得到矩形的寬度,矩形之間應該還有間距差、寬度還要減去這個間距差值!

下面,知道最大值最小值和自定義view的高度值,由此可以得到每個高度所對應的數值,縱軸上的數據計算和上面的一樣啊!

y = height -(value-min)*(max-min)/height

這樣,代碼表示如下:

    RectF rectF = new RectF();
      rectF.left = (i * barWidth) + barMargin;
      rectF.top = height - (sliceHeight * (valuesTransition[i] - minY));
      //如果top值等于view高度值,顯示默認的柱形最小值,不至于有點都不顯示。
      rectF.top = rectF.top == height ? rectF.top - DEFAULT_BAR_MIN_CORRECTION : rectF.top;
      rectF.right = (i * barWidth) + barWidth - barMargin;
      rectF.bottom = height;

barWidth 就是矩形的寬度 
barMargin 就是矩形間距 
sliceHeight 就是高度片值 該值就是最大值最小值除以自定義view的高度得到。 
minY 是數據最小值 
sliceHeight 是自定義view的高度 
valuesTransition[i]就是要顯示的數據

對照上面的代碼想想,再想想,是不是!

有了這些就Ok啦!

再說一點,細心的朋友應該發現了上面的動畫了吧,每點擊一次,都會有動畫,這個牛逼!怎么搞得?到現在也沒有想明白,怎么搞得? 
看了代碼之后,覺得作者真是牛!!

思路如下,聽我慢慢道來: 
首先我們會得到要顯示的數據,有了數據我們可以得到數據的個數,數據的最大值最小值。我們拷貝一份和原有數據相同長度的數據,每個數據都是最小值。

 private void initValuesTarget(float[] values) {
    this.valuesTransition = values.clone();
    for (int i = 0; i < valuesTransition.length; i++) {
      valuesTransition[i] = minY;
    }
  }

代碼中的這個方法就是這樣的作用! 
有了這一組數據之后,通過這個方法:

 //計算動畫的顯示值 一步步接近實際值
  void calculateNextAnimStep() {
    animFinished = true;
    for (int i = 0; i < valuesTransition.length; i++) {
      float diff = values[i] - minY;
      float step = (diff * ANIM_DELAY_MILLIS) / animDuration;

      if (valuesTransition[i] + step >= values[i]) {
        valuesTransition[i] = values[i];
      } else {
        valuesTransition[i] = valuesTransition[i] + step;
        animFinished = false;
      }
    }

    if (animFinished && animListener != null) {
      animListener.onAnimFinish();
    }
  }

其中

 float diff = values[i] - minY;
      float step = (diff * ANIM_DELAY_MILLIS) / animDuration;

這兩句代碼最為關鍵! 
diff表示當前顯示的值和最下值的差值 
ANIM_DELAY_MILLIS表示動畫的延時時間 默認30毫秒,當然該值可以改 
animDuration 動畫的持續時間 默認500毫秒

由此可以得到,在動畫持續時間內,每一次動畫累加的值!

這樣一點點累加,不斷重繪,就形成了動畫!!!!

那么動畫是如何開啟的呢?

/**
   * 繪畫柱狀圖的核心方法
   * @param canvas
   */
  public void draw(Canvas canvas) {
    super.draw(canvas);
    .........
    //通知動畫繪制
    if (anim && !animFinished) {
      handlerAnim.postDelayed(doNextAnimStep, ANIM_DELAY_MILLIS);
    }

在ondraw方法中的末尾,會使用hander的postDelayed方法,延時30毫秒進行重繪。 
第一個參數是

final Runnable doNextAnimStep = new Runnable() {
    @Override public void run() {
      invalidate();
    }
  };

看到了吧,invalidate()方法,進行重繪。

OK!核心內容全部解釋完畢!! 
下面就是代碼啦!

動畫監聽器實現代碼

看代碼,不多說:

public interface CharterAnimListener {
  void onAnimFinish();
}

簡單吧,就是個接口,當動畫完成之后,調用此接口實現動畫完成之后的操作。具體怎么使用,請看下面的代碼。這里有個印象就成。

 ChartLabels 橫軸縱軸實現代碼

橫軸縱軸共分為兩部分,CharterXLabels CharterYLabels類。他們有一個共同的基類CharterLabelsBase類。 
首先看CharterLabelsBase基類的代碼:

public class CharterLabelsBase extends View {
  /**
   * 垂直方向默認三種 上中下
   */
  public static final int VERTICAL_GRAVITY_TOP = 0;
  public static final int VERTICAL_GRAVITY_CENTER = 1;
  public static final int VERTICAL_GRAVITY_BOTTOM = 2;
  /**
   * 水平方向默認三種:左中右
   */
  public static final int HORIZONTAL_GRAVITY_LEFT = 0;
  public static final int HORIZONTAL_GRAVITY_CENTER = 1;
  public static final int HORIZONTAL_GRAVITY_RIGHT = 2;
  //垂直方向默認居下
  private static final int DEFAULT_VERTICAL_GRAVITY = VERTICAL_GRAVITY_BOTTOM;
  //水平方向默認居左
  private static final int DEFAULT_HORIZONTAL_GRAVITY = HORIZONTAL_GRAVITY_LEFT;
  private static final boolean DEFAULT_STICKY_EDGES = false;

  Paint paintLabel;//標簽的畫筆
  boolean[] visibilityPattern;//標簽的顯示模式
  int verticalGravity;//縱軸標簽顯示位置
  int horizontalGravity;//橫軸標簽的顯示位置
  String[] values;//標簽數值
  boolean stickyEdges;//是否跨邊顯示
  private int paintLabelColor;//標簽的顏色
  private float paintLabelSize;//標簽的大小

  protected CharterLabelsBase(Context context) {
    this(context, null);
  }

  protected CharterLabelsBase(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  protected CharterLabelsBase(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs);
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  protected CharterLabelsBase(Context context, AttributeSet attrs, int defStyleAttr,
      int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init(context, attrs);
  }

  private void init(Context context, AttributeSet attrs) {
    /**
     * isInEditMode()是view類的方法,默認返回false
     */
    if (isInEditMode()) {
      return;
    }

    final TypedArray typedArray = context.obtainStyledAttributes(attrs,
            R.styleable.Charter);
    stickyEdges = typedArray.getBoolean(
            R.styleable.Charter_c_stickyEdges, DEFAULT_STICKY_EDGES);
    //垂直方向 默認居中
    verticalGravity =
        typedArray.getInt(R.styleable.Charter_c_verticalGravity,
                DEFAULT_VERTICAL_GRAVITY);
    //水平方向,默認居左
    horizontalGravity =
        typedArray.getInt(R.styleable.Charter_c_horizontalGravity,
                DEFAULT_HORIZONTAL_GRAVITY);
    //標簽的顏色
    paintLabelColor = typedArray.getColor(R.styleable.Charter_c_labelColor,
        getResources().getColor(R.color.default_labelColor));
    //標簽大小,默認10sp
    paintLabelSize = typedArray.getDimension(R.styleable.Charter_c_labelSize,
        getResources().getDimension(R.dimen.default_labelSize));
    typedArray.recycle();//回收
    //標簽畫筆
    paintLabel = new Paint();
    paintLabel.setAntiAlias(true);
    paintLabel.setColor(paintLabelColor);
    paintLabel.setTextSize(paintLabelSize);
    /**
     *  標簽可見性模式 默認顯示、顯示、顯示。。。。。
     *  當然也可以設置模式。
     */
    visibilityPattern = new boolean[] { true };
  }

  public boolean isStickyEdges() {
    return stickyEdges;
  }

  public void setStickyEdges(boolean stickyEdges) {
    this.stickyEdges = stickyEdges;
    invalidate();
  }

  public Paint getPaintLabel() {
    return paintLabel;
  }

  public void setPaintLabel(Paint paintLabel) {
    this.paintLabel = paintLabel;
    invalidate();
  }

  public boolean[] getVisibilityPattern() {
    return visibilityPattern;
  }

  public void setVisibilityPattern(boolean[] visibilityPattern) {
    this.visibilityPattern = visibilityPattern;
    invalidate();
  }

  public int getVerticalGravity() {
    return verticalGravity;
  }
  //使用注解 限制設置的值
  public void setVerticalGravity(@VerticalGravity int verticalGravity) {
    this.verticalGravity = verticalGravity;
    invalidate();
  }

  public int getHorizontalGravity() {
    return horizontalGravity;
  }

  public void setHorizontalGravity(@HorizontalGravity int horizontalGravity) {
    this.horizontalGravity = horizontalGravity;
    invalidate();
  }

  public int getLabelColor() {
    return paintLabelColor;
  }

  public void setLabelColor(@ColorInt int labelColor) {
    paintLabel.setColor(labelColor);
    paintLabelColor = labelColor;
    invalidate();
  }

  public float getLabelSize() {
    return paintLabelSize;
  }

  public void setLabelSize(float labelSize) {
    paintLabel.setTextSize(labelSize);
    paintLabelSize = labelSize;
    invalidate();
  }

  public void setLabelTypeface(Typeface typeface) {
    paintLabel.setTypeface(typeface);
    invalidate();
  }

  public String[] getValues() {
    return values;
  }

  public void setValues(float[] values) {
    setValues(floatArrayToStringArray(values));
  }

  public void setValues(String[] values) {
    if (values == null || values.length == 0) {
      return;
    }

    this.values = values;
    invalidate();
  }

  public void setValues(float[] values, boolean summarize) {
    if (summarize) {
      values = summarize(values);
    }
    //將值轉化成字符串
    setValues(floatArrayToStringArray(values));
  }

  private String[] floatArrayToStringArray(float[] values) {
    if (values == null) {
      return new String[] {};
    }

    String[] stringArray = new String[values.length];
    for (int i = 0; i < stringArray.length; i++) {
      stringArray[i] = String.valueOf((int) values[i]);
    }
    return stringArray;
  }

  /**
   * 將值進行匯總
   * 匯總之后的值共有五個。最后顯示的值也就五個值。
   * @param values
   * @return
   */
  private float[] summarize(float[] values) {
    if (values == null) {
      return new float[] {};
    }

    float max = values[0];
    float min = values[0];
    for (float value : values) {
      if (value > max) {
        max = value;
      }
      if (value < min) {
        min = value;
      }
    }
    float diff = max - min;

    return new float[] { min, diff / 5, diff / 2, (diff / 5) * 4, max };
  }

  /**
   * 定義注解
   */
  @Retention(RetentionPolicy.SOURCE)
  @IntDef({ VERTICAL_GRAVITY_TOP, VERTICAL_GRAVITY_CENTER,
          VERTICAL_GRAVITY_BOTTOM })
  public @interface VerticalGravity {
  }

  @Retention(RetentionPolicy.SOURCE)
  @IntDef({ HORIZONTAL_GRAVITY_LEFT, HORIZONTAL_GRAVITY_CENTER,
          HORIZONTAL_GRAVITY_RIGHT })
  public @interface HorizontalGravity {
  }
}

基類大部分代碼一看就懂。其中讓我最佩服的就是注解!!! 
臥槽,沒發現還有這樣的巨大的用處!佩服的五體投地!

/**
   * 定義注解
   */
  @Retention(RetentionPolicy.SOURCE)
  @IntDef({ VERTICAL_GRAVITY_TOP, VERTICAL_GRAVITY_CENTER,
          VERTICAL_GRAVITY_BOTTOM })
  public @interface VerticalGravity {
  }

  @Retention(RetentionPolicy.SOURCE)
  @IntDef({ HORIZONTAL_GRAVITY_LEFT, HORIZONTAL_GRAVITY_CENTER,
          HORIZONTAL_GRAVITY_RIGHT })
  public @interface HorizontalGravity {
  }

代碼的最后使用public @interface來定義注解!并限定了值的范圍。 
其中@Retention代表注解的存在范圍。

public enum RetentionPolicy {
    SOURCE,
    CLASS,
    RUNTIME
}

有這三種取值。源碼、二進制文件、運行時。關于注解詳細的信息,就不多說啦。大家不明白的惡補一番。

下面接著說代碼。上面的基類是橫軸縱軸的基類,定義了一些通用的方法,大家看看方法就會明白,并且主要的地方我都給出了注釋。通用的方法和變量都設置了set 和get的方法,用于在代碼中進行控制。

Paint paintLabel;//標簽的畫筆
  boolean[] visibilityPattern;//標簽的顯示模式
  int verticalGravity;//縱軸標簽顯示位置
  int horizontalGravity;//橫軸標簽的顯示位置
  String[] values;//標簽數值
  boolean stickyEdges;//是否跨邊顯示
  private int paintLabelColor;//標簽的顏色
  private float paintLabelSize;//標簽的大小

這幾個是基類中定義的變量,大家稍微記住一下,下面具體的橫軸縱軸的代碼要用到這些變量。 
值的說明的是,boolean[] visibilityPattern;//標簽的顯示模式 
這是是定義標簽的如何顯示的。 
例如:visibilityPattern=boolean[]{true};則全部的標簽都會顯示出來。 
visibilityPattern=boolean[]{true,false};則標簽隔一個顯示一個 
visibilityPattern=boolean[]{true,false,false};則標簽隔兩個顯示一個 
大家看下面的 橫軸縱軸的實現onDraw方法時會明白這個地方的設置。

還有一個是boolean stickyEdges;//是否跨邊顯示 
這個值意味著標簽是否全部占滿整個view的空間,不留邊距。具體意義請看下面的代碼。

下面就是橫軸和縱軸的實現代碼。 
先看橫軸x軸的代碼:

public class CharterXLabels extends CharterLabelsBase {
  public CharterXLabels(Context context) {
    this(context, null);
  }

  public CharterXLabels(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public CharterXLabels(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  public CharterXLabels(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
  }

  @Override public void draw(Canvas canvas) {
    super.draw(canvas);

    if (values == null || values.length == 0) {
      return;
    }

    final int valuesLength = values.length;

    final float height = getMeasuredHeight();
    final float width = getMeasuredWidth();
    //計算標簽間距
    final float gap = stickyEdges ? width / (valuesLength - 1) : width / valuesLength;

    int visibilityPatternPos = -1;

    for (int i = 0; i < valuesLength; i++) {
      if (visibilityPatternPos + 1 >= visibilityPattern.length) {
        visibilityPatternPos = 0;
      } else {
        visibilityPatternPos++;
      }

      if (visibilityPattern[visibilityPatternPos]) {
        Rect textBounds = new Rect();
        /**
         * Return in bounds (allocated by the caller) the smallest rectangle that
         * encloses all of the characters, with an implied origin at (0,0).
         * getTextBounds方法返回包裹字符串的最小的矩形Rect
         */
        paintLabel.getTextBounds(values[i], 0, values[i].length(), textBounds);
        int textHeight = 2 * textBounds.bottom - textBounds.top;
        float textWidth = textBounds.right;

        float x;
        float y;

        switch (verticalGravity) {
          case VERTICAL_GRAVITY_TOP:
            y = 0;
            break;

          case VERTICAL_GRAVITY_BOTTOM:
            y = height - textHeight/2;
            break;
          case VERTICAL_GRAVITY_CENTER:
            y = (height - textHeight) / 2;
            break;

          default:
            // VERTICAL_GRAVITY_CENTER
            y = (height - textHeight) / 2;
            break;
        }

        if (stickyEdges) {
          if (i == 0) {
            x = 0;
          } else if (i == valuesLength - 1) {
            x = width - textWidth;
          } else {
            x = gap * (i - 1) + gap - (textWidth / 2);
          }
          canvas.drawText(values[i], x, y, paintLabel);
        } else {
          x = gap * i + (gap / 2) - (textWidth / 2);
          canvas.drawText(values[i], x, y, paintLabel);
        }
      }
    }
  }
}

代碼量不多,除了三個構造器,就是一個onDraw方法啦。核心也就是這個方法! 
看懂這個類的代碼,需要知道基類中各個變量的意思是什么,在基類中每個變量我均給出了意義的注釋。主要的代碼就是onDraw方法的for循環部分。具體思路請看上面的實現思路的說明部分。 
下面是縱軸的實現代碼:

public class CharterYLabels extends CharterLabelsBase {
  public CharterYLabels(Context context) {
    this(context, null);
  }

  public CharterYLabels(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public CharterYLabels(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  public CharterYLabels(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
  }

  @Override public void draw(Canvas canvas) {
    super.draw(canvas);

    if (values == null || values.length == 0) {
      return;
    }

    final int valuesLength = values.length;

    final float height = getMeasuredHeight();
    final float width = getMeasuredWidth();
    //計算兩個標簽間的距離
    final float gap = height / (valuesLength - 1);

    int visibilityPatternPos = -1;

    for (int i = 0; i < valuesLength; i++) {
      //可見性模式
      if (visibilityPatternPos + 1 >= visibilityPattern.length) {
        visibilityPatternPos = 0;
      } else {
        visibilityPatternPos++;
      }

      if (visibilityPattern[visibilityPatternPos]) {
        Rect textBounds = new Rect();
        //返回包裹標簽的最小矩形rect
        paintLabel.getTextBounds(values[i], 0, values[i].length(), textBounds);
        int textHeight = 2 * textBounds.bottom - textBounds.top;
        float textWidth = textBounds.right;

        float x;
        float y;

        switch (horizontalGravity) {
          default:
            // HORIZONTAL_GRAVITY_LEFT
            x = 0;//默認居左
            break;

          case HORIZONTAL_GRAVITY_CENTER:
            x = (width - textWidth) / 2;
            break;

          case HORIZONTAL_GRAVITY_RIGHT:
            x = width - textWidth;
            break;
        }

        if (i == 0) {
          y = height;
        } else if (i == valuesLength - 1) {
          y = textHeight;
        } else {
          y = gap * i + (textHeight / 2);
        }
        canvas.drawText(values[i], x, y, paintLabel);
      }
    }
  }
}

同樣的代碼,三個構造器一個onDraw方法,onDraw方法是實現的核心。

細心的朋友你會發現,這兩個標簽的代碼都沒有使用上面開始說明的動畫接口?是的。因為我們現在說明的是X軸 Y軸的標簽,標簽不應該有什么動畫顯示。動畫的顯示是在柱狀圖或者折線圖中進行的。

ChartLine 折線圖實現代碼

CharterLine類實現折線圖的定義,CharterBar實現柱狀圖的定義,CharterBase是兩者的基類。 
首先看CharterBase基類的代碼:

class CharterBase extends View {
//自定義的動畫接口
  private CharterAnimListener animListener;

  protected CharterBase(Context context) {
    this(context, null);
  }

  protected CharterBase(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  protected CharterBase(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  protected CharterBase(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
  }
  ...............
 }

首先是構造器,調用了init()方法。看init()方法的代碼:

private void init() {
    //isInEditMode()返回值fasle
    if (isInEditMode()) {
      return;
    }

    animFinished = false;
    handlerAnim = new Handler();
  }
  //線程中調用繪畫
  final Runnable doNextAnimStep = new Runnable() {
    @Override public void run() {
      invalidate();
    }
  };

其中//isInEditMode()返回值fasle 這個方式View類的代碼,默認返回false值。代表自定義view是否編輯模式。 
另一個就是handler變量,handler變量就是發送消息進行重繪的,結合Runnable doNextAnimStep線程變量,調用invalidate()方法顯示view的不斷重繪。

class CharterBase extends View {
  static final int ANIM_DELAY_MILLIS = 30;//動畫延時時間設置
  static final boolean DEFAULT_ANIM = true;//是否是默認動畫
  static final long DEFAULT_ANIM_DURATION = 500;//默認動畫持續時間
  //默認自動顯示 這個屬性是否在自己中進行繪畫 請看子類調用setWillNotDraw方法
  static final boolean DEFAULT_AUTOSHOW = true;
  //線程中調用繪畫
  final Runnable doNextAnimStep = new Runnable() {
    @Override public void run() {
      invalidate();
    }
  };

  float minY;
  float maxY;

  float[] values;
  float[] valuesTransition;

  boolean anim;
  long animDuration;
  boolean animFinished;
  Handler handlerAnim;
  //自定義的動畫接口
  private CharterAnimListener animListener;

  protected CharterBase(Context context) {
    this(context, null);
  }

  protected CharterBase(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  protected CharterBase(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  protected CharterBase(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
  }

  private void init() {
    //isInEditMode()返回值fasle
    if (isInEditMode()) {
      return;
    }

    animFinished = false;
    handlerAnim = new Handler();
  }

  public void show() {
    setWillNotDraw(false);
    invalidate();
  }

  public float[] getValues() {
    return values;
  }

  public void setValues(float[] values) {
    if (values == null || values.length == 0) {
      return;
    }

    this.values = values;
    //獲取值中最大值最小值
    getMaxMinValues(values);
    initValuesTarget(values);

    animFinished = false;
    invalidate();
  }
  //重置數據
  public void resetValues() {
    if (values == null || values.length == 0) {
      return;
    }

    for (int i = 0; i < values.length; i++) {
      values[i] = minY;
    }

    setValues(values);
  }

  private void getMaxMinValues(float[] values) {
    if (values != null && values.length > 0) {
      maxY = values[0];
      minY = values[0];
      for (float y : values) {
        if (y > maxY) {
          maxY = y;
        }
        if (y < minY) {
          minY = y;
        }
      }
    }
  }

  private void initValuesTarget(float[] values) {
    this.valuesTransition = values.clone();
    for (int i = 0; i < valuesTransition.length; i++) {
      valuesTransition[i] = minY;
    }
  }

  public float getMaxY() {
    return maxY;
  }

  public void setMaxY(float maxY) {
    if (values == null) {
      throw new IllegalStateException("You must call setValues() first");
    }
    this.maxY = maxY;
    invalidate();
  }

  public float getMinY() {
    return minY;
  }

  public void setMinY(float minY) {
    if (values == null) {
      throw new IllegalStateException("You must call setValues() first");
    }
    this.minY = minY;
    invalidate();
  }
  //計算動畫的顯示值 一步步接近實際值
  void calculateNextAnimStep() {
    animFinished = true;
    for (int i = 0; i < valuesTransition.length; i++) {
      float diff = values[i] - minY;
      float step = (diff * ANIM_DELAY_MILLIS) / animDuration;

      if (valuesTransition[i] + step >= values[i]) {
        valuesTransition[i] = values[i];
      } else {
        valuesTransition[i] = valuesTransition[i] + step;
        animFinished = false;
      }
    }

    if (animFinished && animListener != null) {
      animListener.onAnimFinish();
    }
  }
  //重播動畫
  public void replayAnim() {
    if (values == null || values.length == 0) {
      return;
    }

    initValuesTarget(values);
    animFinished = false;
    invalidate();
  }

  public boolean isAnim() {
    return anim;
  }

  public void setAnim(boolean anim) {
    this.anim = anim;
    replayAnim();
  }

  public long getAnimDuration() {
    return animDuration;
  }

  public void setAnimDuration(long animDuration) {
    this.animDuration = animDuration;
    replayAnim();
  }

  public void setAnimListener(CharterAnimListener animListener) {
    this.animListener = animListener;
  }
}

完整代碼如上,其中包括很多的set get方法,值的說明的就是

//計算動畫的顯示值 一步步接近實際值
  void calculateNextAnimStep() {
    animFinished = true;
    for (int i = 0; i < valuesTransition.length; i++) {
      float diff = values[i] - minY;
      float step = (diff * ANIM_DELAY_MILLIS) / animDuration;

      if (valuesTransition[i] + step >= values[i]) {
        valuesTransition[i] = values[i];
      } else {
        valuesTransition[i] = valuesTransition[i] + step;
        animFinished = false;
      }
    }

    if (animFinished && animListener != null) {
      animListener.onAnimFinish();
    }
  }

該方法是實現動畫的核心方法!要想了解動畫的過程,請務必看懂此方法的實現過程。思路也簡單,上面說過啦,就是每一次重繪,不斷增加一個step值,不斷靠近目標值,當已經達到目標值,該值不在增加,保持目標值,當沒有達到目標值,就繼續增加,止到靠近目標值,只要有一個沒有達到目標值,動畫就沒有結束。止到所有的值達到目標值以后,動畫結束,調用動畫接口的animListener.onAnimFinish()方法進行處理。

基類說明完畢,下面就是折線圖的實現代碼:

public class CharterLine extends CharterBase {
  //指示點的類型。0是圓形  1是方形
  public static final int INDICATOR_TYPE_CIRCLE = 0;
  public static final int INDICATOR_TYPE_SQUARE = 1;
  //指示點的樣式 0實心圓圈 1空心圓圈
  public static final int INDICATOR_STYLE_FILL = 0;
  public static final int INDICATOR_STYLE_STROKE = 1;
  //默認指示點的類型 圓形
  private static final int DEFAULT_INDICATOR_TYPE = INDICATOR_TYPE_CIRCLE;
  //默認指示點的樣式 空心圓圈
  private static final int DEFAULT_INDICATOR_STYLE = INDICATOR_STYLE_STROKE;
  //默認指示點可見
  private static final boolean DEFAULT_INDICATOR_VISIBLE = true;
  //線的平滑度
  private static final float DEFAULT_SMOOTHNESS = 0.2f;
  //默認全寬 no!
  private static final boolean DEFAULT_FULL_WIDTH = false;
  public boolean fullWidth;
  private Paint paintLine;//畫線的筆
  private Paint paintFill;//填充
  private Paint paintIndicator;//指示點
  private Path path;//路徑
  private int lineColor;//線顏色
  private int chartFillColor;//填充顏色
  private int defaultBackgroundColor;//默認背景色
  private int chartBackgroundColor;//背景色
  private float strokeSize;//線寬
  private float smoothness;//線的平滑度 from = 0.0, to = 0.5
  private float indicatorSize;//指示點大小
  private boolean indicatorVisible;//指示點是否可見
  private int indicatorType;//類型
  private int indicatorColor;//顏色
  private int indicatorStyle;//樣式
  private float indicatorStrokeSize;//指示點線寬

  public CharterLine(Context context) {
    this(context, null, 0);
  }

  public CharterLine(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public CharterLine(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context, attrs);
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  public CharterLine(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init(context, attrs);
  }

  private void init(final Context context, final AttributeSet attrs) {
    final TypedArray typedArray = context.obtainStyledAttributes(attrs,
            R.styleable.Charter);
    //是否全部寬度
    fullWidth = typedArray.getBoolean(R.styleable.Charter_c_fullWidth,
            DEFAULT_FULL_WIDTH);
    //線顏色
    lineColor = typedArray.getColor(R.styleable.Charter_c_lineColor,
        getResources().getColor(R.color.default_lineColor));
    //填充顏色
    chartFillColor = typedArray.getColor(R.styleable.Charter_c_chartFillColor,
        getResources().getColor(R.color.default_chartFillColor));
    //指示點是否可見 默認可見
    indicatorVisible =
        typedArray.getBoolean(R.styleable.Charter_c_indicatorVisible,
                DEFAULT_INDICATOR_VISIBLE);
    //指示點類型  默認圓形
    indicatorType = typedArray.getInt(R.styleable.Charter_c_indicatorType,
            DEFAULT_INDICATOR_TYPE);
    //指示點大小  默認6dp
    indicatorSize = typedArray.getDimension(R.styleable.Charter_c_indicatorSize,
        getResources().getDimension(R.dimen.default_indicatorSize));
    //指示點的線寬 默認1dp的寬度
    indicatorStrokeSize = typedArray.getDimension(R.styleable
                    .Charter_c_indicatorStrokeSize,getResources().getDimension(R.dimen.default_indicatorStrokeSize));
    //指示點的顏色
    indicatorColor = typedArray.getColor(R.styleable.Charter_c_indicatorColor,
        getResources().getColor(R.color.default_indicatorColor));
    //指示點的樣式 默認圓圈
    indicatorStyle =
        typedArray.getInt(R.styleable.Charter_c_indicatorStyle,
                DEFAULT_INDICATOR_STYLE);
    //線寬 指的是折線的線寬 默認2dp
    strokeSize = typedArray.getDimension(R.styleable.Charter_c_strokeSize,
        getResources().getDimension(R.dimen.default_strokeSize));
    //線的平滑度
    smoothness = typedArray.getFloat(R.styleable.Charter_c_smoothness,
            DEFAULT_SMOOTHNESS);
    //默認動畫與否  默認顯示動畫
    anim = typedArray.getBoolean(R.styleable.Charter_c_anim, DEFAULT_ANIM);
    //動畫持續時間
    animDuration =
        typedArray.getInt(R.styleable.Charter_c_animDuration,
                (int) DEFAULT_ANIM_DURATION);
    //是否在自己中進行繪畫  默認true
    setWillNotDraw(!typedArray.getBoolean(R.styleable.Charter_c_autoShow,
            DEFAULT_AUTOSHOW));
    typedArray.recycle();//回收

    /**
     * 下面是三個畫筆
     * 一個是折線的畫筆
     * 一個是填充的畫筆
     * 一個是指示點的畫筆
     */
    paintLine = new Paint();
    paintLine.setAntiAlias(true);
    paintLine.setStrokeWidth(strokeSize);
    paintLine.setColor(lineColor);
    paintLine.setStyle(Paint.Style.STROKE);

    paintFill = new Paint();
    paintFill.setAntiAlias(true);
    paintFill.setColor(chartFillColor);
    paintFill.setStyle(Paint.Style.FILL);

    paintIndicator = new Paint();
    paintIndicator.setAntiAlias(true);
    paintIndicator.setStrokeWidth(indicatorStrokeSize);
    //默認的背景色
    defaultBackgroundColor = getResources().getColor(
            R.color.default_chartBackgroundColor);
    chartBackgroundColor = defaultBackgroundColor;
    //折線path
    path = new Path();
  }

  public Paint getPaintLine() {
    return paintLine;
  }

  public void setPaintLine(Paint paintLine) {
    this.paintLine = paintLine;
    invalidate();
  }

  public Paint getPaintFill() {
    return paintFill;
  }

  public void setPaintFill(Paint paintFill) {
    this.paintFill = paintFill;
    invalidate();
  }

  public Paint getPaintIndicator() {
    return paintIndicator;
  }

  public void setPaintIndicator(Paint paintIndicator) {
    this.paintIndicator = paintIndicator;
    invalidate();
  }

  public float getIndicatorStrokeSize() {
    return indicatorStrokeSize;
  }

  public void setIndicatorStrokeSize(float indicatorStrokeSize) {
    paintIndicator.setStrokeWidth(indicatorStrokeSize);
    this.indicatorStrokeSize = indicatorStrokeSize;
    invalidate();
  }

  /**
   * 設置指示點的類型
   * 類型支持兩種類型
   * 圓形 方形
   * @return
   */
  public int getIndicatorStyle() {
    return indicatorStyle;
  }

  public void setIndicatorStyle(@IndicatorStyle int indicatorStyle) {
    this.indicatorStyle = indicatorStyle;
    invalidate();
  }

  public int getIndicatorColor() {
    return indicatorColor;
  }

  public void setIndicatorColor(@ColorInt int indicatorColor) {
    paintIndicator.setColor(indicatorColor);
    this.indicatorColor = indicatorColor;
    invalidate();
  }

  /**
   * 設置或者獲取指示點的樣式
   * 樣式支持兩種:
   * 空心圓圈 實心圓圈
   * @return
   */
  public int getIndicatorType() {
    return indicatorType;
  }

  /**
   * 這里作者使用了自定義的annotation
   * 請看本類最后的用法!!!
   * 牛逼啊!
   * @param indicatorType
   */
  public void setIndicatorType(@IndicatorType int indicatorType) {
    this.indicatorType = indicatorType;
    invalidate();
  }

  public int getLineColor() {
    return lineColor;
  }

  /**
   * 這里的set方法使用的是注解!!!
   * @param color
   */
  public void setLineColor(@ColorInt int color) {
    paintLine.setColor(lineColor);
    lineColor = color;
    invalidate();
  }

  public float getIndicatorSize() {
    return indicatorSize;
  }

  public void setIndicatorSize(float indicatorSize) {
    this.indicatorSize = indicatorSize;
    invalidate();
  }

  public float getStrokeSize() {
    return strokeSize;
  }

  public void setStrokeSize(float strokeSize) {
    paintLine.setStrokeWidth(strokeSize);
    this.strokeSize = strokeSize;
    invalidate();
  }

  public int getChartFillColor() {
    return chartFillColor;
  }

  /**
   * 這里的set方法使用的是注解!!!
   * @param chartFillColor
   */
  public void setChartFillColor(@ColorInt int chartFillColor) {
    paintFill.setColor(chartFillColor);
    this.chartFillColor = chartFillColor;
    invalidate();
  }

  public boolean isIndicatorVisible() {
    return indicatorVisible;
  }

  public void setIndicatorVisible(boolean indicatorVisible) {
    this.indicatorVisible = indicatorVisible;
    invalidate();
  }

  /**
   * 設置或者獲取線的平滑度
   * 值從0.0 到0.5之間
   * @return
   */
  public float getSmoothness() {
    return smoothness;
  }

  /**
   * 注解!!
   * @param smoothness
   */
  public void setSmoothness(@FloatRange(from = 0.0, to = 0.5) float smoothness) {
    this.smoothness = smoothness;
    invalidate();
  }

  public boolean isFullWidth() {
    return fullWidth;
  }

  public void setFullWidth(boolean fullWidth) {
    this.fullWidth = fullWidth;
    invalidate();
  }

  /**
   * 繪圖的核心方法
   * @param canvas
   */
  public void draw(Canvas canvas) {
    super.draw(canvas);
    //如果值為空,直接返回
    if (values == null || values.length == 0) {
      return;
    }
    /**
     * 如果設置顯示動畫,這一步步獲取動畫的值。
     * 否則,直接拷貝值,進行繪畫
     */
    if (anim) {
      calculateNextAnimStep();
    } else {
      valuesTransition = values.clone();
    }

    float fullWidthCorrectionX;

    final int valuesLength = valuesTransition.length;
    //邊距 也就是線寬和指示點寬度
    final float border = strokeSize + indicatorSize;
    //得到實際所用的高度值
    final float height = getMeasuredHeight() - border;
    //得到x的修正值
    fullWidthCorrectionX = fullWidth ? 0 : border;
    //得到實際所占用的寬度
    final float width = getMeasuredWidth() - fullWidthCorrectionX;
    //根據值的個數,計算x的間距
    final float dX = valuesLength > 1 ? valuesLength - 1 : 2;
    //根據最大值,最小值 計算y間距
    final float dY = maxY - minY > 0 ? maxY - minY : 2;

    path.reset();

    // calculate point coordinates
    /**
     * 計算坐標點集合
     * minY代表數據集中的最小值
     */
    List<PointF> points = new ArrayList<>(valuesLength);
    fullWidthCorrectionX = fullWidth ? 0 : (border / 2);
    for (int i = 0; i < valuesLength; i++) {
      float x = fullWidthCorrectionX + i * width / dX;
      float pointBorder = !indicatorVisible && valuesTransition[i]
              == minY ? border : border / 2;
      /**
       * y的計算有點麻煩
       * 主要是因為y的坐標原點在上方。
       * 高度值減去實際值得到繪畫的值。
       * 實際的值越大,y值越小,繪畫的高度就越高!!
       */
      float y = pointBorder + height
              - (valuesTransition[i] - minY) * height / dY;
      points.add(new PointF(x, y));
    }

    float lX = 0;
    float lY = 0;
    //路徑移動到首個坐標點
    path.moveTo(points.get(0).x, points.get(0).y);
    for (int i = 1; i < valuesLength; i++) {
      PointF p = points.get(i);
      float pointSmoothness = valuesTransition[i] == minY ? 0 : smoothness;

      PointF firstPointF = points.get(i - 1);
      float x1 = firstPointF.x + lX;
      float y1 = firstPointF.y + lY;

      PointF secondPointF = points.get(i + 1 < valuesLength ? i + 1 : i);
      lX = (secondPointF.x - firstPointF.x) / 2 * pointSmoothness;
      lY = (secondPointF.y - firstPointF.y) / 2 * pointSmoothness;
      float x2 = p.x - lX;
      float y2 = p.y - lY;
      if (y1 == p.y) {
        y2 = y1;
      }
      /**
      * Add a cubic bezier from the last point, approaching control points
      * (x1,y1) and (x2,y2), and ending at (x3,y3).
      */
      path.cubicTo(x1, y1, x2, y2, p.x, p.y);
    }
    canvas.drawPath(path, paintLine);

    // fill area 填充區域
    if (valuesLength > 0) {
      fullWidthCorrectionX = !fullWidth ? 0 : (border / 2);
      path.lineTo(points.get(valuesLength - 1).x + fullWidthCorrectionX,
              height + border);
      path.lineTo(points.get(0).x - fullWidthCorrectionX,
              height + border);
      path.close();
      canvas.drawPath(path, paintFill);
    }

    // draw indicator
    if (indicatorVisible) {
      for (int i = 0; i < points.size(); i++) {
        RectF rectF = new RectF();
        float x = points.get(i).x;
        float y = points.get(i).y;

        paintIndicator.setColor(lineColor);
        paintIndicator.setStyle(Paint.Style.FILL_AND_STROKE);
        if (indicatorType == INDICATOR_TYPE_CIRCLE) {
          canvas.drawCircle(x, y, indicatorSize / 2, paintIndicator);
        } else {
          rectF.left = x - (indicatorSize / 2);
          rectF.top = y - (indicatorSize / 2);
          rectF.right = x + (indicatorSize / 2);
          rectF.bottom = y + (indicatorSize / 2);
          canvas.drawRect(rectF.left, rectF.top, rectF.right,
                  rectF.bottom, paintIndicator);
        }

        if (indicatorStyle == INDICATOR_STYLE_STROKE) {
          paintIndicator.setColor(chartBackgroundColor);
          paintIndicator.setStyle(Paint.Style.FILL);

          if (indicatorType == INDICATOR_TYPE_CIRCLE) {
            canvas.drawCircle(x, y, (indicatorSize - indicatorStrokeSize) / 2,
                    paintIndicator);
          } else {
            rectF.left = x - (indicatorSize / 2) + indicatorStrokeSize;
            rectF.top = y - (indicatorSize / 2) + indicatorStrokeSize;
            rectF.right = x + (indicatorSize / 2) - indicatorStrokeSize;
            rectF.bottom = y + (indicatorSize / 2) - indicatorStrokeSize;
            canvas.drawRect(rectF.left, rectF.top, rectF.right, rectF.bottom,
                    paintIndicator);
          }
        }
      }
    }

    if (anim && !animFinished) {
      handlerAnim.postDelayed(doNextAnimStep, ANIM_DELAY_MILLIS);
    }
  }

  /**
   * 設置背景色
   * @param color
   */
  @Override public void setBackgroundColor(@ColorInt int color) {
    super.setBackgroundColor(color);
    chartBackgroundColor = color;
  }

  @Override public void setBackground(Drawable background) {
    super.setBackground(background);
    chartBackgroundColor = defaultBackgroundColor;
    Drawable drawable = getBackground();
    if (drawable instanceof ColorDrawable) {
      chartBackgroundColor = ((ColorDrawable) drawable).getColor();
    }
  }

  /**
   * 定義自己的annotation
   * Retention的意思是保留 指示的是保留的級別
   * 這里設置的是保留在源碼中。
   * 有三種保留級別:SOURCE  RUNTIME CLASS
   */
  @Retention(RetentionPolicy.SOURCE)
  @IntDef({ INDICATOR_STYLE_FILL, INDICATOR_STYLE_STROKE })
  public @interface IndicatorType {
  }

  /**
   * 注解!!!
   */
  @Retention(RetentionPolicy.SOURCE)
  @IntDef({ INDICATOR_TYPE_CIRCLE, INDICATOR_TYPE_SQUARE })
  public @interface IndicatorStyle {
  }
}

其中也包含了不少的set get方法,這些方法不多說,一看就明白。其中,最核心的也就是onDraw方法,在onDraw方法中不僅僅繪制了各個點,還繪制了折線圖、折線圖圍繞的區域 以及整個view的背景。 
1 各個點的繪制

final int valuesLength = valuesTransition.length;
    //邊距 也就是線寬和指示點寬度
    final float border = strokeSize + indicatorSize;
    //得到實際所用的高度值
    final float height = getMeasuredHeight() - border;
    //得到x的修正值
    fullWidthCorrectionX = fullWidth ? 0 : border;
    //得到實際所占用的寬度
    final float width = getMeasuredWidth() - fullWidthCorrectionX;
    //根據值的個數,計算x的間距
    final float dX = valuesLength > 1 ? valuesLength - 1 : 2;
    //根據最大值,最小值 計算y間距
    final float dY = maxY - minY > 0 ? maxY - minY : 2;

    path.reset();

    // calculate point coordinates
    /**
     * 計算坐標點集合
     * minY代表數據集中的最小值
     */
    List<PointF> points = new ArrayList<>(valuesLength);
    fullWidthCorrectionX = fullWidth ? 0 : (border / 2);
for (int i = 0; i < valuesLength; i++) {
      float x = fullWidthCorrectionX + i * width / dX;
      float pointBorder = !indicatorVisible && valuesTransition[i]
              == minY ? border : border / 2;
      /**
       * y的計算有點麻煩
       * 主要是因為y的坐標原點在上方。
       * 高度值減去實際值得到繪畫的值。
       * 實際的值越大,y值越小,繪畫的高度就越高!!
       */
      float y = pointBorder + height
              - (valuesTransition[i] - minY) * height / dY;
      points.add(new PointF(x, y));
    }

onDraw方法中的第一個for循環完成了各個點的繪制。默認點樣式為空心圓圈。代碼中x y值就代表各個點的坐標。

float lX = 0;
    float lY = 0;
    //路徑移動到首個坐標點
    path.moveTo(points.get(0).x, points.get(0).y);
    for (int i = 1; i < valuesLength; i++) {
      PointF p = points.get(i);
      float pointSmoothness = valuesTransition[i] == minY ? 0 : smoothness;

      PointF firstPointF = points.get(i - 1);
      float x1 = firstPointF.x + lX;
      float y1 = firstPointF.y + lY;

      PointF secondPointF = points.get(i + 1 < valuesLength ? i + 1 : i);
      lX = (secondPointF.x - firstPointF.x) / 2 * pointSmoothness;
      lY = (secondPointF.y - firstPointF.y) / 2 * pointSmoothness;
      float x2 = p.x - lX;
      float y2 = p.y - lY;
      if (y1 == p.y) {
        y2 = y1;
      }
      /**
      * Add a cubic bezier from the last point, approaching control points
      * (x1,y1) and (x2,y2), and ending at (x3,y3).
      */
      path.cubicTo(x1, y1, x2, y2, p.x, p.y);
    }
    canvas.drawPath(path, paintLine);

這是第二個for循環,繪制折線圖。利用路徑path完成。cubicTo方法完成貝瑟爾曲線繪制,有三個點完成,中間的x2 y2作為控制點,這里代碼中x2 y2取的是x1 y1點和p.x p.y點的中點加上一個浮動值完成的。作者在這里的處理非常完美!!

// fill area 填充區域
    if (valuesLength > 0) {
      fullWidthCorrectionX = !fullWidth ? 0 : (border / 2);
      path.lineTo(points.get(valuesLength - 1).x + fullWidthCorrectionX,
              height + border);
      path.lineTo(points.get(0).x - fullWidthCorrectionX,
              height + border);
      path.close();
      canvas.drawPath(path, paintFill);
    }

這個if判斷完成了折線圖所圍繞的區域的繪制。利用的就是path,上面我們繪制折線的過程中,已經完成了折線的繪制,然后if語句中 
 
兩個path.lineto 和一個close方法完成了路徑的閉合,完成了區域的繪制。像圖中所示的樣子。

if (indicatorVisible) {
      for (int i = 0; i < points.size(); i++) {
        RectF rectF = new RectF();
        float x = points.get(i).x;
        float y = points.get(i).y;

        paintIndicator.setColor(lineColor);
        paintIndicator.setStyle(Paint.Style.FILL_AND_STROKE);
        if (indicatorType == INDICATOR_TYPE_CIRCLE) {
          canvas.drawCircle(x, y, indicatorSize / 2, paintIndicator);
        } else {
          rectF.left = x - (indicatorSize / 2);
          rectF.top = y - (indicatorSize / 2);
          rectF.right = x + (indicatorSize / 2);
          rectF.bottom = y + (indicatorSize / 2);
          canvas.drawRect(rectF.left, rectF.top, rectF.right,
                  rectF.bottom, paintIndicator);
        }

        if (indicatorStyle == INDICATOR_STYLE_STROKE) {
          paintIndicator.setColor(chartBackgroundColor);
          paintIndicator.setStyle(Paint.Style.FILL);

          if (indicatorType == INDICATOR_TYPE_CIRCLE) {
            canvas.drawCircle(x, y, (indicatorSize - indicatorStrokeSize) / 2,
                    paintIndicator);
          } else {
            rectF.left = x - (indicatorSize / 2) + indicatorStrokeSize;
            rectF.top = y - (indicatorSize / 2) + indicatorStrokeSize;
            rectF.right = x + (indicatorSize / 2) - indicatorStrokeSize;
            rectF.bottom = y + (indicatorSize / 2) - indicatorStrokeSize;
            canvas.drawRect(rectF.left, rectF.top, rectF.right, rectF.bottom,
                    paintIndicator);
          }
        }
      }
    }

這個是最后一步,完成坐標點的繪制,默認樣式是空心圓圈,否則,就是矩形的點進行繪制。 
 
這個圖所示的就是矩形點的繪制。 
關于空心圓圈的繪制,就不多說了,主要思路上面已有,過程主要是計算坐標點X Y值,有了X Y坐標點的值,設置圓圈的半徑,就可以繪畫圓圈啦。 
矩形的繪制也是如此,矩形就是計算left right top bottom 的值,有了這幾個值就可以繪制矩形了。計算的方法就是X Y的坐標點分別加減一個微小的值,即可。代碼:

rectF.left = x - (indicatorSize / 2) + indicatorStrokeSize;
            rectF.top = y - (indicatorSize / 2) + indicatorStrokeSize;
            rectF.right = x + (indicatorSize / 2) - indicatorStrokeSize;
            rectF.bottom = y + (indicatorSize / 2) - indicatorStrokeSize;
            canvas.drawRect(rectF.left, rectF.top, rectF.right, rectF.bottom,
                    paintIndicator);

indicatorSize 代表的就是小矩形的邊距大小值。 
indicatorStrokeSize代表的是繪制矩形邊距的線的寬度值。 
OK,說明完畢。

CharBar 柱狀圖實現代碼

柱狀圖的設計和折線圖的繪畫過程類似,先看代碼:

public class CharterBar extends CharterBase {
  private static final boolean DEFAULT_PAINT_BAR_BACKGROUND = true;
  private static final float DEFAULT_BAR_MIN_CORRECTION = 2f;
  //柱狀圖背景色是否有
  private boolean paintBarBackground;
  //柱狀圖背景色
  private int barBackgroundColor;
  //柱狀圖間距
  private float barMargin;
  //柱狀圖畫筆
  private Paint paintBar;
  private int[] colors;
  private int[] colorsBackground;

  public CharterBar(Context context) {
    this(context, null);
  }

  public CharterBar(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public CharterBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs);
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  public CharterBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init(context, attrs);
  }

  private void init(final Context context, final AttributeSet attrs) {
    final TypedArray typedArray = context
            .obtainStyledAttributes(attrs, R.styleable.Charter);
    //是否有柱狀圖背景色
    paintBarBackground = typedArray.getBoolean(
            R.styleable.Charter_c_paintBarBackground,
        DEFAULT_PAINT_BAR_BACKGROUND);
    //柱狀圖顏色
    int barColor = typedArray.getColor(R.styleable.Charter_c_barColor,
        getResources().getColor(R.color.default_barColor));
    //柱狀圖的背景顏色
    int barBackgroundColor = typedArray.getColor(
            R.styleable.Charter_c_barBackgroundColor,
        getResources().getColor(R.color.default_barBackgroundColor));
    //柱狀圖間距
    barMargin = typedArray.getDimension(
            R.styleable.Charter_c_barMargin,
        getResources().getDimension(R.dimen.default_barMargin));
    //是否顯示動畫
    anim = typedArray.getBoolean(R.styleable.Charter_c_anim, DEFAULT_ANIM);
    //動畫持續時間 默認500毫秒
    animDuration =typedArray.getInt(R.styleable.Charter_c_animDuration,
                (int) DEFAULT_ANIM_DURATION);
    //是否繪畫 該方法在View類中
    setWillNotDraw(!typedArray.getBoolean(R.styleable.Charter_c_autoShow,
            DEFAULT_AUTOSHOW));
    typedArray.recycle();//回收
    //柱狀圖畫筆
    paintBar = new Paint();
    paintBar.setAntiAlias(true);
    //柱狀圖顏色
    colors = new int[] { barColor };
    //柱狀圖背景顏色
    colorsBackground = new int[] { barBackgroundColor };
    /**
     * 柱狀圖顏色是值柱的顏色
     * 而其背景色是柱的背景色!
     */
  }

  public Paint getPaintBar() {
    return paintBar;
  }

  public void setPaintBar(Paint paintBar) {
    this.paintBar = paintBar;
    invalidate();
  }

  public int[] getColors() {
    return colors;
  }

  public void setColors(@ColorInt int[] colors) {
    if (colors == null || colors.length == 0) {
      return;
    }

    this.colors = colors;
    invalidate();
  }

  public int[] getColorsBackground() {
    return colorsBackground;
  }

  public void setColorsBackground(@ColorInt int[] colorsBackground) {
    if (colorsBackground == null || colorsBackground.length == 0) {
      return;
    }

    this.colorsBackground = colorsBackground;
    invalidate();
  }

  public float getBarMargin() {
    return barMargin;
  }

  public void setBarMargin(float barMargin) {
    this.barMargin = barMargin;
    invalidate();
  }

  public boolean isPaintBarBackground() {
    return paintBarBackground;
  }

  public void setPaintBarBackground(boolean paintBarBackground) {
    this.paintBarBackground = paintBarBackground;
    invalidate();
  }

  public int getBarBackgroundColor() {
    return barBackgroundColor;
  }

  public void setBarBackgroundColor(@ColorInt int barBackgroundColor) {
    this.barBackgroundColor = barBackgroundColor;
    invalidate();
  }

  /**
   * 繪畫柱狀圖的核心方法
   * @param canvas
   */
  public void draw(Canvas canvas) {
    super.draw(canvas);

    if (values == null || values.length == 0) {
      return;
    }

    if (anim) {
      calculateNextAnimStep();
    } else {
      valuesTransition = values.clone();
    }

    final int valuesLength = valuesTransition.length;

    final float height = getMeasuredHeight();
    final float width = getMeasuredWidth();
    //計算每條柱子的寬度
    final float barWidth = width / valuesLength;
    //最大值和最小值的差值
    final float diff = maxY - minY;
    //高度片值
    final float sliceHeight = height / diff;

    int colorsPos = 0;
    int colorsBackgroundPos = -1;

    for (int i = 0; i < valuesLength; i++) {
      RectF rectF = new RectF();
      rectF.left = (i * barWidth) + barMargin;
      rectF.top = height - (sliceHeight * (valuesTransition[i] - minY));
      //如果top值等于view高度值,顯示默認的柱形最小值,不至于有點都不顯示。
      rectF.top = rectF.top == height ? rectF.top - DEFAULT_BAR_MIN_CORRECTION : rectF.top;
      rectF.right = (i * barWidth) + barWidth - barMargin;
      rectF.bottom = height;

      // paint background
      //向間繪畫背景色 背景色可以有多個,向間繪畫背景色。
      if (paintBarBackground) {
        if (colorsBackgroundPos + 1 >= colorsBackground.length) {
          colorsBackgroundPos = 0;
        } else {
          colorsBackgroundPos++;
        }
        paintBar.setColor(colorsBackground[colorsBackgroundPos]);
        //繪畫柱形背景色 這里完成背景色的柱形繪制
        canvas.drawRect(rectF.left, 0, rectF.right, rectF.bottom, paintBar);
      }

      // paint bar
      if (colorsPos + 1 >= colors.length) {
        colorsPos = 0;
      } else {
        colorsPos++;
      }
      paintBar.setColor(colors[colorsPos]);
      //繪畫柱形 這里完成柱形繪制
      canvas.drawRect(rectF.left, rectF.top, rectF.right, rectF.bottom, paintBar);
    }
    //通知動畫繪制
    if (anim && !animFinished) {
      handlerAnim.postDelayed(doNextAnimStep, ANIM_DELAY_MILLIS);
    }
  }
}

CharterBar類繼承了基類CharterBase,包含了不少的set get方法。 
核心方法在于ondraw方法的繪制。 
核心過程包括兩點:柱狀圖背景的繪畫和柱狀圖的繪畫。

 for (int i = 0; i < valuesLength; i++) {
      RectF rectF = new RectF();
      rectF.left = (i * barWidth) + barMargin;
      rectF.top = height - (sliceHeight * (valuesTransition[i] - minY));
      //如果top值等于view高度值,顯示默認的柱形最小值,不至于有點都不顯示。
      rectF.top = rectF.top == height ? rectF.top - DEFAULT_BAR_MIN_CORRECTION : rectF.top;
      rectF.right = (i * barWidth) + barWidth - barMargin;
      rectF.bottom = height;

      // paint background
      //向間繪畫背景色 背景色可以有多個,向間繪畫背景色。
      if (paintBarBackground) {
        if (colorsBackgroundPos + 1 >= colorsBackground.length) {
          colorsBackgroundPos = 0;
        } else {
          colorsBackgroundPos++;
        }
        paintBar.setColor(colorsBackground[colorsBackgroundPos]);
        //繪畫柱形背景色 這里完成背景色的柱形繪制
        canvas.drawRect(rectF.left, 0, rectF.right, rectF.bottom, paintBar);
      }

      // paint bar
      if (colorsPos + 1 >= colors.length) {
        colorsPos = 0;
      } else {
        colorsPos++;
      }
      paintBar.setColor(colors[colorsPos]);
      //繪畫柱形 這里完成柱形繪制
      canvas.drawRect(rectF.left, rectF.top, rectF.right, rectF.bottom, paintBar);
    }

這個for循環完成了上面的兩點繪畫。

...............
 //繪畫柱形背景色 這里完成背景色的柱形繪制
        canvas.drawRect(rectF.left, 0, rectF.right, rectF.bottom, paintBar);
............................
//繪畫柱形 這里完成柱形繪制
      canvas.drawRect(rectF.left, rectF.top, rectF.right, rectF.bottom, paintBar);

這兩個drawRect分別完成了柱狀圖背景的繪畫和柱狀圖的繪畫。并且這兩者的繪畫的left top right bottom的值還有關系。 
left right bottom的值是相同的,只有top值不同。 
下面問題就是left top right bottom矩形的四邊值如何計算:

    final int valuesLength = valuesTransition.length;

    final float height = getMeasuredHeight();
    final float width = getMeasuredWidth();
    //計算每條柱子的寬度
    final float barWidth = width / valuesLength;
    //最大值和最小值的差值
    final float diff = maxY - minY;
    //高度片值
    final float sliceHeight = height / diff;
RectF rectF = new RectF();
      rectF.left = (i * barWidth) + barMargin;
      rectF.top = height - (sliceHeight * (valuesTransition[i] - minY));
      //如果top值等于view高度值,顯示默認的柱形最小值,不至于有點都不顯示。
      rectF.top = rectF.top == height ? rectF.top - DEFAULT_BAR_MIN_CORRECTION : rectF.top;
      rectF.right = (i * barWidth) + barWidth - barMargin;
      rectF.bottom = height;

其中各個變量的值: 
barWidth代表每個柱狀圖寬度 
barMargin代表柱狀圖的間距 
sliceHeight 代表高度分值 也就是view的每個高度值所代表的真實數據的單位值

如果看不懂計算過程,請細細思量,該過程是繪制柱狀圖的核心所在!

總算是自定義部分說明完畢了。下面就是怎么用的問題啦!

看xml布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.hrules.charter.demo.XYLineActivity">
    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <com.hrules.charter.CharterYLabels
            android:id="@+id/ylable"
            android:layout_width="20dp"
            android:layout_height="300dp"
            />
        <com.hrules.charter.CharterLine
            android:id="@+id/charter_line"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            />
    </LinearLayout>
    <com.hrules.charter.CharterXLabels
        android:id="@+id/xlable"
        android:layout_below="@id/linear"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginLeft="20dp"
        />
</RelativeLayout>

請仔細看布局文件,相對布局中包含兩個布局,水平布局和CharterXLabels兩個,水平布局中又有兩個CharterYLabels和CharterLine,看效果圖: 
 
Y軸和折線圖對應水平布局部分,X軸代表下面的CharterXLabels。

再看activity類的代碼:

public class XYLineActivity extends AppCompatActivity {

    private CharterYLabels mYlableCharterYLabels;
    private CharterLine mLineCharterLine;
    private LinearLayout mLinearLinearLayout;
    private CharterXLabels mXlableCharterXLabels;
    private float[] valueX;
    private float[] valueY;
    private float[] valueLine;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_xyline);
        mYlableCharterYLabels = (CharterYLabels) findViewById(R.id.ylable);
        mLineCharterLine = (CharterLine) findViewById(R.id.charter_line);
        mLinearLinearLayout = (LinearLayout) findViewById(R.id.linear);
        mXlableCharterXLabels = (CharterXLabels) findViewById(R.id.xlable);
        valueX = fillRandomValues(15,200,0);
        valueY = fillRandomValues(7,500,10);
        valueLine = fillRandomValues(15,500,10);

        mXlableCharterXLabels.setValues(valueX);
        mYlableCharterYLabels.setValues(valueY);
        mLineCharterLine.setIndicatorStyle(CharterLine.INDICATOR_TYPE_SQUARE);
        mLineCharterLine.setIndicatorType(CharterLine.INDICATOR_STYLE_STROKE);
        mLineCharterLine.setValues(valueLine);
        mLineCharterLine.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                valueX = fillRandomValues(15,200,0);
                valueY = fillRandomValues(7,500,10);
                valueLine = fillRandomValues(15,500,10);
                mXlableCharterXLabels.setValues(valueX);
                mYlableCharterYLabels.setValues(valueY);
                mLineCharterLine.setValues(valueLine);
                mLineCharterLine.show();
            }
        });

    }
    private float[] fillRandomValues(int length, int max, int min) {
        Random random = new Random();
        float[] newRandomValues = new float[length];
        for (int i = 0; i < newRandomValues.length; i++) {
            newRandomValues[i] = random.nextInt(max - min + 1) - min;
        }
        return newRandomValues;
    }
}

fillRandomValues方法就是產生一些模擬數據,分別產生X Y 折線圖的數據,然后把數據設置進組件當中進行顯示,折線圖組件又定義了點擊事件,可以刷新數據。

細心的朋友應該會看到其中這兩句代碼:

mLineCharterLine.setIndicatorStyle(CharterLine.INDICATOR_TYPE_SQUARE);
        mLineCharterLine.setIndicatorType(CharterLine.INDICATOR_STYLE_STROKE);

第一句設置Style的 但是吧TYPE類型值傳遞進去啦,設置成正方形的樣式, 
第二句設置Type的,但是吧Stype類型值設置進去啦,設置成不填充,空心樣式。

這不是不對啦嗎?確實是這樣,這個地方等到我寫這篇文章的時候才發現的,瑕不掩瑜哈!!^_^ 
我提交的代碼中已經更改,代碼中不會存在這個問題哈。

好了,基本代碼全部完成,文章剛開始的效果圖有幾個,這里只介紹這一個,布局用法是一樣的。別的界面就不多說了,大家如果感興趣,下載代碼進行研究。

不過還是提一點,就是自定義的屬性的用法。 
因為上面的自定義的四個組件:X軸 Y軸 折線圖 柱狀圖 這四個組件作者是定義在自己的liabrary中的,看圖: 


可以看到attrs.xml是定義在library中,如果在項目中使用各個組件的自定義的屬性,需要把這個attrs.xml文件拷貝到自己的res/values文件夾下.看圖: 
 
拷貝進來之后,我就可以在布局文件中使用自定義組件的屬性啦。

例如:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.hrules.charter.demo.XYBarActivity">
<LinearLayout
    android:id="@+id/linear"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >
    <com.hrules.charter.CharterYLabels
        android:id="@+id/ylable"
        android:layout_width="20dp"
        android:layout_height="300dp"
        />
    <com.hrules.charter.CharterBar
        android:id="@+id/charter_bar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:c_barColor="@color/colorAccent"
        />
</LinearLayout>
    <com.hrules.charter.CharterXLabels
        android:id="@+id/xlable"
        android:layout_below="@id/linear"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginLeft="20dp"
        />
</RelativeLayout>

其中的app:c_barColor=”@color/colorAccent”這一行就是使用的自定義屬性進行設置的。 
這個布局的效果圖如下: 

activity界面的代碼就沒什么說的啦,自己下載代碼看看就明白啦。



我來說兩句
您需要登錄后才可以評論 登錄 | 立即注冊
facelist
所有評論(1)
天明向日葵 2019-6-10 09:57
學習了
回復
領先的中文移動開發者社區
18620764416
7*24全天服務
意見反饋:[email protected]

掃一掃關注我們

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粵ICP備15117877號 )

海南特区七星彩