88.android 簡單的折線圖，兩種效果

 //第一種：

 //第一步 寫個ChartView類繼承View：

 

public class ChartView extends View {
    //xy座標軸顏色
    private int xylinecolor = 0xffe2e2e2;
    //xy座標軸寬度
    private int xylinewidth = dpToPx(1);
    //xy座標軸文字顏色
    private int xytextcolor = 0xff7e7e7e;
    //xy座標軸文字大小
    private int xytextsize = spToPx(12);
    //折線圖中折線的顏色
    private int linecolor = 0xff02bbb7;
    //x軸各個座標點水平間距
    private int interval = dpToPx(50);
    //背景顏色
    private int bgcolor = 0xffffffff;
    //是否在ACTION_UP時，根據速度進行自滑動，沒有要求，建議關閉，過於佔用GPU
    private boolean isScroll = false;
    //繪製XY軸座標對應的畫筆
    private Paint xyPaint;
    //繪製XY軸的文本對應的畫筆
    private Paint xyTextPaint;
    //畫折線對應的畫筆
    private Paint linePaint;
    private int width;
    private int height;
    //x軸的原點座標
    private int xOri;
    //y軸的原點座標
    private int yOri;
    //第一個點X的座標
    private float xInit;
    //第一個點對應的最大Y座標
    private float maxXInit;
    //第一個點對應的最小X座標
    private float minXInit;
    //x軸座標對應的數據
    private List<String> xValue = new ArrayList<>();
    //y軸座標對應的數據
    private List<Integer> yValue = new ArrayList<>();
    //折線對應的數據
    private Map<String, Integer> value = new HashMap<>();
    //點擊的點對應的X軸的第幾個點，默認1
    private int selectIndex = 1;
    //X軸刻度文本對應的最大矩形，爲了選中時，在x軸文本畫的框框大小一致
    private Rect xValueRect;
    //速度檢測器
    private VelocityTracker velocityTracker;

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

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

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

    /**
     * 初始化畫筆
     */
    private void initPaint() {
        xyPaint = new Paint();
        xyPaint.setAntiAlias(true);
        xyPaint.setStrokeWidth(xylinewidth);
        xyPaint.setStrokeCap(Paint.Cap.ROUND);
        xyPaint.setColor(xylinecolor);

        xyTextPaint = new Paint();
        xyTextPaint.setAntiAlias(true);
        xyTextPaint.setTextSize(xytextsize);
        xyTextPaint.setStrokeCap(Paint.Cap.ROUND);
        xyTextPaint.setColor(xytextcolor);
        xyTextPaint.setStyle(Paint.Style.STROKE);

        linePaint = new Paint();
        linePaint.setAntiAlias(true);
        linePaint.setStrokeWidth(xylinewidth);
        linePaint.setStrokeCap(Paint.Cap.ROUND);
        linePaint.setColor(linecolor);
        linePaint.setStyle(Paint.Style.STROKE);
    }

    /**
     * 初始化
     *
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.chartView, defStyleAttr, 0);
        int count = array.getIndexCount();
        for (int i = 0; i < count; i++) {
            int attr = array.getIndex(i);
            switch (attr) {
                case R.styleable.chartView_xylinecolor://xy座標軸顏色
                    xylinecolor = array.getColor(attr, xylinecolor);
                    break;
                case R.styleable.chartView_xylinewidth://xy座標軸寬度
                    xylinewidth = (int) array.getDimension(attr, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, xylinewidth, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.chartView_xytextcolor://xy座標軸文字顏色
                    xytextcolor = array.getColor(attr, xytextcolor);
                    break;
                case R.styleable.chartView_xytextsize://xy座標軸文字大小
                    xytextsize = (int) array.getDimension(attr, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, xytextsize, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.chartView_linecolor://折線圖中折線的顏色
                    linecolor = array.getColor(attr, linecolor);
                    break;
                case R.styleable.chartView_interval://x軸各個座標點水平間距
                    interval = (int) array.getDimension(attr, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, interval, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.chartView_bgcolor: //背景顏色
                    bgcolor = array.getColor(attr, bgcolor);
                    break;
                case R.styleable.chartView_isScroll://是否在ACTION_UP時，根據速度進行自滑動
                    isScroll = array.getBoolean(attr, isScroll);
                    break;
            }
        }
        array.recycle();

    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        if (changed) {
            //這裏需要確定幾個基本點，只有確定了xy軸原點座標，第一個點的X座標值及其最大最小值
            width = getWidth();
            height = getHeight();
            //Y軸文本最大寬度
            float textYWdith = getTextBounds("000", xyTextPaint).width();
            for (int i = 0; i < yValue.size(); i++) {//求取y軸文本最大的寬度
                float temp = getTextBounds(yValue.get(i) + "", xyTextPaint).width();
                if (temp > textYWdith)
                    textYWdith = temp;
            }
            int dp2 = dpToPx(2);
            int dp3 = dpToPx(3);
            xOri = (int) (dp2 + textYWdith + dp2 + xylinewidth);//dp2是y軸文本距離左邊，以及距離y軸的距離
//            //X軸文本最大高度
            xValueRect = getTextBounds("000", xyTextPaint);
            float textXHeight = xValueRect.height();
            for (int i = 0; i < xValue.size(); i++) {//求取x軸文本最大的高度
                Rect rect = getTextBounds(xValue.get(i) + "", xyTextPaint);
                if (rect.height() > textXHeight)
                    textXHeight = rect.height();
                if (rect.width() > xValueRect.width())
                    xValueRect = rect;
            }
            yOri = (int) (height - dp2 - textXHeight - dp3 - xylinewidth);//dp3是x軸文本距離底邊，dp2是x軸文本距離x軸的距離
            xInit = interval + xOri;
            minXInit = width - (width - xOri) * 0.1f - interval * (xValue.size() - 1);//減去0.1f是因爲最後一個X周刻度距離右邊的長度爲X軸可見長度的10%
            maxXInit = xInit;
        }
        super.onLayout(changed, left, top, right, bottom);
    }

    @Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);
        canvas.drawColor(bgcolor);
        drawXY(canvas);
        drawBrokenLineAndPoint(canvas);
    }

    /**
     * 繪製折線和折線交點處對應的點
     *
     * @param canvas
     */
    private void drawBrokenLineAndPoint(Canvas canvas) {
        if (xValue.size() <= 0)
            return;
        //重新開一個圖層
        int layerId = canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG);
        drawBrokenLine(canvas);
        drawBrokenPoint(canvas);

        // 將折線超出x軸座標的部分截取掉
        linePaint.setStyle(Paint.Style.FILL);
        linePaint.setColor(bgcolor);
        linePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        RectF rectF = new RectF(0, 0, xOri, height);
        canvas.drawRect(rectF, linePaint);
        linePaint.setXfermode(null);
        //保存圖層
        canvas.restoreToCount(layerId);
    }

    /**
     * 繪製折線對應的點
     *
     * @param canvas
     */
    private void drawBrokenPoint(Canvas canvas) {
        float dp2 = dpToPx(2);
        float dp4 = dpToPx(4);
        float dp7 = dpToPx(7);
        //繪製節點對應的原點
        for (int i = 0; i < xValue.size(); i++) {
            float x = xInit + interval * i;
            float y = yOri - yOri * (1 - 0.1f) * value.get(xValue.get(i)) / yValue.get(yValue.size() - 1);
            //繪製選中的點
            if (i == selectIndex - 1) {
                linePaint.setStyle(Paint.Style.FILL);
                linePaint.setColor(0xffd0f3f2);
                canvas.drawCircle(x, y, dp7, linePaint);
                linePaint.setColor(0xff81dddb);
                canvas.drawCircle(x, y, dp4, linePaint);
                drawFloatTextBox(canvas, x, y - dp7, value.get(xValue.get(i)));
            }
            //繪製普通的節點
            linePaint.setStyle(Paint.Style.FILL);
            linePaint.setColor(Color.WHITE);
            canvas.drawCircle(x, y, dp2, linePaint);
            linePaint.setStyle(Paint.Style.STROKE);
            linePaint.setColor(linecolor);
            canvas.drawCircle(x, y, dp2, linePaint);

        }
    }

    /**
     * 繪製顯示Y值的浮動框
     *
     * @param canvas
     * @param x
     * @param y
     * @param text
     */
    private void drawFloatTextBox(Canvas canvas, float x, float y, int text) {
        int dp6 = dpToPx(6);
        int dp18 = dpToPx(18);
        //p1
        Path path = new Path();
        path.moveTo(x, y);
        //p2
        path.lineTo(x - dp6, y - dp6);
        //p3
        path.lineTo(x - dp18, y - dp6);
        //p4
        path.lineTo(x - dp18, y - dp6 - dp18);
        //p5
        path.lineTo(x + dp18, y - dp6 - dp18);
        //p6
        path.lineTo(x + dp18, y - dp6);
        //p7
        path.lineTo(x + dp6, y - dp6);
        //p1
        path.lineTo(x, y);
        canvas.drawPath(path, linePaint);
        linePaint.setColor(Color.WHITE);
        linePaint.setTextSize(spToPx(14));
        Rect rect = getTextBounds(text + "", linePaint);
        canvas.drawText(text + "", x - rect.width() / 2, y - dp6 - (dp18 - rect.height()) / 2, linePaint);
    }

    /**
     * 繪製折線
     *
     * @param canvas
     */
    private void drawBrokenLine(Canvas canvas) {
        linePaint.setStyle(Paint.Style.STROKE);
        linePaint.setColor(linecolor);
        //繪製折線
        Path path = new Path();
        float x = xInit + interval * 0;
        float y = yOri - yOri * (1 - 0.1f) * value.get(xValue.get(0)) / yValue.get(yValue.size() - 1);
        path.moveTo(x, y);
        for (int i = 1; i < xValue.size(); i++) {
            x = xInit + interval * i;
            y = yOri - yOri * (1 - 0.1f) * value.get(xValue.get(i)) / yValue.get(yValue.size() - 1);
            path.lineTo(x, y);
        }
        canvas.drawPath(path, linePaint);
    }

    /**
     * 繪製XY座標
     *
     * @param canvas
     */
    private void drawXY(Canvas canvas) {
        int length = dpToPx(4);//刻度的長度
        //繪製Y座標
        canvas.drawLine(xOri - xylinewidth / 2, 0, xOri - xylinewidth / 2, yOri, xyPaint);
        //繪製y軸箭頭
        xyPaint.setStyle(Paint.Style.STROKE);
        Path path = new Path();
        path.moveTo(xOri - xylinewidth / 2 - dpToPx(5), dpToPx(12));
        path.lineTo(xOri - xylinewidth / 2, xylinewidth / 2);
        path.lineTo(xOri - xylinewidth / 2 + dpToPx(5), dpToPx(12));
        canvas.drawPath(path, xyPaint);
        //繪製y軸刻度
        int yLength = (int) (yOri * (1 - 0.1f) / (yValue.size() - 1));//y軸上面空出10%,計算出y軸刻度間距
        for (int i = 0; i < yValue.size(); i++) {
            //繪製Y軸刻度
            //這裏可以設置成這個Y軸刻度，和屏幕一樣寬的效果：
            // canvas.drawLine(xOri, yOri - yLength * i + xylinewidth / 2, xOri+width, yOri - yLength * i + xylinewidth / 2, xyPaint);
            canvas.drawLine(xOri, yOri - yLength * i + xylinewidth / 2, xOri + length, yOri - yLength * i + xylinewidth / 2, xyPaint);
            xyTextPaint.setColor(xytextcolor);
            //繪製Y軸文本
            String text = yValue.get(i) + "";
            Rect rect = getTextBounds(text, xyTextPaint);
            canvas.drawText(text, 0, text.length(), xOri - xylinewidth - dpToPx(2) - rect.width(), yOri - yLength * i + rect.height() / 2, xyTextPaint);
        }
        //繪製X軸座標
        canvas.drawLine(xOri, yOri + xylinewidth / 2, width, yOri + xylinewidth / 2, xyPaint);
        //繪製x軸箭頭
        xyPaint.setStyle(Paint.Style.STROKE);
        path = new Path();
        //整個X軸的長度
        float xLength = xInit + interval * (xValue.size() - 1) + (width - xOri) * 0.1f;
        if (xLength < width)
            xLength = width;
        path.moveTo(xLength - dpToPx(12), yOri + xylinewidth / 2 - dpToPx(5));
        path.lineTo(xLength - xylinewidth / 2, yOri + xylinewidth / 2);
        path.lineTo(xLength - dpToPx(12), yOri + xylinewidth / 2 + dpToPx(5));
        canvas.drawPath(path, xyPaint);
        //繪製x軸刻度
        for (int i = 0; i < xValue.size(); i++) {
            float x = xInit + interval * i;
            if (x >= xOri) {//只繪製從原點開始的區域
                xyTextPaint.setColor(xytextcolor);
                canvas.drawLine(x, yOri, x, yOri - length, xyPaint);
                //繪製X軸文本
                String text = xValue.get(i);
                Rect rect = getTextBounds(text, xyTextPaint);
                if (i == selectIndex - 1) {
                    xyTextPaint.setColor(linecolor);
                    canvas.drawText(text, 0, text.length(), x - rect.width() / 2, yOri + xylinewidth + dpToPx(2) + rect.height(), xyTextPaint);
                    canvas.drawRoundRect(x - xValueRect.width() / 2 - dpToPx(3), yOri + xylinewidth + dpToPx(1), x + xValueRect.width() / 2 + dpToPx(3), yOri + xylinewidth + dpToPx(2) + xValueRect.height() + dpToPx(2), dpToPx(2), dpToPx(2), xyTextPaint);
                } else {
                    canvas.drawText(text, 0, text.length(), x - rect.width() / 2, yOri + xylinewidth + dpToPx(2) + rect.height(), xyTextPaint);
                }
            }
        }
    }

    private float startX;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (isScrolling)
            return super.onTouchEvent(event);
        this.getParent().requestDisallowInterceptTouchEvent(true);//當該view獲得點擊事件，就請求父控件不攔截事件
        obtainVelocityTracker(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startX = event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                if (interval * xValue.size() > width - xOri) {//當期的寬度不足以呈現全部數據
                    float dis = event.getX() - startX;
                    startX = event.getX();
                    if (xInit + dis < minXInit) {
                        xInit = minXInit;
                    } else if (xInit + dis > maxXInit) {
                        xInit = maxXInit;
                    } else {
                        xInit = xInit + dis;
                    }
                    invalidate();
                }
                break;
            case MotionEvent.ACTION_UP:
                clickAction(event);
                scrollAfterActionUp();
                this.getParent().requestDisallowInterceptTouchEvent(false);
                recycleVelocityTracker();
                break;
            case MotionEvent.ACTION_CANCEL:
                this.getParent().requestDisallowInterceptTouchEvent(false);
                recycleVelocityTracker();
                break;
        }
        return true;
    }

    //是否正在滑動
    private boolean isScrolling = false;

    /**
     * 手指擡起後的滑動處理
     */
    private void scrollAfterActionUp() {
        if (!isScroll)
            return;
        final float velocity = getVelocity();
        float scrollLength = maxXInit - minXInit;
        if (Math.abs(velocity) < 10000)//10000是一個速度臨界值，如果速度達到10000，最大可以滑動(maxXInit - minXInit)
            scrollLength = (maxXInit - minXInit) * Math.abs(velocity) / 10000;
        ValueAnimator animator = ValueAnimator.ofFloat(0, scrollLength);
        animator.setDuration((long) (scrollLength / (maxXInit - minXInit) * 1000));//時間最大爲1000毫秒，此處使用比例進行換算
        animator.setInterpolator(new DecelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) valueAnimator.getAnimatedValue();
                if (velocity < 0 && xInit > minXInit) {//向左滑動
                    if (xInit - value <= minXInit)
                        xInit = minXInit;
                    else
                        xInit = xInit - value;
                } else if (velocity > 0 && xInit < maxXInit) {//向右滑動
                    if (xInit + value >= maxXInit)
                        xInit = maxXInit;
                    else
                        xInit = xInit + value;
                }
                invalidate();
            }
        });
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
                isScrolling = true;
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                isScrolling = false;
            }

            @Override
            public void onAnimationCancel(Animator animator) {
                isScrolling = false;
            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        animator.start();

    }

    /**
     * 獲取速度
     *
     * @return
     */
    private float getVelocity() {
        if (velocityTracker != null) {
            velocityTracker.computeCurrentVelocity(1000);
            return velocityTracker.getXVelocity();
        }
        return 0;
    }

    /**
     * 點擊X軸座標或者折線節點
     *
     * @param event
     */
    private void clickAction(MotionEvent event) {
        int dp8 = dpToPx(8);
        float eventX = event.getX();
        float eventY = event.getY();
        for (int i = 0; i < xValue.size(); i++) {
            //節點
            float x = xInit + interval * i;
            float y = yOri - yOri * (1 - 0.1f) * value.get(xValue.get(i)) / yValue.get(yValue.size() - 1);
            if (eventX >= x - dp8 && eventX <= x + dp8 &&
                    eventY >= y - dp8 && eventY <= y + dp8 && selectIndex != i + 1) {//每個節點周圍8dp都是可點擊區域
                selectIndex = i + 1;
                invalidate();
                return;
            }
            //X軸刻度
            String text = xValue.get(i);
            Rect rect = getTextBounds(text, xyTextPaint);
            x = xInit + interval * i;
            y = yOri + xylinewidth + dpToPx(2);
            if (eventX >= x - rect.width() / 2 - dp8 && eventX <= x + rect.width() + dp8 / 2 &&
                    eventY >= y - dp8 && eventY <= y + rect.height() + dp8 && selectIndex != i + 1) {
                selectIndex = i + 1;
                invalidate();
                return;
            }
        }
    }


    /**
     * 獲取速度跟蹤器
     *
     * @param event
     */
    private void obtainVelocityTracker(MotionEvent event) {
        if (!isScroll)
            return;
        if (velocityTracker == null) {
            velocityTracker = VelocityTracker.obtain();
        }
        velocityTracker.addMovement(event);
    }

    /**
     * 回收速度跟蹤器
     */
    private void recycleVelocityTracker() {
        if (velocityTracker != null) {
            velocityTracker.recycle();
            velocityTracker = null;
        }
    }

    public int getSelectIndex() {
        return selectIndex;
    }

    public void setSelectIndex(int selectIndex) {
        this.selectIndex = selectIndex;
        invalidate();
    }

    public void setxValue(List<String> xValue) {
        this.xValue = xValue;
    }

    public void setyValue(List<Integer> yValue) {
        this.yValue = yValue;
        invalidate();
    }

    public void setValue(Map<String, Integer> value) {
        this.value = value;
        invalidate();
    }

    public void setValue(Map<String, Integer> value, List<String> xValue, List<Integer> yValue) {
        this.value = value;
        this.xValue = xValue;
        this.yValue = yValue;
        invalidate();
    }

    public List<String> getxValue() {
        return xValue;
    }

    public List<Integer> getyValue() {
        return yValue;
    }

    public Map<String, Integer> getValue() {
        return value;
    }

    /**
     * 獲取丈量文本的矩形
     *
     * @param text
     * @param paint
     * @return
     */
    private Rect getTextBounds(String text, Paint paint) {
        Rect rect = new Rect();
        paint.getTextBounds(text, 0, text.length(), rect);
        return rect;
    }

    /**
     * dp轉化成爲px
     *
     * @param dp
     * @return
     */
    private int dpToPx(int dp) {
        float density = getContext().getResources().getDisplayMetrics().density;
        return (int) (dp * density + 0.5f * (dp >= 0 ? 1 : -1));
    }

    /**
     * sp轉化爲px
     *
     * @param sp
     * @return
     */
    private int spToPx(int sp) {
        float scaledDensity = getContext().getResources().getDisplayMetrics().scaledDensity;
        return (int) (scaledDensity * sp + 0.5f * (sp >= 0 ? 1 : -1));
    }
}

 

//第二步：在values下寫個attrs.xml文件：

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- xy座標軸顏色 -->
    <attr name="xylinecolor" format="color" />
    <!-- xy座標軸寬度 -->
    <attr name="xylinewidth" format="dimension" />
    <!-- xy座標軸文字顏色 -->
    <attr name="xytextcolor" format="color" />
    <!-- xy座標軸文字大小 -->
    <attr name="xytextsize" format="dimension" />
    <!-- 折線圖中折線的顏色 -->
    <attr name="linecolor" format="color" />
    <!-- x軸各個座標點水平間距 -->
    <attr name="interval" format="dimension" />
    <!-- 背景顏色 -->
    <attr name="bgcolor" format="color" />
    <!--是否在ACTION_UP時，根據速度進行自滑動，建議關閉，過於佔用GPU-->
    <attr name="isScroll" format="boolean" />
    <declare-styleable name="chartView">
        <attr name="xylinecolor" />
        <attr name="xylinewidth" />
        <attr name="xytextcolor" />
        <attr name="xytextsize" />
        <attr name="linecolor" />
        <attr name="interval" />
        <attr name="bgcolor" />
        <attr name="isScroll" />
    </declare-styleable>

</resources>

//第三步在Activity裏使用：

 

public class MainActivity extends AppCompatActivity  {
    //x軸座標對應的數據
    private List<String> xValue = new ArrayList<>();
    //y軸座標對應的數據
    private List<Integer> yValue = new ArrayList<>();
    //折線對應的數據
    private Map<String, Integer> value = new HashMap<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //獲取當前月份
        Time t = new Time();
        t.setToNow();
        int year = t.year;
        int month = t.month + 1;

        //獲取當前月的天數
        int currentMonthDay = getCurrentMonthDay();
        Log.e("TAG2", currentMonthDay + "");

        //數據集合
        List<Integer> mList = new ArrayList<>();
        mList.add(1);
        mList.add(10);
        mList.add(10);
        mList.add(9);
        mList.add(7);
        mList.add(35);
        mList.add(28);


//        (int) (Math.random() * 181 + 60)
        for (int i = 0; i < 7; i++) {
            xValue.add(month + "." + (i + 1));
            value.put(month + "." + (i + 1), mList.get(i));
        }

        //集合最大值
        Integer max = Collections.max(mList);
        //集合最小值
        Integer min = Collections.min(mList);

        yValue.add(0);//y軸座標最小數
        yValue.add(max / 2);//y軸座標最大數/2
        yValue.add(max);//y軸座標最大數

      

        ChartView chartView = (ChartView) findViewById(R.id.chartview);
        //折線圖設置數據
        chartView.setValue(value, xValue, yValue);
    }

    //獲取當月的 天數
    public int getCurrentMonthDay() {
        Calendar a = Calendar.getInstance();
        a.set(Calendar.DATE, 1);
        a.roll(Calendar.DATE, -1);
        int maxDate = a.get(Calendar.DATE);
        return maxDate;
    }


}

 //我的佈局：

 

<com.example.hasee.a1029ceshi.ChartView
    android:id="@+id/chartview"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_centerInParent="true"
    app:bgcolor="#ffffff"
    app:interval="40dp"
    app:isScroll="false"
    app:linecolor="#02bbb7"
    app:xylinecolor="#e2e2e2"
    app:xylinewidth="2dp"
    app:xytextcolor="#7e7e7e"
    app:xytextsize="15sp"
    />

 

 //第二種 帶動畫的折線圖效果：

 

 

//首先第一步：寫個LineChartView繼承View

 

 

public class LineChartView extends View {
    private float xOrigin; //  x軸原點座標
    private float yOrigin;  //  y軸原點座標
    private int mMargin10;  //  10dp的間距
    private int mWidth; //  控件寬度
    private int mHeight;  //  控件高度
    private int max = 100, min = 0;  //  最大值、最小值
    private float yInterval;  //  y軸座標間隔
    private float xInterval;  //  x軸座標間隔

    private String startTime = "2017-03-15";
    private String endTime = "2017-03-24";
    private int textWidth;  //  日期寬度

    private List<ItemBean> mItems;//  折線數據

    private int[] shadeColors; //  漸變陰影顏色

    private int mAxesColor; //  座標軸顏色
    private float mAxesWidth; //  座標軸寬度
    private int mTextColor;  //  字體顏色
    private float mTextSize; //  字體大小
    private int mLineColor;  //  折線顏色
    private int mBgColor;       //  背景色

    private Paint mPaintText;     //  畫文字的畫筆
    private Paint mPaintAxes;   //  座標軸畫筆
    private Paint mPaintLine;   //  折線畫筆
    private Path mPath;   //    折線路徑
    private Paint mPaintShader; //  漸變色畫筆
    private Path mPathShader;   //  漸變色路徑
    private float mProgress;    //  動畫進度
    private Paint mPaintXPoint;//座標軸點畫筆
    private Paint mPaintPath;//折線折點畫筆

    public int[] getShadeColors() {
        return shadeColors;
    }

    public void setShadeColors(int[] shadeColors) {
        this.shadeColors = shadeColors;
    }

    public int getMax() {
        return max;
    }

    public void setMax(int max) {
        this.max = max;
    }

    public int getMin() {
        return min;
    }

    public void setMin(int min) {
        this.min = min;
    }

    public String getStartTime() {
        return startTime;
    }

    public void setStartTime(String startTime) {
        this.startTime = startTime;
    }

    public String getEndTime() {
        return endTime;
    }

    public void setEndTime(String endTime) {
        this.endTime = endTime;
    }

    public List<ItemBean> getItems() {
        return mItems;
    }

    public void setItems(List<ItemBean> items) {
        mItems = items;
        int max=0;
        int min=0;
        for (ItemBean mItem : mItems) {
            int anInt=mItem.getValue();
            if(max<anInt){
                max=anInt;
            }
            if(min>anInt){
                min=anInt;
            }
        }
        setMax(max%10==0?max:(max/10+1)*10);
        setMin(min<=10?0:(max/10-1)*10);
        setStartTime(mItems.get(mItems.size()-1).getDate());
        setEndTime(mItems.get(0).getDate());
    }

    public int getAxesColor() {
        return mAxesColor;
    }

    public void setAxesColor(int axesColor) {
        mAxesColor = axesColor;
    }

    public float getAxesWidth() {
        return mAxesWidth;
    }

    public void setAxesWidth(float axesWidth) {
        mAxesWidth = axesWidth;
    }

    public int getTextColor() {
        return mTextColor;
    }

    public void setTextColor(int textColor) {
        mTextColor = textColor;
    }

    public float getTextSize() {
        return mTextSize;
    }

    public void setTextSize(float textSize) {
        mTextSize = textSize;
    }


    public int getLineColor() {
        return mLineColor;
    }

    public void setLineColor(int lineColor) {
        mLineColor = lineColor;
    }

    public int getBgColor() {
        return mBgColor;
    }

    public void setBgColor(int bgColor) {
        mBgColor = bgColor;
    }

    public LineChartView(Context context) {
        super(context);
        init();
    }

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

    public LineChartView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LineChartView);
        mAxesColor = typedArray.getColor(R.styleable.LineChartView_axesColor, Color.parseColor("#CCCCCC"));
        mAxesWidth = typedArray.getDimension(R.styleable.LineChartView_axesWidth, 2);
        mTextColor = typedArray.getColor(R.styleable.LineChartView_textColor, Color.parseColor("#ABABAB"));
        mTextSize = typedArray.getDimension(R.styleable.LineChartView_textSize, 32);
        mLineColor = typedArray.getColor(R.styleable.LineChartView_lineColor, Color.parseColor("#1fbaf3"));
        mBgColor = typedArray.getColor(R.styleable.LineChartView_bgColor, Color.WHITE);
        typedArray.recycle();

        //  初始化漸變色
        shadeColors = new int[]{
                Color.argb(100, 31, 186, 243), Color.argb(20, 31, 186, 243),
                Color.argb(0, 31, 186, 243)};
        //  初始化折線數據
        mItems = new ArrayList<>();
        mMargin10 = ScreenUtils.dp2px(context, 10);
        init();
    }

    private void init() {
        //  初始化座標軸畫筆
        mPaintAxes = new Paint();
        mPaintAxes.setColor(mAxesColor);
        mPaintAxes.setStrokeWidth(mAxesWidth);

        //  初始化文字畫筆
        mPaintText = new Paint();
        mPaintText.setStyle(Paint.Style.FILL);
        mPaintText.setAntiAlias(true); //抗鋸齒
        mPaintText.setTextSize(mTextSize);
        mPaintText.setColor(mTextColor);
        mPaintText.setTextAlign(Paint.Align.CENTER);//對齊方式

        //  初始化折線的畫筆
        mPaintLine = new Paint();
        mPaintLine.setStyle(Paint.Style.STROKE);
        mPaintLine.setAntiAlias(true);
        mPaintLine.setStrokeWidth(mAxesWidth*2);
        mPaintLine.setColor(mLineColor);

        //  初始化折線路徑
        mPath = new Path();
        mPathShader = new Path();

        //初始化x軸座標點畫筆
        mPaintXPoint = new Paint();
        mPaintXPoint.setStyle(Paint.Style.FILL);
        mPaintXPoint.setAntiAlias(true); //抗鋸齒
        mPaintXPoint.setColor(mAxesColor);
        mPaintXPoint.setStrokeWidth(mAxesWidth);

        //初始化線上折點畫筆
        mPaintPath=new Paint();
        mPaintPath.setStyle(Paint.Style.FILL);
        mPaintPath.setAntiAlias(true); //抗鋸齒
        mPaintPath.setColor(mLineColor);
        mPaintPath.setStrokeWidth(mAxesWidth);


        //  陰影畫筆
        mPaintShader = new Paint();
        mPaintShader.setAntiAlias(true);
        mPaintShader.setStrokeWidth(2f);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (changed) {
            mWidth = getWidth();
            mHeight = getHeight();
            textWidth = (int) mPaintText.measureText(""+max);
            //  初始化原點座標
            xOrigin = mMargin10;
            yOrigin = (mHeight - mTextSize - mMargin10);
            //  設置背景色
            setBackgroundColor(mBgColor);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //  畫座標軸
        drawAxes(canvas);
        //  畫文字
        drawText(canvas);
        //  X,Y軸間距
        yInterval = (yOrigin - mMargin10)/(max - min) ;
        xInterval = (mWidth - mMargin10*2) / (mItems.size() - 1);
        //  畫折線
        drawLine(canvas);
        //  設置動畫
        setAnim(canvas);
    }

    /*@Override
    public boolean onTouchEvent(MotionEvent event) {
        this.getParent().requestDisallowInterceptTouchEvent(true);
        if(event.getAction()==MotionEvent.ACTION_UP){
            for (ItemBean mItem : mItems) {
                if(event.getX()<mItem.getiX()+xInterval/4&&event.getX()>mItem.getiX()-xInterval/4){
                    Log.d("LineChartView", "mItem.getValue():" + mItem.getValue());
                }
            }
        }

        return true;
    }*/

    private void setAnim(Canvas canvas) {
        //測量path
        PathMeasure measure = new PathMeasure(mPath, false);
        float pathLength = measure.getLength();
        /*衝刺路徑效應
             float數組,必須是偶數長度,且>=2,指定了多少長度的實線之後再畫多少長度的空白。
             phase 是跳過這麼長的長度，從此長度之後還是繪製*/
        PathEffect effect = new DashPathEffect(new float[]{pathLength, pathLength}, pathLength - pathLength * mProgress);
        mPaintLine.setPathEffect(effect);
        canvas.drawPath(mPath, mPaintLine);
        if(mProgress==1.0){
            for (ItemBean mItem : mItems) {
                canvas.drawCircle(mItem.getiX(),mItem.getiY(),mAxesWidth*3,mPaintPath);
            }
        }
    }

    private void drawLine(Canvas canvas) {
        //  畫座標點
        ItemBean itemBean=null;
        for (int i = 0; i < mItems.size(); i++) {
            float x = i * xInterval + xOrigin + mAxesWidth;
            float y=yOrigin - (mItems.get(i).getValue() - min) * yInterval;
            itemBean=mItems.get(i);
            if (i == 0) {
                mPath.moveTo(x, y);
                mPathShader.moveTo(x, y);
                canvas.drawText(itemBean.getDate(), x+mMargin10, mHeight - mMargin10, mPaintText);
            } else if (i == mItems.size() - 1) {
                mPath.lineTo(x, y);
                mPathShader.lineTo(x, y);
                canvas.drawText(itemBean.getDate(), x-mMargin10, mHeight - mMargin10, mPaintText);
                mPathShader.lineTo(x, yOrigin);
                mPathShader.lineTo(xOrigin, yOrigin);
                mPathShader.close();
            }else{
                mPath.lineTo(x, y);
                mPathShader.lineTo(x, y);
                if(mItems.size()>24){
                    if(i%6==0){
                        canvas.drawText(itemBean.getDate(), x-mAxesWidth, mHeight - mMargin10, mPaintText);
                    }
                }else {
                    canvas.drawText(itemBean.getDate(), x-mAxesWidth, mHeight - mMargin10, mPaintText);
                }
            }
            itemBean.setiX(x);
            itemBean.setiY(y);
            canvas.drawCircle(x-mAxesWidth,yOrigin,mAxesWidth*2,mPaintXPoint);
        }

        //  漸變陰影  創建着色器
        /*線性漸變
        x0表示渲染起始位置的x座標，
        y0表示渲染起始位置的y座標，
        x1表示渲染結束位置的x座標，
        y1表示渲染結束位置的y座標，
        colors表示渲染的顏色，它是一個顏色數組，數組長度必須大於等於2，
        positions表示colors數組中幾個顏色的相對位置，是一個float類型的數組，該數組的長度必須與colors數組的長度相同。
        如果這個參數使用null也可以，這時系統會按照梯度線來均勻分配colors數組中的顏色，
        tileMode表示平鋪方式
            1:TileMode.CLAMP  表示重複最後一種顏色直到該View結束的地方
            2:TileMode.REPEAT 表示着色器在水平或者垂直方向上對控件進行重複着色，類似於windows系統桌面背景中的“平鋪”
            3:TileMode.MIRROR 在水平方向或者垂直方向上以鏡像的方式進行渲染，這種渲染方式的一個特徵就是具有翻轉的效果
            3種模式的區別在於起始位置到結束位置是否包含全部面積，包含全部則效果一樣
        */
        Shader mShader = new LinearGradient(0, 0, 0, getHeight(), shadeColors, null, Shader.TileMode.CLAMP);
        mPaintShader.setShader(mShader);

        //  繪製漸變陰影
        canvas.drawPath(mPathShader, mPaintShader);
    }

    private void drawText(Canvas canvas) {

        //  繪製最大值
        canvas.drawText(max+"", xOrigin + textWidth/2, 2 * mMargin10, mPaintText);
        canvas.drawCircle(xOrigin,mMargin10,mAxesWidth*2,mPaintXPoint);
        //  繪製最小值
        canvas.drawText(min+"", xOrigin + textWidth/2, yOrigin - 6, mPaintText);
        canvas.drawCircle(xOrigin,yOrigin,mAxesWidth*2,mPaintXPoint);
        //  繪製中間值
        canvas.drawText((max+min)/2+"", xOrigin + textWidth/2, (yOrigin + mMargin10) / 2, mPaintText);
        canvas.drawCircle(xOrigin,(yOrigin + mMargin10) / 2,mAxesWidth*2,mPaintXPoint);
       /* //  繪製開始日期
        canvas.drawText(startTime, xOrigin, mHeight - mMargin10, mPaintText);
        //  繪製結束日期
        canvas.drawText(endTime, mWidth - textWidth - mMargin10, mHeight - mMargin10, mPaintText);*/
    }

    //  畫座標軸
    private void drawAxes(Canvas canvas) {
        //  繪製X軸
        canvas.drawLine(xOrigin, yOrigin,                     mWidth - mMargin10, yOrigin,                  mPaintAxes);
        //  繪製X中軸線
        canvas.drawLine(xOrigin, (yOrigin+ mMargin10) / 2,    mWidth - mMargin10, (yOrigin+ mMargin10) / 2, mPaintAxes);
        //  繪製X上邊線
        //canvas.drawLine(xOrigin, mMargin10,                   mWidth - mMargin10, mMargin10,                mPaintAxes);
        //  繪製畫Y軸
        canvas.drawLine(xOrigin, yOrigin, xOrigin, mMargin10, mPaintAxes);
        //  繪製Y右邊線
        //canvas.drawLine(mWidth - mMargin10, mMargin10, mWidth - mMargin10, yOrigin, mPaintAxes);
    }

    //  計算動畫進度
    public void setPercentage(float percentage) {
        if (percentage < 0.0f || percentage > 1.0f) {
            throw new IllegalArgumentException("setPercentage not between 0.0f and 1.0f");
        }
        mProgress = percentage;
        invalidate();
    }

    /**
     * @param lineChartView
     * @param duration      動畫持續時間
     */
    public void startAnim(LineChartView lineChartView, long duration) {
        //ObjectAnimator通過反射機制，找到了ImageView中的setTranslationX()這個方法，
        // 然後每個十幾ms就調用這個方法，並把我們的變化的值傳到裏面去，從而實現動畫效果。
        //當我們需要用ObjectAnimator實現一個控件的動畫效果時，
        // 我們首先需要做的就是在這個控件中找到對應的setXXX()駝峯式寫法的方法，
        // 只有控件擁有相應的setXXX()方法， 我們傳入的propertyName參數才起到作用
        ObjectAnimator anim = ObjectAnimator.ofFloat(lineChartView, "percentage", 0.0f, 1.0f);
        anim.setDuration(duration);
        anim.setInterpolator(new LinearInterpolator());
        anim.start();
    }

    public void clear(){
        mPath.reset();
        mPathShader.reset();
    }

    //  折線數據的實體類
    public static class ItemBean {

        private int value;
        private float iX;
        private float iY;
        private String date;

        public ItemBean(){}


        public ItemBean(int value,String date) {
            super();
            this.value = value;
            this.date = date;
        }

        public String getDate() {
            return date;
        }

        public void setDate(String date) {
            this.date = date;
        }

        public int getValue() {
            return value;
        }

        public void setValue(int value) {
            this.value = value;
        }

        public float getiX() {
            return iX;
        }

        public void setiX(float iX) {
            this.iX = iX;
        }

        public float getiY() {
            return iY;
        }

        public void setiY(float iY) {
            this.iY = iY;
        }

        @Override
        public String toString() {
            return "ItemBean{" +
                    "value=" + value +
                    ", iX=" + iX +
                    ", iY=" + iY +
                    ", date='" + date + '\'' +
                    '}';
        }
    }
}

//第二步 寫個ScreenUtils類，用來初始化數據時使用：

 

public class ScreenUtils {
    private static int screenW;
    private static int screenH;
    private static float screenDensity;

    public static int getScreenW(Context context){
        if (screenW == 0){
            initScreen(context);
        }
        return screenW;
    }

    public static int getScreenH(Context context){
        if (screenH == 0){
            initScreen(context);
        }
        return screenH;
    }

    public static float getScreenDensity(Context context){
        if (screenDensity == 0){
            initScreen(context);
        }
        return screenDensity;
    }

    private static void initScreen(Context context){
        DisplayMetrics metric = context.getResources().getDisplayMetrics();
        screenW = metric.widthPixels;
        screenH = metric.heightPixels;
        screenDensity = metric.density;
    }


    public static int dp2px(Context context, float dpValue) {
        return (int) (dpValue * getScreenDensity(context) + 0.5f);
    }


    public static int px2dp(Context context, float pxValue) {
        return (int) (pxValue / getScreenDensity(context) + 0.5f);
    }
}

//第三步 在values下寫個attrs.xml文件來設置風格顏色等： 

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="LineChartView">
        <attr name="axesColor" format="color"/> <!--座標軸顏色-->
        <attr name="axesWidth" format="dimension"/><!--座標軸寬度-->
        <attr name="textColor" format="color"/> <!--x軸字體顏色-->
        <attr name="textSize" format="dimension"/> <!--字體大小-->
        <attr name="lineColor" format="color"/> <!--折線顏色-->
        <attr name="bgColor" format="color"/> <!--背景色-->
    </declare-styleable>

</resources>

//第四步 在Activity裏使用：

 

 private void initData() {
        record_header_linecharview = (LineChartView) findViewById(R.id.record_header_linecharview);
        //數據集合
        List<Integer> mList = new ArrayList<>();
        for (int i = 0; i < 7; i++) {
            mList.add(i);
        }
        //日期數據集合
        ArrayList<String> mStringList = new ArrayList<>();
        mStringList.add("週一");
        mStringList.add("週二");
        mStringList.add("週三");
        mStringList.add("週四");
        mStringList.add("週五");
        mStringList.add("週六");
        mStringList.add("週日");

        List<LineChartView.ItemBean> mItems = new ArrayList<>();
        for (int i = 0; i < mList.size(); i++) {
            mItems.add(new LineChartView.ItemBean(mList.get(i),mStringList.get(i)));
        }
        //  設置折線數據
        record_header_linecharview.setItems(mItems);
//        //  開啓動畫
//        record_header_linecharview.startAnim(record_header_linecharview,2000);

        Button mBut = (Button) findViewById(R.id.mBut);
        mBut.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //  開啓動畫
                record_header_linecharview.clear();
                record_header_linecharview.startAnim(record_header_linecharview,2000);
            }
        });
    }

//我的佈局：

 

 <com.example.hasee.a1024ceshi.LineChartView
     android:id="@+id/record_header_linecharview"
     android:layout_width="match_parent"
     android:layout_height="200dp"
     app:textColor="#ABABAB"
     app:textSize="12dp"/>


<Button
    android:id="@+id/mBut"
    android:text="開始動畫"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

//---------------------------------------------------------------------完-----------------------------------------------------------------------------------------