Android自定义view之天气折线图

Android自定义view之天气折线图

最近公司一个项目需求，需要添加一个折线图，能够显示七天的天气信息。当然这个需求并不是很难，网上也有很多相关的例子，但是为了巩固下自定义view的基础，所以我决定还是自己写一个玩玩。不啰嗦，先上效果图（demo没有美化，比较简陋）

看了效果图，是不是感觉比较简单，麻雀虽小，但是五脏俱全，这里面囊括自定义view的核心。
先介绍下自定义view里面的几个核心方法，后面我们都有用到的。
OnMeasure 这个负责测量的，一般我习惯在这里计算自定义view需要的一些值，比如说间距，大小等。
OnDraw 听这个名字就知道是绘制了，也是这个demo的最重要的地方了。

---

分析

两点确定一条线，这个概念大概我们在读小学的时候老师就应该教过我们吧，所以我们绘制折线的时候也是要依据这个概念了。点是通过XY来确定的，这里X是比较简单确定，因为都是相同的间隔，难点就是Y了。
想要知道Y坐标也是很简单的，在七天温度中，我们可以知道最高温与最低温相差多少，然后也可以知道我们的绘制区域的高度，最后就可以得知一个温度所占的高度。然后用每一个温度去减去最低温，就可以得与最低温相差多少，然后就很轻松的知道这个温度的高度了。

声明需要的值

将一些常用的值写在上面是为了便于以后修改，万一哪天产品经理要你改下颜色什么的，一下就可以搞定了，不用到处去找。

   /**
     * view的总高度
     */
    private  int mViewHeight;

    /**
     * view的总宽度
     */
    private int mViewWidth;

    /**
     * 温度字体大小
     */
    private int mTempTextSize=22;

    /**
     * 温度字体颜色
     */
    private int mTempTextColor=Color.GREEN;

    /**
     * 线的宽度
     */
    private int mWeaLineWidth = 3;

    /**
     * 圆点的半径
     */
    private int mWeaDotRadius = 5;

    /**
     * 画圆圈的画笔与画线的笔
     */
    private Paint mDotPaint;

    private Paint mLinePaint;
    /**
     * 画灰色线的笔与画温度的笔
     */
    private Paint mGrayLinePaint;

    private TextPaint mTempPaint;

    /**
     * 文字和点的间距
     */
    private int mTextDotDistance = 20;

    /**
     * 坐标点文字偏移量
     */
    private static final int POINT_TEXT_OFFSET = 10;
    /**
     *  最高温集合中温度差
     */
    private float mHighsTempest;

    /**
     *  最低温集合中温度差
     */
    private int mLowsTempest;

    /**
     * 最高温数组
     */
    private List<Integer> mHighs;

    /**
     * 最低温数组
     */
    private List<Integer> mLows;

    /**
     * 与顶部和底部的间距
     */
    private final int mMarginTopAndrBottom=15;

    /**
     *每个点的间隔X轴
     */
    private int mInterval;

    /**
     * 第一个点的X坐标
     */
    private float mFristX;

    /**
     * 折线图高度（单个）
     */
    private float mLineHeight;
    /**
     * 灰色线的间隔
     */
    private int mSpace=200;
    //高温线的颜色
    private final  static int LINE_COLOR_HIGH=Color.RED;
    //低温线的颜色
    private final static int LINE_COLOR_LOW=Color.BLUE;

绘制线

因为七个点，所以只要画6条线就OK了.

 private void drawLine(Canvas canvas) {
        float highsBaseY=mLineHeight/mHighsTempest;//最高温中每隔一度对应相隔多少y坐标
        float lowsBaseY=mLineHeight/mLowsTempest;//最低温中每隔一度对应相隔多少y坐标
        float y1,y2=0f;//y1起点y坐标，y2 终点y坐标
        float x1,x2=0f;
        //绘制高温
        for (int i=0;i<mHighs.size()-1;i++){
            x1=mFristX+mInterval*i;
            x2=mFristX+mInterval*(i+1);

            y1=mHighs.get(i)-mHighsLowest;
            y1=highsBaseY*y1-(mMarginTopAndrBottom*3);
            y1=mLineHeight-y1;

            y2=mHighs.get(i+1)-mHighsLowest;
            y2=highsBaseY*y2-(mMarginTopAndrBottom*3);
            y2=mLineHeight-y2;
            canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG));
            canvas.drawLine(x1,y1,x2,y2,mLinePaint);

        }
        //绘制低温
        mLinePaint.setColor(Color.BLUE);
        for (int i=0;i<mLows.size()-1;i++){
            x1=mFristX+mInterval*i;
            x2=mFristX+mInterval*(i+1);

            y1=mLows.get(i)-mLowsLowsest;
            y1=lowsBaseY*y1-(mMarginTopAndrBottom*3);
            y1=mLineHeight-y1+mSpace;

            y2=mLows.get(i+1)-mLowsLowsest;
            y2=lowsBaseY*y2-(mMarginTopAndrBottom*3);
            y2=mLineHeight-y2+mSpace;
            canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG));
            canvas.drawLine(x1,y1,x2,y2,mLinePaint);

        }
    }

绘制圆圈

    private void drawDot(Canvas canvas) {
        float highsBaseY=mLineHeight/mHighsTempest;//最高温中每隔一度对应相隔多少y坐标
        float lowsBaseY=mLineHeight/mLowsTempest;//最低温中每隔一度对应相隔多少y坐标
      //  Log.e("smile","highsBaseY "+highsBaseY+"  lowsBaseY"+lowsBaseY);
        float y=0f;
        float x=0f;
        for (int i = 0; i < mHighs.size(); i++) {

            y=mHighs.get(i)-mHighsLowest;
            x=mFristX+mInterval*i;
            y=highsBaseY*y-(mMarginTopAndrBottom*3);
            y=mLineHeight-y;
            canvas.drawCircle(x,y,mWeaDotRadius,mDotPaint);

        }

        for (int i = 0; i < mLows.size(); i++) {
          //  Log.e("smile","lowset "+mLowsLowsest+"  "+mLows.get(i)+" mlineHeight "+mLineHeight);
            y=mLows.get(i)-mLowsLowsest;
            y=lowsBaseY*y-(mMarginTopAndrBottom*3);
            y=mLineHeight-y+mSpace;

            canvas.drawCircle(mFristX+mInterval*i,y,mWeaDotRadius,mDotPaint);

        }


    }

绘制温度

记住一个是在上面，一个是在下面，

 private void drawTemp(Canvas canvas){
        float baseY=mLineHeight/mHighsTempest;//每隔一度对应相隔多少y坐标
        float lowsBaseY=mLineHeight/mLowsTempest;//最低温中每隔一度对应相隔多少y坐标
        float y=0f;
        float x=0f;
        for (int i = 0; i < mHighs.size(); i++) {
            y=mHighs.get(i)-mHighsLowest;
            y=baseY*y-(mMarginTopAndrBottom*3);
            y=mLineHeight-y-mTextDotDistance;
            x=mFristX+mInterval*i-POINT_TEXT_OFFSET;
            canvas.drawText(String.valueOf(mHighs.get(i)),x,y,mTempPaint);
        }

        for (int i = 0; i < mHighs.size(); i++) {
            y=mLows.get(i)-mLowsLowsest;
            y=lowsBaseY*y-(mMarginTopAndrBottom*3);
            y=mLineHeight-y+mSpace+mTextDotDistance+10;
            x=mFristX+mInterval*i-POINT_TEXT_OFFSET;
            canvas.drawText(String.valueOf(mLows.get(i)),x,y,mTempPaint);
        }

    }

最后贴上这个类的源码：传送门

代码都有详细的注释。周五万岁，，，