========转自http://blog.csdn.net/yifei1989/article/details/29891211==========
最近要完成一个折线图控件,用来显示一系列的状态,并可以进行滑动。虽然现在有很多大牛写好的控件可以直接使用,但我感觉那些控件是给高手的使用的,对于我这样的菜鸟,还是脚踏实地,自己慢慢码代码,才可以提高。下面就是结果图(每种状态用一个表情图片表示):
1 主页面的布局文件如下:
- <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.LineCharView
- android: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的各种属性。
2 在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>
3 接下来建个类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>();
- }
4 接下来可以重写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方法的代码如下:
- @Override
- protected 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);
- }
5 接下来就可以画折线、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;
- }
6 画好了坐标点,折线,表情,接下来就简单,就可以画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);
- }
7 最后就可以画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);
- }
8 写完了以上三个方法:只需要重写onDraw方法,就可以进行绘制了。
- @Override
- protected void onDraw(Canvas canvas) {
- drawX(canvas);
- drawXY(canvas);
- drawY(canvas);
- }
9 为了可以进行水平滑动,需要重写控件的onTouchEvent方法,在滑动时候,实时计算手指滑动的距离来改变第一个点的x坐标,然后调用invalidate();就可以刷新控件,重新绘制达到滑动效果。
- @Override
- public 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;
- }
10 最后添加一个设置数据源的方法,设置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();
- }