Android自定义View实现折线图效果_安卓软件开发教程-查字典教程网

摘要：下面就是结果图（每种状态用一个表情图片表示）：一、主页面的布局文件如下：其中linecharview就是自定义的View，而app:xx就是...

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

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

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

其中linecharview就是自定义的View，而app:xx就是这个View的各种属性。

二、在values的attrs文件中加入如下xml，来定义linecharview的各种属性：

<"1.0" encoding="utf-8"?> <resources> <declare-styleable name="LineChar"> <attr name="xylinecolor" format="color"/><> <attr name="xylinewidth" format="dimension"/><> <attr name="xytextcolor" format="color"/><> <attr name="xytextsize" format="dimension"/><> <attr name="linecolor" format="color"/><> <attr name="interval" format="dimension"/><> <attr name="bgcolor" format="color"/><> </declare-styleable> </resources>

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

<span> </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方法的代码如下：

@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); }

五、接下来就可以画折线、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方法，就可以进行绘制了。

@Override protected void onDraw(Canvas canvas) { drawX(canvas); drawXY(canvas); drawY(canvas); }

九、为了可以进行水平滑动，需要重写控件的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; }

十、最后添加一个设置数据源的方法，设置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能有所帮助。