안 드 로 이 드 모 의 알 리 페 이에 참깨 신용 분 레이더 그림

1.우선 알 리 페 이에 있 는 참깨 신용 점수 의 효과 도 를 살 펴 봅 니 다.

사고
     1.레이더 그림 중심 점 좌 표를 확인한다.
     2.다각형 및 연결선 그리 기
     3.차원 값 에 따라 덮어 쓰기 영역 그리 기
     4.점수 그리 기
     5.각 차원 의 제목 텍스트 와 아이콘 그리 기
실현
레이아웃 의 중심 좌표 가 져 오기onSizeChanged(int w, int h, int oldw, int oldh)방법 에서 View 의 길이 와 너비 에 따라 레이더 그림 의 반지름(여기 서 구조 너비 의 최소 치 의 4 분 의 1 을 취하 여 사용자 정의 할 수 있 음)을 계산 하여 전체 구조의 중심 좌 표를 얻 을 수 있다.

public class CreditScoreView extends View {

 //    
 private int dataCount = 5;
 //      
 private float radian = (float) (Math.PI * 2 / dataCount);
 //     
 private float radius;
 //  X  
 private int centerX;
 //  Y  
 private int centerY;
 //     
 private String[] titles = {"    ", "    ", "    ", "    ", "    "};
 //     
 private int[] icons = {R.mipmap.ic_performance, R.mipmap.ic_history, R.mipmap.ic_contacts,
   R.mipmap.ic_predilection, R.mipmap.ic_identity};
 //     
 private float[] data = {170, 180, 160, 170, 180};
 //     
 private float maxValue = 190;
 //         
 private int radarMargin = DensityUtils.dp2px(getContext(), 15);
 //     
 private Paint mainPaint;
 //     
 private Paint valuePaint;
 //    
 private Paint scorePaint;
 //    
 private Paint titlePaint;
 //    
 private Paint iconPaint;
 //    
 private int scoreSize = DensityUtils.dp2px(getContext(), 28);
 //      
 private int titleSize = DensityUtils.dp2px(getContext(), 13);

 ...

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  //     
  radius = Math.min(h, w) / 2 * 0.5f;
  //    
  centerX = w / 2;
  centerY = h / 2;
  postInvalidate();
  super.onSizeChanged(w, h, oldw, oldh);
 }

 ...
}

다각형 과 연결선 그리 기
주로 아래getPoint방법 을 보 았 는데 이 방법 은 레이더 그림 의 각 점 좌 표를 얻 는 계산 논 리 를 봉인 했다.

/**
 *      
 *
 * @param canvas   
 */
private void drawPolygon(Canvas canvas) {
 Path path = new Path();
 for (int i = 0; i < dataCount; i++) {
  if (i == 0) {
   path.moveTo(getPoint(i).x, getPoint(i).y);
  } else {
   path.lineTo(getPoint(i).x, getPoint(i).y);
  }
 }

 //    
 path.close();
 canvas.drawPath(path, mainPaint);
}

/**
 *      
 *
 * @param canvas   
 */
private void drawLines(Canvas canvas) {
 Path path = new Path();
 for (int i = 0; i < dataCount; i++) {
  path.reset();
  path.moveTo(centerX, centerY);
  path.lineTo(getPoint(i).x, getPoint(i).y);
  canvas.drawPath(path, mainPaint);
 }
}

getPoint방법,파라미터radarMargin와percent이 단계 에서 기본 값 을 부여 합 니 다.

/**
 *             
 *
 * @param position     （    0，     ）
 * @return   
 */
private Point getPoint(int position) {
 return getPoint(position, 0, 1);
}

/**
 *             （            ）
 *
 * @param position     
 * @param radarMargin            
 * @param percent          
 * @return   
 */
private Point getPoint(int position, int radarMargin, float percent) {
 int x = 0;
 int y = 0;

 if (position == 0) {
  x = (int) (centerX + (radius + radarMargin) * Math.sin(radian) * percent);
  y = (int) (centerY - (radius + radarMargin) * Math.cos(radian) * percent);

 } else if (position == 1) {
  x = (int) (centerX + (radius + radarMargin) * Math.sin(radian / 2) * percent);
  y = (int) (centerY + (radius + radarMargin) * Math.cos(radian / 2) * percent);

 } else if (position == 2) {
  x = (int) (centerX - (radius + radarMargin) * Math.sin(radian / 2) * percent);
  y = (int) (centerY + (radius + radarMargin) * Math.cos(radian / 2) * percent);

 } else if (position == 3) {
  x = (int) (centerX - (radius + radarMargin) * Math.sin(radian) * percent);
  y = (int) (centerY - (radius + radarMargin) * Math.cos(radian) * percent);

 } else if (position == 4) {
  x = centerX;
  y = (int) (centerY - (radius + radarMargin) * percent);
 }

 return new Point(x, y);
}

다각형 과 연결선
덮어 쓰기 영역 그리 기

/**
 *       
 *
 * @param canvas   
 */
private void drawRegion(Canvas canvas) {
 Path path = new Path();

 for (int i = 0; i < dataCount; i++) {
  //     
  float percent = data[i] / maxValue;
  int x = getPoint(i, 0, percent).x;
  int y = getPoint(i, 0, percent).y;
  if (i == 0) {
   path.moveTo(x, y);
  } else {
   path.lineTo(x, y);
  }
 }

 //         
 path.close();
 valuePaint.setStyle(Paint.Style.STROKE);
 canvas.drawPath(path, valuePaint);

 //      
 valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);
 canvas.drawPath(path, valuePaint);
}

덮어 쓰기 영역
점수 그리 기

/**
 *     
 *
 * @param canvas   
 */
private void drawScore(Canvas canvas) {
 int score = 0;
 //    
 for (int i = 0; i < dataCount; i++) {
  score += data[i];
 }
 canvas.drawText(score + "", centerX, centerY + scoreSize / 2, scorePaint);
}

분수
제목 그리 기

/**
 *     
 *
 * @param canvas   
 */
private void drawTitle(Canvas canvas) {
 for (int i = 0; i < dataCount; i++) {
  int x = getPoint(i, radarMargin, 1).x;
  int y = getPoint(i, radarMargin, 1).y;

  Bitmap bitmap = BitmapFactory.decodeResource(getResources(), icons[i]);
  int iconHeight = bitmap.getHeight();
  float titleWidth = titlePaint.measureText(titles[i]);

  //                     （1、2）
  if (i == 1) {
   y += (iconHeight / 2);
  } else if (i == 2) {
   x -= titleWidth;
   y += (iconHeight / 2);
  } else if (i == 3) {
   x -= titleWidth;
  } else if (i == 4) {
   x -= titleWidth / 2;
  }
  canvas.drawText(titles[i], x, y, titlePaint);
 }
}

표제
아이콘 그리 기

/**
 *     
 *
 * @param canvas   
 */
private void drawIcon(Canvas canvas) {
 for (int i = 0; i < dataCount; i++) {
  int x = getPoint(i, radarMargin, 1).x;
  int y = getPoint(i, radarMargin, 1).y;

  Bitmap bitmap = BitmapFactory.decodeResource(getResources(), icons[i]);
  int iconWidth = bitmap.getWidth();
  int iconHeight = bitmap.getHeight();
  float titleWidth = titlePaint.measureText(titles[i]);

  //      x、y           
  //                
  if (i == 0) {
   x += (titleWidth - iconWidth) / 2;
   y -= (iconHeight + getTextHeight(titlePaint));
  } else if (i == 1) {
   x += (titleWidth - iconWidth) / 2;
   y -= (iconHeight / 2 + getTextHeight(titlePaint));
  } else if (i == 2) {
   x -= (iconWidth + (titleWidth - iconWidth) / 2);
   y -= (iconHeight / 2 + getTextHeight(titlePaint));
  } else if (i == 3) {
   x -= (iconWidth + (titleWidth - iconWidth) / 2);
   y -= (iconHeight + getTextHeight(titlePaint));
  } else if (i == 4) {
   x -= iconWidth / 2;
   y -= (iconHeight + getTextHeight(titlePaint));
  }

  canvas.drawBitmap(bitmap, x, y, titlePaint);
 }
}
/**
 *        
 *
 * @param paint        
 * @return     
 */
private int getTextHeight(Paint paint) {
 Paint.FontMetrics fontMetrics = paint.getFontMetrics();
 return (int) (fontMetrics.descent - fontMetrics.ascent);
}

아이콘
총결산
자,여기까지 주요 그리 기 작업 이 완료 되 었 습 니 다.어떤 아이콘 들 은 정말 찾 을 수 없 으 니 비슷 한 것 으로 대체 하 겠 습 니 다.이 글 의 내용 이 안 드 로 이 드 개발 자 여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 댓 글 을 남 겨 주 십시오.