安卓自定义View实现简单折线图

自定义View实现折线图：

运行效果：

少说废话，实现起来还是比较简单的，无非就是使用canvas进行绘图，以及坐标的计算，下面直接贴代码：

ChartView.java

/**
 * Created by wangke on 2017/2/20.
 * 自定义折线图
 */

public class ChartView extends View{

    private int mViewHeight; //当前View的高
    private int mViewWidth; //当前View的宽

    private Paint mPaintCdt;// 绘制坐标系的画笔
    private Paint mPaintSysPoint; //绘制坐标系上刻度点
    private Paint mPaintLinePoint; //绘制折线上的点
    private Paint mPaintText; //绘制文字
    private Paint mPaintLine; //绘制折线
    private Paint mPaintDash; //绘制虚线
    private Paint mPaintSys; //x,y轴

    private Rect mXBound;
    private Rect mYBound;

    private ArrayList<Point> pointList = null;
    private int X_MAX; //传入点的X的最大坐标
    private int Y_MAX; //传入点的Y的最大坐标
    private float mScreenXdistance; //x轴刻度在屏幕上的间隔
    private float mScreenYdistance; //y轴刻度在屏幕上的间隔

    //折线图距离四周的像素大小
    private int Margin = 80;

    private int coordinateSystemColor;
    private float coordinateSystemSize;
    private int lineColor;
    private float lineSize;
    private int lineColorPoint;
    private float lineColorPointRadius;
    private int scalePointColor;
    private float scalePointRadius;
    private boolean isShowDash;
    private int xScale;
    private int yScale;
    private float dashSize;
    private int dashColor;


    public ChartView(Context context) {
        super(context);
        InitPaint();
    }

    //设置点的数据
    public void setPoint(ArrayList<Point> points) {

        pointList = new ArrayList();

        pointList = points;


        int []xPointArray = new int[100];
        int []yPointArray = new int[100];

        //遍历传入的点的坐标，获取最大的x,y点的坐标，用来计算刻度
        for(int i=0;i<pointList.size();i++){

            Point point = pointList.get(i);
            xPointArray[i] = point.x;
            yPointArray[i] = point.y;

        }

        Arrays.sort(xPointArray);
        Arrays.sort(yPointArray);

        X_MAX = xPointArray[xPointArray.length-1];
        Y_MAX = yPointArray[yPointArray.length-1];

        Log.i("wk","X的最大坐标："+xPointArray[xPointArray.length-1]);
        Log.i("wk","y的最大坐标："+yPointArray[yPointArray.length-1]);

        //调用绘制
        invalidate();


    }

    //初始化画笔
    private void InitPaint() {

        mPaintCdt = new Paint(Paint.ANTI_ALIAS_FLAG);
        //设置画线
        mPaintCdt.setStyle(Paint.Style.STROKE);
        //设置线的宽度
        mPaintCdt.setStrokeWidth(lineSize);
        mPaintCdt.setColor(lineColor);
        mPaintSysPoint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //设置填充
        mPaintSysPoint.setStyle(Paint.Style.FILL);
        mPaintSysPoint.setColor(scalePointColor);
        mPaintLinePoint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //设置填充
        mPaintLinePoint.setStyle(Paint.Style.FILL);
        Log.i("wk","线上点的颜色："+lineColor);
        mPaintLinePoint.setColor(lineColorPoint);
        //绘制xy轴
        mPaintSys = new Paint(Paint.ANTI_ALIAS_FLAG);
        //设置画线
        mPaintSys.setStyle(Paint.Style.STROKE);
        //设置线的宽度
        mPaintSys.setStrokeWidth(coordinateSystemSize);
        mPaintSys.setColor(coordinateSystemColor);
        mPaintText = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setColor(Color.WHITE);
        mPaintText.setTextSize(30);
        mPaintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
        //设置画线
        mPaintLine.setStyle(Paint.Style.STROKE);
        //设置线的宽度
        mPaintLine.setStrokeWidth(lineSize);
        //设置画笔的颜色
        mPaintLine.setColor(lineColor);
        mPaintDash = new Paint();
        mPaintDash.setStyle(Paint.Style.STROKE);
        mPaintDash.setStrokeWidth(dashSize);
        mPaintDash.setColor(dashColor);
        mPaintDash.setPathEffect(new DashPathEffect(new float[]{10,10},0));

        mXBound = new Rect();
        mYBound = new Rect();

        invalidate();

    }

    public ChartView(Context context, AttributeSet attrs) {
        super(context, attrs);

        //获取属性值
        getAttrs(context,attrs);
        InitPaint();
    }
    //获取设置的属性
    private void getAttrs(Context context,AttributeSet attrs) {

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ChartView);


        //坐标系颜色
        coordinateSystemColor = ta.getColor(R.styleable.ChartView_coordinateSystemColor, Color.RED);
        coordinateSystemSize = ta.getDimension(R.styleable.ChartView_coordinateSystemLineSize, 3f);


        //折线颜色
        lineColor = ta.getColor(R.styleable.ChartView_lineColor, Color.BLACK);
        lineSize = ta.getDimension(R.styleable.ChartView_lineSize, 2f);


        //折线上坐标点颜色
        lineColorPoint = ta.getColor(R.styleable.ChartView_linePointColor, Color.RED);
        //折线上坐标点的半径
        lineColorPointRadius = ta.getDimension(R.styleable.ChartView_linePointRadius,6f);


        //刻度点颜色
        scalePointColor = ta.getColor(R.styleable.ChartView_scalePointColor, Color.RED);
        //刻度点半径
        scalePointRadius = ta.getDimension(R.styleable.ChartView_scalePointRadius, 6);

        //设置是否显示虚线
        isShowDash = ta.getBoolean(R.styleable.ChartView_showDash,false);

        dashSize = ta.getDimension(R.styleable.ChartView_setDashSize,2f);

        dashColor = ta.getColor(R.styleable.ChartView_setDashColor, Color.WHITE);

        xScale = ta.getInt(R.styleable.ChartView_setXScale,5);
        yScale = ta.getInt(R.styleable.ChartView_setYScale,5);

        ta.recycle();


        Log.i("wk","coordinateSystemColor:"+ coordinateSystemColor +"\n coordinateSystemSize:"+ coordinateSystemSize +"\n"+"lineColor:"+ lineColor +"\n"+"lineSize:"+ lineSize);




    }

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

        getAttrs(context,attrs);
        InitPaint();

    }


    //测量view
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        setMeasuredDimension(measureWidth(widthMeasureSpec),measureHeight(heightMeasureSpec));




    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        //获取当前View的宽高
        mViewWidth = w;
        mViewHeight = h;

        Log.i("wk","宽度："+w);
        Log.i("wk","高度："+h);

    }

    //绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //绘制X轴Y轴 以及原点
        canvas.drawLine(Margin,mViewHeight-Margin, Margin,5, mPaintSys);

        canvas.drawLine(Margin,mViewHeight-Margin,mViewWidth-5,mViewHeight-Margin, mPaintSys);

        //绘制原点
        canvas.drawCircle(Margin,mViewHeight-Margin,scalePointRadius,mPaintSysPoint);

        //

        /**
         * 计算两个刻度之间的间距：
         *
         *     1.刻度的个数 = 传入坐标最大的坐标点/坐标轴间距
         *     2.两个刻度之间的间距 = 屏幕的宽或高 /刻度的个数
         *
         */


        int num_x = X_MAX/xScale; //x轴上需要绘制的刻度的个数
        mScreenXdistance = (mViewWidth- Margin *2)/(num_x*1f);

        Log.i("wk","需要绘制的刻度个数==>"+num_x+"两个刻度间间隔："+ mScreenXdistance);

        int num_y = Y_MAX/yScale;
        mScreenYdistance = (mViewHeight-Margin*2)/(num_y*1f);
        Log.i("wk","需要绘制的刻度个数==>"+num_x+"两个刻度间间隔："+ mScreenXdistance);


        //绘制 X,y轴刻度标记
        for(int i=0;i<pointList.size();i++){

            canvas.drawCircle(Margin +(i* mScreenXdistance),mViewHeight-Margin,scalePointRadius,mPaintSysPoint);

            canvas.drawCircle(Margin,mViewHeight-Margin-(i* mScreenYdistance),scalePointRadius,mPaintSysPoint);

            //计算刻度字体的宽高
            String index_x = String.valueOf(i*xScale);
            String index_y = String.valueOf(i*yScale);
            mPaintText.getTextBounds(index_x,0,index_x.length(),mXBound);
            mPaintText.getTextBounds(index_y,0,index_x.length(),mYBound);
            int indexWidth_x = mXBound.width();
            int indexHeight_x = mXBound.height();
            int indexWidth_y = mYBound.width();
            int indexHeight_y = mYBound.height();

            Log.i("wk","字体的宽度："+indexWidth_x+"字体的高度："+indexHeight_x);
            canvas.drawText(index_x, Margin +(i* mScreenXdistance),mViewHeight-Margin+indexHeight_x+indexHeight_x/2,mPaintText);
            if(i!=0) {
                canvas.drawText(index_y, Margin - indexHeight_y-indexWidth_y/2, mViewHeight - Margin - (i * mScreenYdistance), mPaintText);
            }

        }

        /**
         * 绘制折线
         */
        Point LastPoint = new Point(); //记录上一个坐标点
        LastPoint.x = Margin;
        LastPoint.y = mViewHeight-Margin;

        for(int i=1;i<pointList.size();i++){


            /**
             * 计算绘制点的坐标位置
             * 绘制点的坐标 =  (传入点的的最大的xy坐标/坐标轴上的间隔） * 坐标间隔对应的屏幕上的间隔
             */
//            canvas.drawCircle(LastPoint.x,LastPoint.y,4f,mPaintPoint);
            //计算出脱离坐标系的点所处的位置
            float point_x = (pointList.get(i).x/(xScale*1f))* mScreenXdistance;
            float point_y = (pointList.get(i).y/(yScale*1f))* mScreenYdistance;

            //坐标系内的点的位置

            float startX = LastPoint.x;
            float startY = LastPoint.y;

            float endX = Margin +point_x;
            float endY = mViewHeight-Margin-point_y;

            //需要计算此处


            canvas.drawLine(startX,startY,endX,endY,mPaintLine);

            //记录上一个坐标点的位置
            LastPoint.x = (int) endX;
            LastPoint.y = (int) endY;


            if(isShowDash) {
                //绘制横向虚线
                canvas.drawLine(Margin, mViewHeight - Margin - point_y -lineColorPointRadius/2, Margin + point_x - lineColorPointRadius/2, mViewHeight - Margin - point_y -lineColorPointRadius/2, mPaintDash);
                //绘制竖向虚线
                canvas.drawLine(LastPoint.x, LastPoint.y, LastPoint.x, mViewHeight - Margin - lineColorPointRadius, mPaintDash);
            }

            canvas.drawCircle(LastPoint.x, LastPoint.y, lineColorPointRadius, mPaintLinePoint);

        }


    }

    //测量view高度
    private int measureHeight(int heightMeasureSpec) {

        int result = 0;

        int specSize = MeasureSpec.getSize(heightMeasureSpec); //获取高的高度 单位 为px

        int specMode = MeasureSpec.getMode(heightMeasureSpec);//获取测量的模式

        //如果是精确测量，就将获取View的大小设置给将要返回的测量值
        if(specMode == MeasureSpec.EXACTLY){

            Log.i("wk","高度:精确测量 + specSize:==>"+specSize);

            result = specSize;

        }else{

            Log.i("wk","高度:UNSPECIFIED + specSize:==>"+specSize);

            result = 400;

            //如果设置成wrap_content时，给高度指定一个值
            if(specMode == MeasureSpec.AT_MOST){

                Log.i("wk","高度:最大值模式 + specSize:==>"+specSize);

                result = Math.min(result,specSize);

            }
        }



        return result;
    }

    //测量view宽度
    private int  measureWidth(int widthMeasureSpec) {


        int result = 0;

        int specSize = MeasureSpec.getSize(widthMeasureSpec); //获取高的高度

        int specMode = MeasureSpec.getMode(widthMeasureSpec);//获取测量的模式

        //如果是精确测量，就将获取View的大小设置给将要返回的测量值
        if(specMode == MeasureSpec.EXACTLY){

            Log.i("wk","宽度:精确测量 + specSize:==>"+specSize);

            result = specSize;

        }else{

            Log.i("wk","宽度:UNSPECIFIED + specSize:==>"+specSize);

            result = 400;
            //如果设置成wrap_content时，给高度指定一个值
            if(specMode == MeasureSpec.AT_MOST){

                Log.i("wk","宽度:最大值模式 + specSize:==>"+specSize);

                result = Math.min(result,specSize);
            }
        }

        return result;
    }
}

attrs.xml
自定义属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="ChartView">
        <!--设置坐标系的颜色-->
        <attr name="coordinateSystemColor" format="color" />
        <!--设置坐标系线条的尺寸-->
        <attr name="coordinateSystemLineSize" format="dimension" />

        <!--设置刻度点的颜色-->
        <attr name="scalePointColor" format="color" />
        <!--设置刻度点的半径-->
        <attr name="scalePointRadius" format="dimension" />

        <!--设置折线的颜色-->
        <attr name="lineColor" format="color" />
        <!--设置着折线的宽度-->
        <attr name="lineSize" format="dimension" />

        <!--设置折线点的颜色-->
        <attr name="linePointColor" format="color" />
        <!--设置折线点的半径-->
        <attr name="linePointRadius" format="dimension" />

        <!--设置是否显示虚线-->
        <attr name="showDash" format="boolean" />
        <attr name="setDashSize" format="dimension"/>
        <attr name="setDashColor" format="color"/>

        <!--设置坐标轴上刻度的间隔-->
        <attr name="setXScale" format="integer" />
        <attr name="setYScale" format="integer" />


    </declare-styleable>


</resources>

activity_main.xml

    <com.merpyzf.studymultimedia.ChartView
        android:id="@+id/myChartView"
        android:layout_marginTop="20dp"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="600dp"
        app:linePointColor="@color/colorAccent"
        app:scalePointColor="#f76"
        app:linePointRadius="5dp"
        app:lineColor="#fff600"
        app:lineSize="2dp"
        app:coordinateSystemColor="#000000"
        app:coordinateSystemLineSize="2dp"
        app:scalePointRadius="6dp"
        app:setDashSize="1dp"
        app:showDash="true"
        />

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private MyService.MyBinder myBinder;
    private ChartView MyChartView;
    private ArrayList<Point> pointList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MyChartView = (ChartView) findViewById(R.id.myChartView);
        Random random = new Random();
        pointList = new ArrayList<Point>();

        for(int i=0;i<=10;i++){
            Point p = new Point(i*5,random.nextInt(30));
            pointList.add(p);
        }

        //给ChartView设置坐标
        MyChartView.setPoint(pointList);

    }
}

后面要花一段时间仔细的研究一下自定义View的知识，当然上面的这个折线图只是脑子一热敲出来的，不具备实用能力(⊙o⊙)…

量变引起质变

撒花 撒花 ^^O(∩∩)O哈哈~