记录一个温度曲线的View

 最近做项目需求的看到需要自定义一个温度曲线的图。由于之前的同事理解需求的时候没有很好的理解产品的需求，将温度的折线图分成了两个View，温度高的在一个View，温度低的在一个View。这样的做法其实是没有很好的理解产品的需求的。为什么这么说，因为一旦拆成两个View，那么哪些相交的点绘制就会有缺陷了。什么意思，看图。

如果按照两个View去做，就会有这种局限性。相交的点就会被切。所以这里就重新修改了这个自定义View。

有了上面的需求，那么就开始我们的设计了。首先为了我们自定义View的能比较好的通用性，我们需要把一些可能会变的东西提取出来。这里只是提取一些很常用的属性，其余需要自定义的，可自己加上。直接看代码

<declare-styleable name="NewWeatherChartView">

    <!--开始的x坐标-->

    <attr name="new_start_point_x" format="dimension"/>

    <!--两点之间x坐标的间隔-->

    <attr name="new_point_x_margin" format="dimension"/>

    <!--显示温度的字体大小-->

    <attr name="temperature_text_size" format="dimension"/>

    <!--圆点的半径-->

    <attr name="point_radius" format="dimension"/>


    <!--选中天气项，温度字体的颜色-->

    <attr name="select_temperature_text_color" format="reference|color"/>

    <!--未选中天气项，温度字体的颜色-->

    <attr name="unselect_temperature_text_color" format="reference|color"/>

    <!--选中天气项，圆点的颜色-->

    <attr name="select_point_color" format="reference|color"/>

    <!--未选中天气项，圆点的颜色-->

    <attr name="unselect_point_color" format="reference|color"/>

    <!--连接线的颜色-->

    <attr name="line_color" format="reference|color"/>

    <!--连接线的类型，可以是实线，也可以是虚线，默认是虚线。0虚线，1实线-->

    <attr name="line_type" format="integer"/>


</declare-styleable>

public class NewWeatherChartView extends View {

    private final static String TAG = "NewWeatherChartView";

    private List<WeatherInfo> items;//温度的数据源


    //都是可以在XML里面配置的属性,目前项目里面都是用的默认配置。

    private int mLineColor;

    private int mSelectTemperatureColor;

    private int mUnSelectTemperatureColor;

    private int mSelectPointColor;

    private int mUnselectPointColor;

    private int mLineType;

    private int mTemperatureTextSize;

    private int mPointStartX = 0;

    private int mPointXMargin = 0;

    private int mPointRadius;



    

    private Point[] mHighPoints; //高温的点的坐标

    private Point[] mLowPoints; //低温的点的坐标


    //这里是为了方便写代码，多创建了几个画笔，也可以用一个画笔，然后配置不同的属性

    private Paint mLinePaint;   //用于画线画笔

    private Paint mTextPaint; // 用于画小圆点旁边的温度文字的画笔

    private Paint mCirclePaint;//用来画小圆点的画笔

   


    private Float mMaxTemperature = Float.MIN_VALUE;//最高温度

    private Float mMinTemperature = Float.MAX_VALUE;//最低温度

    private Path mPath;//连接线的路径

    

    private DecimalFormat mDecimalFormat;



    private int mTodayIndex = -1;//用于判断哪一个被选中


    private Context mContext;

    ...

}

以上就是一些初始化的东西了，那么现在就来思考一下，怎么去画这些东西，上面的初始化也说明了，我们主要是画线，画文字，然后画圆点。那么应该从哪开始呢？首先是从点坐标开始，因为无论是线，还是文字，他们的位置和点都有关系。那么找到点的坐标就是首要的工作。怎么找点的坐标，以及最开始的X坐标是多少。第一个点的X坐标是根据我们的配置来的，那么第二个点的x坐标呢？，第二个点的x坐标就是第一个点的x坐标加上他们之间的在X方向上距离，而在x方向上的距离也是根据属性配置的。所以我们可以很容易得到所有点的x坐标。那么圆点的y坐标呢？首先我们看一张图。

我们的点，应该是均匀分布在剩余高度里面的。

剩余高度 = 控件高度-2*文字的高度。

点的y坐标为

*剩余高度-((当前温度-最低温度)/(最高温度-最低温度)剩余高度)+文字高度

看起来有点复杂，但是有公式的话，代码会比较简单。接下来就需要看初始化的代码了和计算点坐标的代码了

代码如下：

//首先从两个参数的构造函数里面获取各种配置的值

public NewWeatherChartView(Context context, AttributeSet attrs) {

    super(context, attrs);

    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.NewWeatherChartView);

    mPointStartX = (int) typedArray.getDimension(R.styleable.NewWeatherChartView_new_start_point_x, 0);

    mPointXMargin = (int) typedArray.getDimension(R.styleable.NewWeatherChartView_new_point_x_margin, 0);

    mTemperatureTextSize = (int) typedArray.getDimension(R.styleable.NewWeatherChartView_temperature_text_size, 20);

    mPointRadius = (int) typedArray.getDimension(R.styleable.NewWeatherChartView_point_radius, 8);


    mSelectPointColor = typedArray.getColor(R.styleable.NewWeatherChartView_select_point_color, context.getResources().getColor(R.color.weather_select_point_color));

    mUnselectPointColor = typedArray.getColor(R.styleable.NewWeatherChartView_unselect_point_color, context.getResources().getColor(R.color.weather_unselect_point_color));

    mLineColor = typedArray.getColor(R.styleable.NewWeatherChartView_line_color, context.getResources().getColor(R.color.weather_line_color));

    mSelectTemperatureColor = typedArray.getColor(R.styleable.NewWeatherChartView_select_temperature_text_color, context.getResources().getColor(R.color.weather_select_temperature_color));

    mUnSelectTemperatureColor = typedArray.getColor(R.styleable.NewWeatherChartView_unselect_temperature_text_color, context.getResources().getColor(R.color.weather_unselect_temperature_color));


    mLineType = typedArray.getInt(R.styleable.NewWeatherChartView_line_type, 0);


    this.mContext = context;

    typedArray.recycle();

}


private void initData() {

    //初始化线的画笔

    mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    mLinePaint.setStyle(Paint.Style.STROKE);

    mLinePaint.setStrokeWidth(2);

    mLinePaint.setDither(true);

    //配置虚线

    if (mLineType == 0) {

        DashPathEffect pathEffect = new DashPathEffect(new float[]{10, 5}, 1);

        mLinePaint.setPathEffect(pathEffect);

    }

    mPath = new Path();


    //初始化文字的画笔

    mTextPaint = new Paint();

    mTextPaint.setAntiAlias(true);

    mTextPaint.setTextSize(sp2px(mTemperatureTextSize));

    mTextPaint.setTextAlign(Paint.Align.CENTER);


    // 初始化圆点的画笔

    mCirclePaint = new Paint();

    mCirclePaint.setStyle(Paint.Style.FILL);


    mDecimalFormat = new DecimalFormat("0");


    for (int i = 0; i < items.size(); i++) {

        float highY = items.get(i).getHigh();

        float lowY = items.get(i).getLow();

        if (highY > mMaxTemperature) {

            mMaxTemperature = highY;

        }

        if (lowY < mMinTemperature) {

            mMinTemperature = lowY;

        }

        if (DateUtil.fromTodayDate(items.get(i).getDate()) == 0) {

            mTodayIndex = i;

        }

    }

    float span = mMaxTemperature - mMinTemperature;

    //这种情况是为了防止所有温度都一样的情况

    if (span == 0) {

        span = 6.0f;

    }

    mMaxTemperature = mMaxTemperature + span / 6.0f;

    mMinTemperature = mMinTemperature - span / 6.0f;


    mHighPoints = new Point[items.size()];

    mLowPoints = new Point[items.size()];

}


public int sp2px(float spValue) {

    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spValue, Resources.getSystem().getDisplayMetrics());

}


public int dip2px(float dpValue) {

    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, Resources.getSystem().getDisplayMetrics());


}

这些准备工作昨晚之后，我们就可以去onDraw里面画图了。

protected void onDraw(Canvas canvas) {

    Logging.d(TAG, "onDraw: ");

    if (items == null) {

        return;

    }

    int pointX = mPointStartX; // 开始的X坐标

    int textHeight = sp2px(mTemperatureTextSize);//文字的高度

    int remainingHeight = getHeight() - textHeight * 2;//除去文字后，剩余的高度


    // 计算每一个点的X和Y坐标

    for (int i = 0; i < items.size(); i++) {

        int x = pointX + mPointXMargin * i;

        float highTemp = items.get(i).getHigh();

        float lowTemp = items.get(i).getLow();

        int highY = remainingHeight - (int) (remainingHeight * ((highTemp - mMinTemperature) / (mMaxTemperature - mMinTemperature))) + textHeight;

        int lowY = remainingHeight - (int) (remainingHeight * ((lowTemp - mMinTemperature) / (mMaxTemperature - mMinTemperature))) + textHeight;

        mHighPoints[i] = new Point(x, highY);

        mLowPoints[i] = new Point(x, lowY);

    }


    // 画线

    drawLine(mHighPoints, canvas);

    drawLine(mLowPoints, canvas);

    for (int i = 0; i < mHighPoints.length; i++) {

        // 画文本度数 例如：3°

        String yHighText = mDecimalFormat.format(items.get(i).getHigh());

        String yLowText = mDecimalFormat.format(items.get(i).getLow());

        int highDrawY = mHighPoints[i].y - dip2px(mPointRadius + 8);

        int lowDrawY = mLowPoints[i].y + dip2px(mPointRadius + 8 + sp2px(mTemperatureTextSize));


        if (i == mTodayIndex) {

            mTextPaint.setColor(mSelectTemperatureColor);

            mCirclePaint.setColor(mSelectPointColor);

        } else {

            mTextPaint.setColor(mUnSelectTemperatureColor);

            mCirclePaint.setColor(mUnselectPointColor);

        }

        canvas.drawText(yHighText + "°", mHighPoints[i].x, highDrawY, mTextPaint);

        canvas.drawText(yLowText + "°", mLowPoints[i].x, lowDrawY, mTextPaint);

        canvas.drawCircle(mHighPoints[i].x, mHighPoints[i].y, mPointRadius, mCirclePaint);

        canvas.drawCircle(mLowPoints[i].x, mLowPoints[i].y, mPointRadius, mCirclePaint);


    }

}



private void drawLine(Point[] ps, Canvas canvas) {

    Point startp;

    Point endp;

    mPath.reset();

    mLinePaint.setAntiAlias(true);

    for (int i = 0; i < ps.length - 1; i++) {

        startp = ps[i];

        endp = ps[i + 1];

        mLinePaint.setColor(mLineColor);

        canvas.drawLine(startp.x, startp.y, endp.x, endp.y, mLinePaint);

    }

}

以上就是所有关键代码了，当然，还有一个赋值的代码

public void setData(List<WeatherInfo> list) {

    this.items = list;

    initData();

}

来看一下最后的效果图吧。

 以上就是一个简单的温度图了，但是这个图有很多地方可以优化，也有很多地方可以提取出来当作属性。比如我举一个优化的点，文字的测量，上面的代码对文字的测量其实是非常粗糙的。仔细观察会发现上面一条线，文字距离点的距离和下面一条线文字距离点的距离是不一样的。这就是上面没有进行文字测量的结果，我这里进行了一轮文字测量的优化，如下图：  这里是不是好很多了呢？大家还可以进行很多地方的优化。以上就是这篇文章的全部内容了。