Android自訂View實現折線圖效果_Android

下面就是結果圖（每種狀態用一個表情圖片表示）：

一、首頁面的布局檔案如下：

<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的各種屬性。

二、在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方法的代碼如下：

@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能有所協助。