Android 自定义View -- 简约的折线图

转载请注明出处:http://write.blog.csdn.net/postedit/50434634

接上篇 Android 圆形百分比（进度条） 自定义view

昨天分手了，不开心，来练练自定义view麻痹自己，毕竟菜鸟只能靠不断练习提高。#程序员不应该有女朋友#

我们要实现的是一种只有来看趋势，不需要看具体数值，比较简约的折线图。比如下图这样的：

这个时候，一些比较优秀的第三方图表库如：MPChart 就显得比较臃肿了。所以我们需要自定义一个折线图。

老规矩，先来看最终的实现效果：

其实这种做的很简约，大概分三个步骤：

一、画坐标轴

二、画点

三、画线

那么我们开始吧Let's go (Let it go)。

设计一下大概需要的东西。首先把X轴和Y轴的数据存放在两个String[]里。

具体的点的位置用一个Map<Integer,Integer>来存放.

步骤：

一、新建一个类，取名为SimpleLineChart继承View 重写他的构造方法。这里为了简便，就不添加自定义属性了attr.xml。

<span style="font-size:18px;">   </span><span style="font-size:12px;"> public SimpleLineChart(Context context) {
        this(context, null);
    }

    public SimpleLineChart(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SimpleLineChart(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }</span>

二、测量大小。（继续偷懒，只支持EXACTLY，AT_MOST直接丢异常）

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        if (widthMode == MeasureSpec.EXACTLY) {
            mWidth = widthSize;
        }else if(widthMode == MeasureSpec.AT_MOST){
            throw new IllegalArgumentException("width must be EXACTLY,you should set like android:width="200dp"");
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            mHeight = heightSize;
        }else if(widthMeasureSpec == MeasureSpec.AT_MOST){

            throw new IllegalArgumentException("height must be EXACTLY,you should set like android:height="200dp"");
        }

        setMeasuredDimension(mWidth, mHeight);
    }

三、重点来了，开始draw。首先处理几种异常情况。当X轴或者Y轴为没有文字（也就是没有刻度的时候），抛出异常。

if(mXAxis.length==0||mYAxis.length==0){
            throw new IllegalArgumentException("X or Y items is null");
        }

当没有任何点的数据的时候，显示字符串提醒用户没有数据（实际上是往中心drawText）。 

 //画坐标线的轴
        Paint axisPaint = new Paint();
        axisPaint.setTextSize(mYAxisFontSize);
        axisPaint.setColor(Color.parseColor("#3F51B5"));

if (mPointMap == null || mPointMap.size() == 0) {
            int textLength = (int) axisPaint.measureText(mNoDataMsg);
            canvas.drawText(mNoDataMsg, mWidth/2 - textLength/2, mHeight/2, axisPaint);
        } 

异常情况处理完了，开始上面三个步骤挨个画，首先来画个Y轴，计算每个刻度的间隔。他的值应该是mWidth / Y轴文字个数，然后用循环把每个刻度都画出来。再申请一个数组yPoints，存放每个Y刻度的具体坐标。

  //画 Y 轴


            //存放每个Y轴的坐标
            int[] yPoints = new int[mYAxis.length];


            //计算Y轴 每个刻度的间距
            int yInterval = (int) ((mHeight - mYAxisFontSize - 2) / (mYAxis.length));

            //测量Y轴文字的高度 用来画第一个数
            Paint.FontMetrics fm = axisPaint.getFontMetrics();
            int yItemHeight = (int) Math.ceil(fm.descent - fm.ascent);

            Log.e("wing", mHeight + "");
            for (int i = 0; i < mYAxis.length; i++) {
                canvas.drawText(mYAxis[i], 0, mYAxisFontSize + i * yInterval, axisPaint);
                yPoints[i] = (int) (mYAxisFontSize + i * yInterval);


            }

我们运行一下，看到了如下效果：

需要注意的是，这里的坐标需要微调，大家多试一下。同理开始画X轴：

      //画 X 轴

            //x轴的刻度集合
            int[] xPoints = new int[mXAxis.length];

            Log.e("wing", xPoints.length + "");
            //计算Y轴开始的原点坐标
            int xItemX = (int) axisPaint.measureText(mYAxis[1]);

            //X轴偏移量
            int xOffset = 50;
            //计算x轴 刻度间距
            int xInterval = (int) ((mWidth - xOffset) / (mXAxis.length));
            //获取X轴刻度Y坐标
            int xItemY = (int) (mYAxisFontSize + mYAxis.length * yInterval);

            for (int i = 0; i < mXAxis.length; i++) {
                canvas.drawText(mXAxis[i], i * xInterval + xItemX + xOffset, xItemY, axisPaint);
                xPoints[i] = (int) (i * xInterval + xItemX + axisPaint.measureText(mXAxis[i]) / 2 + xOffset + 10);
//            Log.e("wing", xPoints[i] + "");
            }

注意这里X轴的y坐标就是画Y轴时候的最下面的文字（最后一个）的坐标，存成了xItemY。

之后我们来画点，这里我采用的方法是画圆。直接drawCircle。从map中取出所有点的对应i,j然后再从两个数组 xPoints[] yPoints[]取出真实的X,Y坐标，最后画出来

        //画点
            Paint pointPaint = new Paint();

            pointPaint.setColor(mLineColor);

            Paint linePaint = new Paint();

            linePaint.setColor(mLineColor);
            linePaint.setAntiAlias(true);
            //设置线条宽度
            linePaint.setStrokeWidth(mStrokeWidth);
            pointPaint.setStyle(Paint.Style.FILL);


            for (int i = 0; i < mXAxis.length; i++) {
                if (mPointMap.get(i) == null) {
                    throw new IllegalArgumentException("PointMap has incomplete data!");
                }

                //画点
                canvas.drawCircle(xPoints[i], yPoints[mPointMap.get(i)], mPointRadius, pointPaint);
                if (i > 0) {//画线
                    canvas.drawLine(xPoints[i - 1], yPoints[mPointMap.get(i - 1)], xPoints[i], yPoints[mPointMap.get(i)], linePaint);
                }
            }

上面画完点之后开始画线drawLine，参数是前一个点的坐标，和后一个点的坐标。挨个画出来。

   这时候我们的最复杂的绘制就完成了。接下来来加入一点功能：参数的设置。

 /**
     * 设置map数据
     * @param data
     */
    public void setData(HashMap<Integer,Integer> data){
        mPointMap = data;
        invalidate();
    }

    /**
     * 设置Y轴文字
     * @param yItem
     */
    public void setYItem(String[] yItem){
        mYAxis = yItem;
    }

    /**
     * 设置X轴文字
     * @param xItem
     */
    public void setXItem(String[] xItem){
        mXAxis = xItem;
    }

    public void setLineColor(int color){
        mLineColor = color;
        invalidate();
    }

以上代码很简单 我就不多说了。整个View完工，接下来介绍如何使用。

使用：

和普通的View一样，我们直接在XML布局文件中加入SimpleLineChart，注意不要忘记包名。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.wingsofts.simplelinechart.MainActivity">

<com.wingsofts.simplelinechart.SimpleLineChart
    android:id="@+id/simpleLineChart"
    android:layout_width="400dp"
    android:layout_height="200dp" />
</RelativeLayout>

然后在Activity中findviewbyid，给他设置X轴的文字 Y轴的文字 还有数据源

public class MainActivity extends AppCompatActivity {
    private SimpleLineChart mSimpleLineChart;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSimpleLineChart = (SimpleLineChart) findViewById(R.id.simpleLineChart);
        String[] xItem = {"1","2","3","4","5","6","7"};
        String[] yItem = {"10k","20k","30k","40k","50k"};
        if(mSimpleLineChart == null)
            Log.e("wing","null!!!!");
        mSimpleLineChart.setXItem(xItem);
        mSimpleLineChart.setYItem(yItem);
        HashMap<Integer,Integer> pointMap = new HashMap();
        for(int i = 0;i<xItem.length;i++){
            pointMap.put(i, (int) (Math.random()*5));
        }
        mSimpleLineChart.setData(pointMap);
    }
}

简单的几步，就可以得到预览图的效果了!是不是很好玩！觉得好的话评论一下，star一下。祭奠我死去的爱情。

项目下载地址（求关注 求星星 ）：点击打开链接

下一篇来一个比较炫 比较复杂的view 自定义仪表盘 ：时尚自定义仪表盘