使用ValueAnimator自定义动态XY图表View

使用ValueAnimator自定义动态XY图表View

效果

无废话，先上图：

---

分析需求

-1、x轴展示七天日期，y轴展示七天日期对应的值。
-2、需要一个动画，顺序的每天的数据展示出来。
-3、需要另一个动画，某一天的数据是从底部向上平衡到实际值。

---

实现思路

• 使用drawLine画x轴与y轴的带箭头的线
• 使用drawLine画x轴与y轴的刻度线及刻度值
• 使用ValueAnimator产生个时间差依次准备去画点
• 使用另个ValueAnimator产生个时间差drawCircle画红点
• 将每个点用Path存储起来，然后drawPath即可画连起来的折线

---

实现

使用drawLine画x轴与y轴的带箭头的线

x轴，以左下角的起点作为起点。那么起点的x轴上的坐标是竖向坐标靠近左边半个箭头宽度mArrowSize+本身的getPaddingLeft。y轴可以同理推出为控件的高getHeight-底部的getPaddingBottom及横向坐标下半个箭头的高度mArrowSize。

//画x轴
        int startX1 = getPaddingLeft() + mArrowSize;
        int startY1 = getHeight() - getPaddingBottom() - mArrowSize;//以左下角原点坐为起点
        int stopX1 = getWidth() - getPaddingRight();
        canvas.drawLine(startX1, startY1, stopX1, startY1,mXYPaint);
        canvas.drawLine(stopX1-mArrowSize,getHeight()-getPaddingBottom()-2*mArrowSize, stopX1, startY1,mXYPaint);
        canvas.drawLine(stopX1-mArrowSize,getHeight()-getPaddingBottom(), stopX1, startY1,mXYPaint);

画y轴

//y轴
canvas.drawLine(startX1, startY1, startX1,getPaddingTop(),mXYPaint);
        canvas.drawLine(getPaddingLeft(),getPaddingTop()+mArrowSize, startX1,getPaddingTop(),mXYPaint);
        canvas.drawLine(getPaddingLeft()+2*mArrowSize,getPaddingTop()+mArrowSize, startX1,getPaddingTop(),mXYPaint);

使用drawLine画x轴与y轴的刻度线及刻度值

需要注意的是x轴以为数据集大小来平分，为了箭头与最后一个刻盘预留些空间，需要将宽度减掉预留空间mRemainSpaceSize。
示例起见y轴固定分成5个部分，为了让y轴上的坐标值看起来尽量大些，使用y轴上的实际数据最大值-实际数据最小值除3得出每份perGapY，分布上面4个部分的值，而y轴上的最小值就是实际数据最小值+每份perGapY(最小刻度值在最下面)

//画x轴的刻度
        int realWidth = getWidth() - getPaddingLeft() - getPaddingRight() - mArrowSize - mRemainSpaceSize;
        int perWidthSize = dataSize != 0? realWidth/dataSize : 0;
        for (int i=0;i<dataSize;i++){
            int startX = getPaddingLeft() + mArrowSize + perWidthSize * (i + 1);
            int startY = startY1;
            canvas.drawLine(startX, startY, startX, startY - mMarkLineSize, mXYPaint);
            String xData = formateDate(xDatas.get(i));
            Rect textRect = new Rect();
            mXYTextPaint.getTextBounds(xData, 0, xData.length(), textRect);

            int textStartX = startX - textRect.width() / 2;
            int textStartY = startY + textRect.height()  + 10;
            canvas.drawText(xData,textStartX,textStartY,mXYTextPaint);
        }


        int realStartY = 0;
        //画y轴的刻度
        //y轴上分多少个刻度
        mYDataSize = 5;
        double perGapY = (maxYValue - minYValue) / (mYDataSize-2);
        int realHeight = getHeight() - getPaddingTop() - getPaddingBottom() - mArrowSize - mRemainSpaceSize;
        int perHeightSize = mYDataSize != 0? realHeight/ mYDataSize : 0;
        for (int i=1;i<=mYDataSize;i++){
            int startX = startX1;
            int startY = getHeight() - getPaddingBottom() - mArrowSize - perHeightSize * i;
            canvas.drawLine(startX, startY, startX + mMarkLineSize, startY, mXYPaint);
            if (i == 2){
                realStartY = startY;  //min y轴 开始的坐标位置
            }

            String yData = decimalFormatFor2Rate(minYValue + (i - 2) * perGapY);
            Rect textRect = new Rect();
            mXYTextPaint.getTextBounds(yData,0,yData.length(),textRect);

            int textStartX = startX - textRect.width() - 10;
            int textStartY = startY + textRect.height() / 2;
            canvas.drawText(yData,textStartX,textStartY,mXYTextPaint);
        }

使用ValueAnimator产生个时间差依次准备去画点

使用mDrawDotIndex来表示即将画的点的位置，只有在未开始即将开始时启动动画，否则会无限循环启动动画，不停的invalidate不停的画。

if (-1 == mDrawDotIndex){
            mAnimator = ValueAnimator.ofInt(0, dataSize * 100);
            mAnimator.setDuration(5000);
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    int animatedValue = (Integer) animation.getAnimatedValue();
                    int i = animatedValue / 100;
                    if (!mReadedNumber.contains(i)&&i<dataSize) {
                        mReadedNumber.add(i);
                        //准备画第i个动画
                        mDrawDotIndex = i;
                        mPercent = -1;
                        postInvalidate();
                    }
                    isDrawing = true;
                }
            });
            mAnimator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {
                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    mDrawDotIndex = dataSize - 1;
                    isDrawing = false;
                    mReadedNumber.clear();
                    mPath.reset();
                    mPathReadedIndex.clear();
                    mAnimator.removeAllUpdateListeners();
                }

                @Override
                public void onAnimationCancel(Animator animation) {
                    mDrawDotIndex = dataSize - 1;
                    isDrawing = false;
                }

                @Override
                public void onAnimationRepeat(Animator animation) {
                }
            });
            mAnimator.start();
        }

使用另个ValueAnimator产生个时间差drawCircle画红点

这里简单起点直接指定红点的半径10,将即将要画的最后一个点mDrawDotIndex使用动画从底部往上画出来，使用drawCircle不断的变化y轴即可形成从底部往上平衡的效果。

//画点
        int radius = 10;
        for (int i=0;i<dataSize;i++){
            if (i<=mDrawDotIndex){
                double yValue = yDatas.get(i);
                double number =  (yValue - minYValue) / perGapY;
                final int startX = getPaddingLeft() + mArrowSize + perWidthSize * (i + 1) - radius/2;
                final int startY = (int) (realStartY - number*perHeightSize - radius/2);
                if (i != mDrawDotIndex){
                    canvas.drawCircle(startX, startY, radius, mDotPaint);
                    if (i != 0 && !mPathReadedIndex.contains(i)){
                        mPath.lineTo(startX, startY);
                        mPathReadedIndex.add(i);
                    }
                }else{
                    //动画效果
                    int fromX = startY1;

                    if (-1 == mPercent){
                        mDotAnimator = ValueAnimator.ofFloat(0, 1);
                        mDotAnimator.setDuration(1000);
                        mDotAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                            @Override
                            public void onAnimationUpdate(ValueAnimator animation) {
                                mPercent = (float) animation.getAnimatedValue();
                                invalidate();
                            }
                        });
                        mDotAnimator.addListener(new ValueAnimator.AnimatorListener() {
                            @Override
                            public void onAnimationStart(Animator animation) {
                                mAnimator.pause();
                            }

                            @Override
                            public void onAnimationEnd(Animator animation) {
                                mAnimator.resume();
                                mPercent = 1;
                                if (mDrawDotIndex != 0 && !mPathReadedIndex.contains(mDrawDotIndex)) {
                                    mPath.lineTo(startX, startY);
                                    mPathReadedIndex.add(mDrawDotIndex);
                                }
                                animation.removeAllListeners();
                            }

                            @Override
                            public void onAnimationCancel(Animator animation) {
                                mPercent = 1;
                            }

                            @Override
                            public void onAnimationRepeat(Animator animation) {
                            }
                        });
                        mDotAnimator.start();
                    }else{
                        int gapY = startY - fromX;
                        int thisStartX = (int) (startY - (1-mPercent)*gapY);
                        canvas.drawCircle(startX, thisStartX, radius, mDotPaint);
                    }
                }

                if (i == 0&&!mPathReadedIndex.contains(i)) {
                    mPath.moveTo(startX,startY);
                    mPathReadedIndex.add(i);
                }

            }
        }

将每个点用Path存储起来，然后drawPath即可画连起来的折线

上面已经了个成员变量Path，最后一个点可以在mDotAnimator动画结束时添加进去。这样本次动画mAnimator的最后一个点在结束平稳效果后添加进path中，再将其drawPath画出来。

canvas.drawPath(mPath,mFoldLinePaint);

完整代码

自定义DynamicXYChartView

package com.afeita.test;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import java.text.DecimalFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map;

/**
 * <br /> author: chenshufei
 * <br /> date: 15/10/28
 * <br /> email: chenshufei2@sina.com
 */
public class DynamicXYChartView extends View {

    private int mWidthSize = 0;
    private int mHeightSize = 0;

    private Map<Date,Double> mData;
    private Paint mDotPaint;
    private Paint mFoldLinePaint;
    private Paint mXYPaint;
    private int mArrowSize;
    private int mRemainSpaceSize;
    private int mMarkLineSize;
    private int mXYTextSize;
    private Paint mXYTextPaint;
    private int mYDataSize;
    private int mDrawDotIndex = -1;
    private ValueAnimator mAnimator;

    private boolean isDrawing = false;
    private float mPercent = -1;
    private List<Integer> mReadedNumber;
    private List<Integer> mPathReadedIndex;
    private Path mPath;
    private ValueAnimator mDotAnimator;

    public interface OnDrawStataListener{
        void onDrawStata(boolean isDrawing);
    }

    public DynamicXYChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context,attrs);
    }

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

    public void setData(Map<Date, Double> data,OnDrawStataListener listener) {
        if (isDrawing){
            if (null != listener){
                listener.onDrawStata(isDrawing);
            }
        }else{
            this.mData = data;
            mDrawDotIndex = -1;
            postInvalidate();
        }
    }

    private void init(Context context, AttributeSet attrs) {
        //当未指定宽与高时，即是at_most模式时，设置其默认的宽与高
        mWidthSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,500,getResources().getDisplayMetrics());
        mHeightSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,300,getResources().getDisplayMetrics());
        mArrowSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 15, getResources().getDisplayMetrics());
        //x与y轴留出空白空间，实际
        mRemainSpaceSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, getResources().getDisplayMetrics());
        mMarkLineSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics());

        mXYTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics());
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //判断是否是Almost模式
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        switch (widthMode){
            case MeasureSpec.AT_MOST:
            case MeasureSpec.UNSPECIFIED:
                widthSize = mWidthSize;
                break;
        }

        switch (heightMode){
            case MeasureSpec.AT_MOST:
            case MeasureSpec.UNSPECIFIED:
                heightSize = mHeightSize;
                break;
        }

        setMeasuredDimension(widthSize, heightSize);

    }


    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        //初始化 painter等
        //点的
        mDotPaint = new Paint();
        mDotPaint.setAntiAlias(true);
        mDotPaint.setStyle(Paint.Style.FILL);
        mDotPaint.setDither(true);
        mDotPaint.setColor(Color.RED);

        //折线
        mFoldLinePaint = new Paint();
        mFoldLinePaint.setAntiAlias(true);
        mFoldLinePaint.setStyle(Paint.Style.STROKE);
        mFoldLinePaint.setDither(true);
        mFoldLinePaint.setStrokeWidth(5);
        mFoldLinePaint.setColor(Color.BLACK);

        //坐标
        mXYPaint = new Paint();
        mXYPaint.setAntiAlias(true);
        mXYPaint.setStyle(Paint.Style.FILL);
        mXYPaint.setDither(true);
        mXYPaint.setStrokeWidth(5);
        mXYPaint.setColor(Color.BLACK);

        //坐标上的文字
        mXYTextPaint = new Paint();
        mXYTextPaint.setAntiAlias(true);
        mXYTextPaint.setStyle(Paint.Style.FILL);
        mXYTextPaint.setDither(true);
        mXYTextPaint.setColor(Color.BLACK);
        mXYTextPaint.setTextSize(mXYTextSize);

        mReadedNumber = new ArrayList<Integer>();
        mPath = new Path();
        mPathReadedIndex = new ArrayList<Integer>();

    }


    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        // 释放资源
        if (null != mAnimator){
            mAnimator.cancel();
            mAnimator.removeAllListeners();
            mAnimator = null;
        }
        if (null != mDotAnimator){
            mDotAnimator.cancel();
            mDotAnimator.removeAllUpdateListeners();;
            mDotAnimator = null;
        }
    }

    @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);
        if (mData==null){
            return;
        }
        //获取多少对数据，准备组织其坐标点位置
        final int dataSize = mData!=null ? mData.size() : 0;
        //将Map转成x与y轴上的list数据
        List<Date> xDatas = new ArrayList<>();
        List<Double> yDatas = new ArrayList<>();
        double minYValue = Double.MAX_VALUE;
        double maxYValue = 0;
        for(Map.Entry<Date,Double> entry : mData.entrySet()){
            xDatas.add(entry.getKey());
            if (entry.getValue()<minYValue){
                minYValue = entry.getValue();
            }
            if (entry.getValue()>maxYValue){
                maxYValue = entry.getValue();
            }
            yDatas.add(entry.getValue());
        }


        //不管什么情况，先把x与y轴画出来
        //x轴
        int startX1 = getPaddingLeft() + mArrowSize;
        int startY1 = getHeight() - getPaddingBottom() - mArrowSize;
        int stopX1 = getWidth() - getPaddingRight();
        canvas.drawLine(startX1, startY1, stopX1, startY1,mXYPaint);
        canvas.drawLine(stopX1-mArrowSize,getHeight()-getPaddingBottom()-2*mArrowSize, stopX1, startY1,mXYPaint);
        canvas.drawLine(stopX1-mArrowSize,getHeight()-getPaddingBottom(), stopX1, startY1,mXYPaint);
        //y轴
        canvas.drawLine(startX1, startY1, startX1,getPaddingTop(),mXYPaint);
        canvas.drawLine(getPaddingLeft(),getPaddingTop()+mArrowSize, startX1,getPaddingTop(),mXYPaint);
        canvas.drawLine(getPaddingLeft()+2*mArrowSize,getPaddingTop()+mArrowSize, startX1,getPaddingTop(),mXYPaint);


        //画x轴的刻度
        int realWidth = getWidth() - getPaddingLeft() - getPaddingRight() - mArrowSize - mRemainSpaceSize;
        int perWidthSize = dataSize != 0? realWidth/dataSize : 0;
        for (int i=0;i<dataSize;i++){
            int startX = getPaddingLeft() + mArrowSize + perWidthSize * (i + 1);
            int startY = startY1;
            canvas.drawLine(startX, startY, startX, startY - mMarkLineSize, mXYPaint);
            String xData = formateDate(xDatas.get(i));
            Rect textRect = new Rect();
            mXYTextPaint.getTextBounds(xData, 0, xData.length(), textRect);

            int textStartX = startX - textRect.width() / 2;
            int textStartY = startY + textRect.height()  + 10;
            canvas.drawText(xData,textStartX,textStartY,mXYTextPaint);
        }


        int realStartY = 0;
        //画y轴的刻度
        //y轴上分多少个刻度
        mYDataSize = 5;
        double perGapY = (maxYValue - minYValue) / (mYDataSize-2);
        int realHeight = getHeight() - getPaddingTop() - getPaddingBottom() - mArrowSize - mRemainSpaceSize;
        int perHeightSize = mYDataSize != 0? realHeight/ mYDataSize : 0;
        for (int i=1;i<=mYDataSize;i++){
            int startX = startX1;
            int startY = getHeight() - getPaddingBottom() - mArrowSize - perHeightSize * i;
            canvas.drawLine(startX, startY, startX + mMarkLineSize, startY, mXYPaint);
            if (i == 2){
                realStartY = startY;  //min y轴 开始的坐标位置
            }

            String yData = decimalFormatFor2Rate(minYValue + (i - 2) * perGapY);
            Rect textRect = new Rect();
            mXYTextPaint.getTextBounds(yData,0,yData.length(),textRect);

            int textStartX = startX - textRect.width() - 10;
            int textStartY = startY + textRect.height() / 2;
            canvas.drawText(yData,textStartX,textStartY,mXYTextPaint);
        }

        if (-1 == mDrawDotIndex){
            mAnimator = ValueAnimator.ofInt(0, dataSize * 100);
            mAnimator.setDuration(5000);
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    int animatedValue = (Integer) animation.getAnimatedValue();
                    int i = animatedValue / 100;
                    if (!mReadedNumber.contains(i)&&i<dataSize) {
                        mReadedNumber.add(i);
                        //准备画第i个动画
                        mDrawDotIndex = i;
                        mPercent = -1;
                        postInvalidate();
                    }
                    isDrawing = true;
                }
            });
            mAnimator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {
                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    mDrawDotIndex = dataSize - 1;
                    isDrawing = false;
                    mReadedNumber.clear();
                    mPath.reset();
                    mPathReadedIndex.clear();
                    mAnimator.removeAllUpdateListeners();
                }

                @Override
                public void onAnimationCancel(Animator animation) {
                    mDrawDotIndex = dataSize - 1;
                    isDrawing = false;
                }

                @Override
                public void onAnimationRepeat(Animator animation) {
                }
            });
            mAnimator.start();
        }


        //画点
        int radius = 10;
        for (int i=0;i<dataSize;i++){
            if (i<=mDrawDotIndex){
                double yValue = yDatas.get(i);
                double number =  (yValue - minYValue) / perGapY;
                final int startX = getPaddingLeft() + mArrowSize + perWidthSize * (i + 1) - radius/2;
                final int startY = (int) (realStartY - number*perHeightSize - radius/2);
                if (i != mDrawDotIndex){
                    canvas.drawCircle(startX, startY, radius, mDotPaint);
                    if (i != 0 && !mPathReadedIndex.contains(i)){
                        mPath.lineTo(startX, startY);
                        mPathReadedIndex.add(i);
                    }
                }else{
                    //动画效果
                    int fromX = startY1;

                    if (-1 == mPercent){
                        mDotAnimator = ValueAnimator.ofFloat(0, 1);
                        mDotAnimator.setDuration(1000);
                        mDotAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                            @Override
                            public void onAnimationUpdate(ValueAnimator animation) {
                                mPercent = (float) animation.getAnimatedValue();
                                invalidate();
                            }
                        });
                        mDotAnimator.addListener(new ValueAnimator.AnimatorListener() {
                            @Override
                            public void onAnimationStart(Animator animation) {
                                mAnimator.pause();
                            }

                            @Override
                            public void onAnimationEnd(Animator animation) {
                                mAnimator.resume();
                                mPercent = 1;
                                if (mDrawDotIndex != 0 && !mPathReadedIndex.contains(mDrawDotIndex)) {
                                    mPath.lineTo(startX, startY);
                                    mPathReadedIndex.add(mDrawDotIndex);
                                }
                                animation.removeAllListeners();
                            }

                            @Override
                            public void onAnimationCancel(Animator animation) {
                                mPercent = 1;
                            }

                            @Override
                            public void onAnimationRepeat(Animator animation) {
                            }
                        });
                        mDotAnimator.start();
                    }else{
                        int gapY = startY - fromX;
                        int thisStartX = (int) (startY - (1-mPercent)*gapY);
                        canvas.drawCircle(startX, thisStartX, radius, mDotPaint);
                    }
                }

                if (i == 0&&!mPathReadedIndex.contains(i)) {
                    mPath.moveTo(startX,startY);
                    mPathReadedIndex.add(i);
                }

            }
        }

        canvas.drawPath(mPath,mFoldLinePaint);
    }



    public static String decimalFormatFor2Rate(double rate) {
        return new DecimalFormat("#,##0.00").format(rate);
    }

    public static String formateDate(Date date){
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("MM-dd");
        return simpleDateFormat.format(date);
    }

}

使用DynamicXYChartView的activity代码如下：

package com.afeita.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.example.chenshufei.myapplication.R;

import java.util.Calendar;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.Random;

/**
 * <br /> author: chenshufei
 * <br /> date: 15/10/21
 * <br /> email: chenshufei2@sina.com
 */
public class SecondActivity extends Activity implements View.OnClickListener {

    private DynamicXYChartView mDynamicXYChartView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_second);

        findViewById(R.id.btn_repaint).setOnClickListener(SecondActivity.this);

        Map<Date,Double> dateDoubleMap = emulateData();
        mDynamicXYChartView = (DynamicXYChartView) findViewById(R.id.dxycv_data);
        mDynamicXYChartView.setData(dateDoubleMap,null);

    }

    private Map<Date, Double> emulateData() {
        Map<Date, Double> dateDoubleMap = new LinkedHashMap<>();
        Random random = new Random();
        Calendar calendar = Calendar.getInstance();
        for (int i = 6;i>=0;i--){
            calendar.add(Calendar.DATE,-1*i);
            double value = random.nextDouble() * 10 + 5;

            dateDoubleMap.put(calendar.getTime(), value);
            calendar = Calendar.getInstance();
        }
        return dateDoubleMap;
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_repaint:
                mDynamicXYChartView.setData(emulateData(), new DynamicXYChartView.OnDrawStataListener() {
                    @Override
                    public void onDrawStata(boolean isDrawing) {
                        Toast.makeText(SecondActivity.this, "正在绘制中，请稍候...", Toast.LENGTH_SHORT).show();
                    }
                });
                break;
        }
    }
}

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical" android:layout_width="match_parent"
              android:layout_height="match_parent">


    <Button
        android:id="@+id/btn_repaint"
        android:layout_marginTop="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="重新绘制图表"
        android:layout_gravity="center_horizontal"/>

    <com.afeita.test.DynamicXYChartView
        android:id="@+id/dxycv_data"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        />
</LinearLayout>

注意：为了使用DynamicXYChartView在布局xml中支持wrap_content，这时指定了当计算出是AT_MOST时，分别指定了宽为500dp，高为300dp。