自己定义View之Chart图标系列（1）—

近期要做一些图表类的需求，一開始就去github上看了看，发现开源的图表框架还是蛮多的。可是非常少有全然符合我的需求的。另外就是使用起来比較麻烦。所以就决定自己来造轮子了~~~

今天要介绍的就是Android图标系列中点阵图（姑且这么叫着吧╮(╯▽╰)╭）的画法。

效果图例如以下：

需求：

1. 给出几个点画出坐标轴（用虚线）

2. 画出相应的点在点的上方标出数值

3. 下方要显示个数值表示的意义

4. 重点！！

！

！动态计算坐标轴，多余的坐标不能显示。

前三条好理解。第四条啥意思呢~

（比方说，我们数据是{10.1，12.5, 20.2, 15.1} 那么我们的坐标轴起点就应该是从10開始画，而不是0！）例如以下图所看到的

接下来我们就来一步步实现这些需求吧~

1.定义数据模型

**

 * Created by JK on 2016/1/18.

 * 点阵折线图的数据模型

 */

public class DotChartItem {

    public int color;//颜色

    public float value;//值

    public String title;//标题

    public DotChartItem(int color, float value, String title) {

        this.color = color;

        this.value = value;

        this.title = title;

    }

}

2.自己定义View —— JKLineChart

首先是初始化部分

/**

 * Created by JK on 16/1/18.

 * 用毛的开源项目自己写控件之点阵图

 * 这是一个点阵图

 */

public class JKLineChart extends View {

    private static final String TAG = "JKLineChart";

    private Context mContext;

    private Paint mCoordPaint;//坐标线的Paint

    private Paint mIndicPaint;  //点图的Paint

    private Paint mHintTitlePaint; //提示块的Paint

    private int mWidth;

    private int mHeight;

    private int mCoordColor = Color.GRAY; //坐标线的color

    private int mPadding = 20;

    private int mGapHeight = 50;//坐标轴之间的间隔

    private float mTextX = 0f; //提示模块中。第一个方块的X坐标（和坐标上的字分离）

    private float[] mMinAndMaxPointY = new float[2]; //最低点和最高点的Y坐标（參考点 用来计算方块的坐标）

    private List<LineChartItem> mItemList; //数据集合

    private List<LineChartItem> mTypeSet;//下方提示模块的数据集合

    private float[] values;

    enum IndicatorType {  //点阵图 图形类型

        CIRCLE, //圆

        RECTANGLE //方块

    }

    private IndicatorType mIndicatorType = IndicatorType.RECTANGLE;

    private int mGap = 5; //坐标轴之间的间隔

    private int mIndicWidth = 5; //小方块的宽度 或者小圆圈的直径

    //以下2个值用来做动画

    private int mInitWidth = 0;

    private int mSpeed = 1;

    private boolean isShowHintBlock = true; //是否显示底下的提示模块

    private int mHintTitleHeight = 30; //提示模块高度

    private final double EP = 0.000000001;

    public JKLineChart(Context context) {

        this(context, null);

    }

    public JKLineChart(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }

    public JKLineChart(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.JKLineChart, 0, 0);

        try {

            isShowHintBlock = typedArray.getBoolean(R.styleable.JKLineChart_showHintBlock, true);

            //坐标轴之间的间隔 默觉得5

            mGap = typedArray.getInt(R.styleable.JKLineChart_coordGap, mGap);

            //点是用圆圈还是用方块来画

            int isRound = typedArray.getInt(R.styleable.JKLineChart_indicatorType, 1);

            Log.d(TAG, "ROUND :" + isRound);

            if (isRound == 0) {

                mIndicatorType = IndicatorType.CIRCLE;

            } else {

                mIndicatorType = IndicatorType.RECTANGLE;

            }

        } finally {

            typedArray.recycle();

        }

        init(context);

    }

上面的操作主要是定义一些变量。并从构造函数中获取我们的自己定义属性

 private void init(Context context) {

        this.mContext = context;

        mItemList = new ArrayList<LineChartItem>();

        //mPadding = dip2px(context,mPadding);

        mIndicWidth = dip2px(context, mIndicWidth);

        mHintTitleHeight = dip2px(context, 40);

        mGapHeight = dip2px(context,mGapHeight);

        initPaint();

    }

    //初始化画笔

    private void initPaint() {

        mIndicPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        mCoordPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        mHintTitlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        mCoordPaint.setColor(mCoordColor);

        mCoordPaint.setTextSize(40);

    }

    @Override

    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {

        this.mWidth = width;

        this.mHeight = height;

        if (isShowHintBlock) {

            mHeight = mHeight - mHintTitleHeight;

        }

        Log.d(TAG, "onSizeChanged");

    }

mHeight 代表的是点阵图的高度（不包含下方的提示部分）。假设要显示下方的提示部分，就要减去提示部分的高度。

以下就是最重点。最基本的onDraw方法喽

private void animatedDraw(Canvas canvas) {

        if (mItemList == null || mItemList.size() == 0)

            return;

        drawCoordText(canvas);

        drawPoint(canvas);

        if (isShowHintBlock) {

            drawHintTitle(canvas);

        }

    }

分三步走，

第一 drawCoordText画坐标线

第二 drawPoint画点

第三 drawHintTitle画下方提示部分

/**

     * 画坐标线

     * @param canvas

     */

    private void drawCoordText(Canvas canvas) {

        //获取坐标上下限的值

        float[] array = getMinAndMaxCoord();

        //坐标轴总数量

        float totalCount = (array[1] -array[0])/ mGap +1;

        for (float i = array[1], count = 0; i >= array[0]; i = i - mGap, count++) {

            String text = (int) i + "";

            Rect textRect = new Rect();

            mCoordPaint.getTextBounds(text, 0, text.length(), textRect);

            float y = mPadding*3 + mGapHeight*count;

            if (count == 0) {

                mMinAndMaxPointY[1] = y; //最高点的坐标

            } else if (count == totalCount - 1) {

                mMinAndMaxPointY[0] = y; //最低点的坐标

            }

            canvas.drawText(text, mPadding, y, mCoordPaint);

            //canvas.drawLine(mPadding,y,mWidth,y,mCoordPaint);

            //画虚线坐标线

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

            Path path = new Path();

            path.moveTo(mPadding * 2f + textRect.width(), y - textRect.height() / 2);

            if (mTextX >= -EP && mTextX <= EP) {

                mTextX = mPadding * 2f + textRect.width();

            }

            path.lineTo(mWidth - mPadding, y - textRect.height() / 2);

            mCoordPaint.setStyle(Paint.Style.STROKE);

            mCoordPaint.setPathEffect(effects);

            canvas.drawPath(path, mCoordPaint);

        }

    }

这里有两个辅助函数非常重要！

。！堪称画坐标线的核心！

！

前面提到过，我们的坐标轴是依据传入的数值动态计算的，而不是直接从0開始画的。

 private float[] getMaxAndMin(float[] array) {

        float min, max;

        min = max = array[0];

        float[] result = new float[2];

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

            System.out.print(array[i] + " ");

            if (Float.compare(array[i], max) > 0)   // 推断最大值

                max = array[i];

            if (Float.compare(array[i], min) < 0)   // 推断最小值

                min = array[i];

        }

        result[0] = min;

        result[1] = max;

        return result;

    }

上面这个函数用来获取一个数组中的最大最小值，不管数组是否排序，这个比較简单。

/**

     * 动态计算最小坐标值和最大坐标值x

     * ps:{4.9f,6f,7f,8f,9.1f}  坐标最小值为  = 0; 坐标最大值 = 10;

     *

     * @return

     */

    private float[] getMinAndMaxCoord() {

        float[] array = getMaxAndMin(values);

        float[] result = new float[2];

        float min = array[0];

        float max = array[1];

        result[0] = (Math.round((min - 0.5f)) / mGap * mGap); //坐标值最小值

        result[1] = ((int) (floor((max + mGap - 0.5f)) / mGap) * mGap); //坐标值最大值

        return result;

    }

上面这个函数用来计算坐标轴的最小值和最大值，

比方数组是{4.9f,6f,7f,8f,9.1f} 坐标最小值为 = 0; 坐标最大值 = 10;

数组是{5.1f,6f,7f,8f,10.1f} 坐标最小值为 = 5; 坐标最大值 = 15;

floor是我们重写了地板除法

 /**

     * 重写floor除法

     *

     * @param value

     * @return

     */

    private float floor(float value) {

        float result = 0f;

        float tail = value % 1;

        int integer = (int) (value - tail);

        if (Float.compare(tail, 0.5f) > 0) {

            return integer + 1;

        } else if (Float.compare(tail, 0.5f) <= 0) {

            return integer;

        }

        return result;

    }



第二步: 画点

 /**

     * 画小方块

     *

     * @param canvas

     */

    private void drawPoint(Canvas canvas) {

        float totalWidth = mWidth - 2 * mPadding - mTextX;  //全部方块所能占领的总面积

        int size = values.length;

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

            float value = values[i];

            int color = mItemList.get(i).color;

            mIndicPaint.setColor(color);

            mIndicPaint.setTextSize(40);

            String text = value + "";

            Rect textRect = new Rect();

            mIndicPaint.getTextBounds(text, 0, text.length(), textRect);

            if (mIndicatorType == IndicatorType.RECTANGLE) {

                float top = getPointYByValue(value);

                float left = mPadding + mTextX + totalWidth / size * i + (totalWidth / size - mInitWidth) / 2;

                float right = left + mInitWidth;

                float bottom = top + mInitWidth;

                RectF indicRect = new RectF(left, top, right, bottom);

                canvas.drawText(text, left, top - textRect.height(), mIndicPaint);

                canvas.drawRect(indicRect, mIndicPaint);

            }

        }

        if (mInitWidth <= mIndicWidth) {

            mInitWidth += mSpeed;

            invalidate();

        }

    }

mTextX是右側方块区域的起始坐标。用来与坐标数字分离，totalWidth是全部点所能占领的宽度，依据点的数量将totalWidth等分，然后居中显示在各自的区域里。

这里我们仅仅实现了点为方块的样式。点为圆圈的样式各位看官能够自己尝试去实现以下。

getPointYByValue函数比較重要。是依据点的值来计算坐标的。



 /**

     * 依据值来计算方块的y坐标

     *

     * @param value

     * @return

     */

    private float getPointYByValue(float value) {

        float[] array = getMinAndMaxCoord();

        float diffY = mMinAndMaxPointY[0] - mMinAndMaxPointY[1]; //坐标值之间的差值

        float diffValue = array[1] - array[0];

        float y = mMinAndMaxPointY[1] + diffY/diffValue* (array[1]-value)-mIndicWidth*3/2;

        return y;

    }

最后就是画底部的提示区域了

 public void getHintTitleList() {

        mTypeSet = new ArrayList<LineChartItem>(mItemList);

        for (int i = 0; i < mTypeSet.size() - 1; i++) {

            for (int j = mTypeSet.size() - 1; j > i; j--) {

                if (mTypeSet.get(j).title.equals(mTypeSet.get(i).title)) {

                    mTypeSet.remove(j);

                }

            }

        }

        Collections.sort(mTypeSet, new Comparator<LineChartItem>() {

            @Override

            public int compare(LineChartItem lhs, LineChartItem rhs) {

                return -(Float.compare(lhs.value, rhs.value));

            }

        });

    }

    private void drawHintTitle(Canvas canvas) {

        getHintTitleList();

        int totalWidth = mWidth - mPadding * 2;

        int width = totalWidth / mTypeSet.size();

        float startY = mMinAndMaxPointY[0] + mPadding * 3;

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

            //draw

            LineChartItem type = mTypeSet.get(i);

            String text = type.title;

            int color = type.color;

            mHintTitlePaint.setColor(color);

            mHintTitlePaint.setTextSize(40);

            Rect textRect = new Rect();

            mHintTitlePaint.getTextBounds(text, 0, text.length(), textRect);

            float x = (width - (mIndicWidth*2 + mPadding + textRect.width())) / 2 + i * width;

            RectF indicRect = new RectF(x + mPadding, startY, x + mIndicWidth*2 + mPadding, startY + mIndicWidth*2);

            canvas.drawRect(indicRect, mHintTitlePaint);

            mHintTitlePaint.setColor(mCoordColor);

            canvas.drawText(text, mPadding * 3 + x, startY + mIndicWidth*2, mHintTitlePaint);

        }

    }

getHintTitleList将我们传入的数组筛选出提示标题，并依照数值排序。

最最后~！

！。，因为我们的坐标可能有非常多。0-——无穷都有可能，所以我们自己定义View的高度不是固定的，须要动态计算出来。

public void setItemList(List<LineChartItem> list) {

        if(list.size()==0 || list == null)

            return;

        mItemList.clear();

        mItemList.addAll(list);

        int size = mItemList.size();

        values = new float[mItemList.size()];

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

            values[i] = mItemList.get(i).value;

        }

        computerHeight();

        invalidate();

    }

    private void computerHeight() {

        float[] array = getMinAndMaxCoord();

        //坐标轴总数量

        float totalCount = (array[1] -array[0])/ mGap  ;

        //上面折线图的最大Y坐标

        float y = mPadding*3 + mGapHeight*totalCount;

        //以下提示部分的起始Y坐标

        float startY = y + mPadding * 3;

        int height = (int) (startY+mIndicWidth*2+mPadding*2);

        ViewGroup.LayoutParams lp = getLayoutParams();

        lp.height = height;

        this.setLayoutParams(lp);

        Log.d(TAG,"HEIGHT:"+height);

    }

每次我们填充时间的时候，都会先调用computerHeight来动态计算视图高度

使用方式 SO EASY~!

 LineChartItem item1 = new LineChartItem(Color.parseColor("#00ff00"), 12.5f, "正常");

        LineChartItem item2 = new LineChartItem(Color.parseColor("#0000ff"), 10.1f, "偏低");

        LineChartItem item3 = new LineChartItem(Color.parseColor("#FF0000"), 20.2f, "偏高");

        LineChartItem item4 = new LineChartItem(Color.parseColor("#FF0000"), 15.1f, "偏高");

        List<LineChartItem> list = new ArrayList<LineChartItem>();

        list.add(item1);

        list.add(item2);

        list.add(item3);

        list.add(item4);

        mLineChart.setItemList(list);

你仅仅用将数据传递给LineChart 。剩下的工作就会自己主动完毕了，就是这么简单，全然没有网上那些开源控件用起来那么复杂吧~~

源代码我的github：https://github.com/devilthrone/JKChart

欢迎fork and starO(∩_∩)O

OVER!

巴特西

自己定义View之Chart图标系列（1）——点阵图

最新文章

热门文章