公司能用到自定义view的不多，有个简单的折线图练手，花了大半天时间基本搞定，嗯，代码放这了。

image.png

放代码前先放我平时学习做的一些记录
Path.addCircle
canvas
Point
Rect类和RectF类
Paint类
onMeasure

代码放这，核心注释已经写的很清楚了。时间关系，一些简单方法的注释我后面再补充。

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;

import xzh.com.mojiweather.R;
import xzh.com.mojiweather.model.ChartItem;
import xzh.com.mojiweather.utils.Utils;

/**
 * 绘制天气折线图的View
 */
public class ChartView extends View {

    // 上下文
    private Context context;
    // 早上数据源
    private ArrayList<ChartItem> items;
    // 晚上数据源
    private ArrayList<ChartItem> items2;
    // 早上的x坐标数据源
    ArrayList<Integer> xlist;
    // 晚上的x坐标数据源
    ArrayList<Integer> xlist2;
    // 提示文字
    private String unit;
    // 格式化
    private String yFormat = "0.#°";

    int mSplit;
    // 顶部间距
    int mYMargintTop;
    int mMargint2;

    // 线条的油漆
    Paint mPaint;
    // 单位文字的油漆
    Paint mPaintUnit;

    /**
     * 赋值
     *
     * @param list     数据源
     * @param unitInfo 提示文字
     */
    public void setView(ArrayList<ChartItem> list, ArrayList<ChartItem> list2, String unitInfo) {
        this.items = list;
        this.items2 = list2;
        this.unit = unitInfo;
    }

    public ChartView(Context ct) {
        super(ct);
        this.context = ct;
        init();
    }

    public ChartView(Context ct, AttributeSet attrs) {
        super(ct, attrs);
        this.context = ct;
        init();
    }

    public ChartView(Context ct, AttributeSet attrs, int defStyle) {
        super(ct, attrs, defStyle);
        this.context = ct;
        init();
    }

    /**
     * 初始化工具
     */
    private void init() {
        // 初始化所有单位
        mSplit = Utils.dip2px(context, 20);
        mYMargintTop = Utils.dip2px(context, 60);
        mMargint2 = Utils.dip2px(context, 25);

        // x坐标的数据源
        xlist = new ArrayList<>();
        xlist2 = new ArrayList<>();

        // 初始化 油漆
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(context.getResources().getColor(R.color.weather_line));
        mPaint.setStrokeWidth(4);
        mPaint.setStyle(Paint.Style.STROKE);

        // 初始化单位 的油漆
        mPaintUnit = new Paint();
        mPaintUnit.setTextSize(Utils.sp2px(context, 12));
        mPaintUnit.setColor(context.getResources().getColor(R.color.weather_line));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (items == null || items2 == null) {
            return;
        }

        int height = getHeight();
        int width = getWidth();
        // 左右间距
        int marginl = 0;
        int bheight = height - mYMargintTop - 2 * mSplit;

        // 画单位
//        canvas.drawText(unit, mSplit + Utils.dip2px(context, 30f), mMargint2 + mSplit * 2, mPaintUnit);

        // 画早上的X坐标值
        mPaint.setColor(Color.GRAY);
        mPaint.setTextSize(15);//设置字体大小
        for (int i = 0; i < items.size(); i++) {
            // 获取跨度，比如3条数据就平均3块
            int span = (width - 2 * marginl) / items.size();
            // 算出每个跨度的中间值，该值就是x了
            int x = marginl + span / 2 + span * i;
            xlist.add(x);
            drawText(items.get(i).getX(), x, mSplit * 2, canvas);
        }
        // 画晚上的X坐标值
        for (int i = 0; i < items2.size(); i++) {
            // 获取跨度，比如3条数据就平均3块
            int span = (width - 2 * marginl) / items2.size();
            // 算出每个跨度的中间值，该值就是x了
            int x = marginl + span / 2 + span * i;
            xlist2.add(x);
            drawText(items2.get(i).getX(), x, mSplit * 2, canvas);
        }

        // 获取最大值和最小值
        float max = Float.MIN_VALUE;
        float min = Float.MAX_VALUE;
        for (int i = 0; i < items.size(); i++) {
            float y = items.get(i).getY();
            if (y > max) {
                max = y;
            }
            if (y < min) {
                min = y;
            }
        }
        for (int i = 0; i < items2.size(); i++) {
            float y = items2.get(i).getY();
            if (y > max) {
                max = y;
            }
            if (y < min) {
                min = y;
            }
        }

        // 最大跟最小的差距为0，则设置默认值6给它们
        float span = max - min;
        if (span == 0) {
            span = 6.0f;
        }
        // 添加差距，这样即使span为6,最大的也+1，最小的也-1。他们相差就2点了
        max = max + span / 6.0f;
        min = min - span / 6.0f;

        // 获取点集合
        Point[] mPoints = getPoints(items, xlist, max, min, bheight, mYMargintTop);
        Point[] mPoints2 = getPoints(items2, xlist2, max, min, bheight, mYMargintTop);

        // 画线
        mPaint.setColor(context.getResources().getColor(R.color.morning_color));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(8);
        drawLine(mPoints, canvas, mPaint);
        mPaint.setColor(context.getResources().getColor(R.color.night_color));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(8);
        drawLine(mPoints2, canvas, mPaint);

        // 画点
        mPaint.setColor(context.getResources().getColor(R.color.morning_color));
        mPaint.setStyle(Paint.Style.FILL);
        for (int i = 0; i < mPoints.length; i++) {
            canvas.drawCircle(mPoints[i].x, mPoints[i].y, 12, mPaint);
            @SuppressLint("DrawAllocation")
            String yText = new java.text.DecimalFormat(yFormat).format(items.get(i).getY());
            drawText(yText, mPoints[i].x,
                    mPoints[i].y - Utils.dip2px(context, 12), canvas);
        }
        mPaint.setColor(context.getResources().getColor(R.color.night_color));
        for (int i = 0; i < mPoints2.length; i++) {
            canvas.drawCircle(mPoints2[i].x, mPoints2[i].y, 12, mPaint);
            @SuppressLint("DrawAllocation")
            String yText = new java.text.DecimalFormat(yFormat).format(items2.get(i).getY());
            drawText(yText, mPoints2[i].x,
                    mPoints2[i].y - Utils.dip2px(context, 12), canvas);
        }
    }

    /**
     * @param items items数据源
     * @param xlist 横轴坐标
     * @param max   最大的max
     * @param min   最小的min
     * @param h     仅仅该折现图的高度
     * @param top   顶部间距
     * @return Point
     */
    private Point[] getPoints(ArrayList<ChartItem> items, ArrayList<Integer> xlist, float max, float min,
                              int h, int top) {
        // 实例化point
        Point[] points = new Point[items.size()];
        // 获取y轴位置,这个逻辑还是很好理解的
        for (int i = 0; i < items.size(); i++) {
            // （1）items.get(i).getY() - min 首先是y的实际天气度数数据 - 最小的y轴数据获取他们的差距作为分子
            double molecule = items.get(i).getY() - min;
            // （2）max - min 获取y轴的范围作为分母
            double denominator = max - min;
            // （3）然后是h具体高度*(1)(2)步骤组成的分子分母获取 具体的 y轴差异 数据
            int yDifference = (int) (h * (molecule / denominator));
            //  （4）最后 h+顶部间距 - y轴差异 就获得y轴数据了
            int y = top + h - yDifference;
            points[i] = new Point(xlist.get(i), y);
        }
        return points;
    }

    private void drawLine(Point[] ps, Canvas canvas, Paint paint) {
        Point startp;
        Point endp;
        for (int i = 0; i < ps.length - 1; i++) {
            startp = ps[i];
            endp = ps[i + 1];
            canvas.drawLine(startp.x, startp.y, endp.x, endp.y, paint);
        }
    }

    private void drawText(String text, int x, int y, Canvas canvas) {
        Paint p = new Paint();
        p.setAlpha(context.getResources().getColor(R.color.color_write));
        p.setTextSize(Utils.sp2px(context, 14));
        p.setTextAlign(Paint.Align.CENTER);
        p.setColor(Color.WHITE);
        canvas.drawText(text, x, y, p);
    }


}