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 自定义仪表盘：时尚自定义仪表盘

巴特西

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

最新文章

热门文章