Android自定义View实现折线图效果

下面就是结果图（每种状态用一个表情图片表示）：

一、主页面的布局文件如下：

<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"tools:context=".MainActivity"xmlns:app="http://schemas.android.com/apk/res/ting.example.linecharview"><ting.example.linecharview.LineCharViewandroid:id="@+id/test"android:layout_width="match_parent"android:layout_height="match_parent"app:xytextcolor="@color/bg"app:xytextsize="20sp"app:interval="80dp"/> </RelativeLayout>

其中linecharview就是自定义的View，而app:xx就是这个View的各种属性。
二、在values的attrs文件中加入如下xml，来定义linecharview的各种属性：

<?xml version="1.0" encoding="utf-8"?> <resources><declare-styleable name="LineChar"><attr name="xylinecolor" format="color"/><！-- xy坐标轴颜色 --><attr name="xylinewidth" format="dimension"/><！-- xy坐标轴宽度 --><attr name="xytextcolor" format="color"/><！-- xy坐标轴文字颜色 --><attr name="xytextsize" format="dimension"/><！-- xy坐标轴文字大小 --><attr name="linecolor" format="color"/><！-- 折线图中折线的颜色 --><attr name="interval" format="dimension"/><！-- x轴各个坐标点水平间距 --><attr name="bgcolor" format="color"/><！-- 背景颜色 --></declare-styleable> </resources>

三、接下来建个类LineCharView 继承View，并申明如下变量：

<span style="white-space:pre"> </span>private int xori;//圆点x坐标private int yori;//圆点y坐标private int xinit;//第一个点x坐标private int minXinit;//在移动时，第一个点允许最小的x坐标private int maxXinit;//在移动时，第一个点允许允许最大的x坐标private int xylinecolor;//xy坐标轴颜色private int xylinewidth;//xy坐标轴大小private int xytextcolor;//xy坐标轴文字颜色private int xytextsize;//xy坐标轴文字大小private int linecolor;//折线的颜色private int interval;//坐标间的间隔private int bgColor;//背景颜色private List<String> x_coords;//x坐标点的值private List<String> x_coord_values;//每个点状态值private int width;//控件宽度private int heigth;//控件高度private int imageWidth;//表情的宽度private float textwidth;//y轴文字的宽度float startX=0;//滑动时候，上一次手指的x坐标

在构造函数中读取各个属性值：

public LineCharView（Context context, AttributeSet attrs） {super（context, attrs）;TypedArray typedArray= context.obtainStyledAttributes（attrs, R.styleable.LineChar）;xylinecolor=typedArray.getColor（R.styleable.LineChar_xylinecolor, Color.GRAY）;xylinewidth=typedArray.getInt（R.styleable.LineChar_xylinewidth, 5）;xytextcolor=typedArray.getColor（R.styleable.LineChar_xytextcolor, Color.BLACK）;xytextsize=typedArray.getLayoutDimension（R.styleable.LineChar_xytextsize, 20）;linecolor=typedArray.getColor（R.styleable.LineChar_linecolor, Color.GRAY）;interval=typedArray.getLayoutDimension（R.styleable.LineChar_interval, 100）;bgColor=typedArray.getColor（R.styleable.LineChar_bgcolor, Color.WHITE）;typedArray.recycle（）;x_coords=new ArrayList<String>（）;x_coord_values=new ArrayList<String>（）; }

四、接下来可以重写onLayout方法，来计算控件宽高和坐标轴的原点坐标，坐标轴原点的x坐标可以通过y轴文字的宽度，y轴宽度，和距离y的水平距离进行计算，这里y轴文字只有4种状态（A、B、C、D），可以使用下面方法来计算出原点的x坐标：

Paint paint=new Paint（）; paint.setTextSize（xytextsize）; textwidth= paint.measureText（"A"）; xori=（int） （textwidth+6+2*xylinewidth）;//6 为与y轴的间隔

原点的y坐标也可以用类似的方法计算出来：

yori=heigth-xytextsize-2*xylinewidth-3; //3为x轴的间隔，heigth为控件高度。

当需要展示的数据量多时候，无法全部展示时候，需要通过滑动折线图进行展示，我们只需要控制第一点x坐标，就可以通过interval这个属性计算出后面每个点的坐标，但是为了防止将所有的数据滑动出界面外，需要在滑动时进行控制，其实就是控制第一个点x坐标的范围，第一个点的x坐标的最小值可以通过控件的宽度减去原点x坐标再减去所有折线图的水平距离，代码如下：

minXinit=width-xori-x_coords.size（）*interval;

控件在默认第一个展示时，第一个点与y轴的水平距离等于interval的一半，在滑动时候如果第一个点出现在这个位置了，就不允许再继续向右滑动，所以第一个点x坐标的最大值就等这个起始x坐标。

xinit=interval/2+xori; maxXinit=xinit;

重写onLayout方法的代码如下：

@Overrideprotected void onLayout（boolean changed, int left, int top, int right,int bottom） {if（changed）{width=getWidth（）;heigth=getHeight（）;Paint paint=new Paint（）;paint.setTextSize（xytextsize）;textwidth= paint.measureText（"A"）;xori=（int） （textwidth+6+2*xylinewidth）;//6 为与y轴的间隔yori=heigth-xytextsize-2*xylinewidth-3;//3为x轴的间隔xinit=interval/2+xori;imageWidth= BitmapFactory.decodeResource（getResources（）, R.drawable.facea）.getWidth（）;minXinit=width-xori-x_coords.size（）*interval;maxXinit=xinit;setBackgroundColor（bgColor）;}super.onLayout（changed, left, top, right, bottom）;}

五、接下来就可以画折线、x坐标轴上的小圆点和折线上表情
代码如下：

//画X轴坐标点，折线，表情@SuppressLint（"ResourceAsColor"）private void drawX （Canvas canvas） {Paint x_coordPaint =new Paint（）;x_coordPaint.setTextSize（xytextsize）;x_coordPaint.setStyle（Paint.Style.FILL）;Path path=new Path（）;//画坐标轴上小原点，坐标轴文字for（int i=0;i<x_coords.size（）;i++）{int x=i*interval+xinit;if（i==0）{path.moveTo（x, getYValue（x_coord_values.get（i）））;}else{path.lineTo（x, getYValue（x_coord_values.get（i）））;}x_coordPaint.setColor（xylinecolor）;canvas.drawCircle（x, yori, xylinewidth*2, x_coordPaint）;String text=x_coords.get（i）;x_coordPaint.setColor（xytextcolor）;canvas.drawText（text, x-x_coordPaint.measureText（text）/2, yori+xytextsize+xylinewidth*2, x_coordPaint）;} x_coordPaint.setStyle（Paint.Style.STROKE）;x_coordPaint.setStrokeWidth（xylinewidth）;x_coordPaint.setColor（linecolor）;//画折线canvas.drawPath（path, x_coordPaint）;//画表情for（int i=0;i<x_coords.size（）;i++）{int x=i*interval+xinit;canvas.drawBitmap（getYBitmap（x_coord_values.get（i））, x-imageWidth/2, getYValue（x_coord_values.get（i））-imageWidth/2, x_coordPaint）;}//将折线超出x轴坐标的部分截取掉x_coordPaint.setStyle（Paint.Style.FILL）;x_coordPaint.setColor（bgColor）;x_coordPaint.setXfermode（new PorterDuffXfermode（ PorterDuff.Mode.SRC_OVER））;RectF rectF=new RectF（0, 0, xori, heigth）;canvas.drawRect（rectF, x_coordPaint）; }

以上代码首先通过遍历x_coords和x_coord_values这两个List集合，来画坐标点，折线，表情，由于在向左滑动的时候有可能会将坐标点，折线绘制到y轴的左边，所以需要对其进行截取。其中getYValue和getYBitmap方法，可以通过x_coord_values的值计算y坐标和相应的表情。两方法如：

//得到y坐标private float getYValue（String value）{if（value.equalsIgnoreCase（"A"））{return yori-interval/2;}else if（value.equalsIgnoreCase（"B"））{return yori-interval;}else if（value.equalsIgnoreCase（"C"））{return （float） （yori-interval*1.5）;}else if（value.equalsIgnoreCase（"D"））{return yori-interval*2;}else{return yori;}}//得到表情图private Bitmap getYBitmap（String value）{Bitmap bitmap=null;if（value.equalsIgnoreCase（"A"））{bitmap=BitmapFactory.decodeResource（getResources（）, R.drawable.facea）;}else if（value.equalsIgnoreCase（"B"））{bitmap=BitmapFactory.decodeResource（getResources（）, R.drawable.faceb）;}else if（value.equalsIgnoreCase（"C"））{bitmap=BitmapFactory.decodeResource（getResources（）, R.drawable.facec）;}else if（value.equalsIgnoreCase（"D"））{bitmap=BitmapFactory.decodeResource（getResources（）, R.drawable.faced）;}return bitmap;}

六、画好了坐标点，折线，表情，接下来就简单，就可以画x y轴了，x y轴只要确定的原点坐标，就非常简单了，代码如下：

//画坐标轴 private void drawXY（Canvas canvas）{Paint paint=new Paint（）;paint.setColor（xylinecolor）;paint.setStrokeWidth（xylinewidth）;canvas.drawLine（xori, 0, xori, yori, paint）;canvas.drawLine（xori, yori, width, yori, paint）; }

七、最后就可以画y轴上的坐标小原点和y轴的文字了：

//画Y轴坐标点private void drawY（Canvas canvas）{Paint paint=new Paint（）;paint.setColor（xylinecolor）;paint.setStyle（Paint.Style.FILL）;for（int i=1;i<5 ;i++）{canvas.drawCircle（xori, yori-（i*interval/2）, xylinewidth*2, paint）;} paint.setTextSize（xytextsize）;paint.setColor（xytextcolor）;canvas.drawText（"D",xori-textwidth-6-xylinewidth , yori-（2*interval）+xytextsize/2, paint）;canvas.drawText（"C",xori-textwidth-6-xylinewidth , （float） （yori-（1.5*interval）+xytextsize/2）, paint）;canvas.drawText（"B",xori-textwidth-6-xylinewidth , yori-interval+xytextsize/2, paint）;canvas.drawText（"A",xori-textwidth-6-xylinewidth , （float） （yori-（0.5*interval）+xytextsize/2）, paint）;}

八、写完了以上三个方法：只需要重写onDraw方法，就可以进行绘制了。

@Overrideprotected void onDraw（Canvas canvas） {drawX（canvas）;drawXY（canvas）;drawY（canvas）;}

九、为了可以进行水平滑动，需要重写控件的onTouchEvent方法，在滑动时候，实时计算手指滑动的距离来改变第一个点的x坐标，然后调用invalidate（）;就可以刷新控件，重新绘制达到滑动效果。

@Overridepublic boolean onTouchEvent（MotionEvent event） { //如果不用滑动就可以展示所有数据，就不让滑动if（interval*x_coord_values.size（）<=width-xori）{return false;} switch （event.getAction（）） {case MotionEvent.ACTION_DOWN:startX=event.getX（）;break; case MotionEvent.ACTION_MOVE:float dis=event.getX（）-startX;startX=event.getX（）;if（xinit+dis>maxXinit）{xinit=maxXinit;}else if（xinit+dis<minXinit）{xinit=minXinit;}else{xinit=（int） （xinit+dis）;}invalidate（）; break;}return true;}

十、最后添加一个设置数据源的方法，设置x_coords，x_coord_values这个两个List集合，在设置完成之后调用invalidate（） ，进行控件刷新：

/*** 设置坐标折线图值* @param x_coords 横坐标坐标点* @param x_coord_values 每个点的值*/ public void setValue（ List<String> x_coords ,List<String> x_coord_values） {if（x_coord_values.size（）！=x_coords.size（））{throw new IllegalArgumentException（"坐标轴点和坐标轴点的值的个数必须一样！"）;}this.x_coord_values=x_coord_values;this.x_coords=x_coords;invalidate（）; }

总结
以上就是Android自定义View实现折线图效果的全部内容，希望对大家开发Android能有所帮助。