Android 는 Canvas 를 사용 하여 원형 진행 막대 효 과 를 그립 니 다.

머리말
Android 사용자 정의 컨트롤 은 Canvas 로 2D 그래 픽 을 자주 그립 니 다.사용자 정의 컨트롤 기능 을 최적화 하기 전에 Canvas 그래 픽 체 제 를 능숙 하 게 파악 해 야 합 니 다.본 고 는 다음 과 같은 세 가지 측면 에서 Canvas 그래 픽 메커니즘 에 대해 설명 한다.
캔버스
붓 페인트
예제 원형 진도 바
캔버스
먼저,Android 홈 페이지 에서 Canvas 류 에 대한 정 의 를 살 펴 보 겠 습 니 다.
The Canvas class holds the “draw” calls。To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls(writing into the bitmap), a drawing primitive(eg, Rect, Path, text, Bitmap), and a paint(to describe the colors and styles for the drawing).
쉽게 말 하면 안 드 로 이 드 가 2D 그림 을 그 리 려 면 Canvas 류 의 지원 이 있어 야 합 니 다.이것 은'android.graphics.Canvas'가방 에 있 습 니 다.우 리 는 Canvas 를 그림 을 그 리 는 데 사용 할 메모리(ps:진정한 메모 리 는 그 안에 포 함 된 Bitmap)로 이해 할 수 있 습 니 다.
Canvas 는 두 개의 구조 함 수 를 제공 합 니 다.
Canvas():빈 Canvas 대상 을 만 듭 니 다.
Canvas(Bitmap bitmap):bitmap 비트 맵 을 배경 으로 하 는 Canvas 를 만 듭 니 다.
일반적으로 저 희 는 Bitmap 인 자 를 포함 하 는 두 번 째 구조 함수 방식 을 사용 하거나 onDraw 방법 에서 시스템 이 제공 하 는 Canvas 를 직접 사용 합 니 다.
Canvas 가 주로 그림 을 그 리 는 데 사용 되 는 만큼 해당 하 는 draw 방법 을 많이 제공 하여 Canvas 대상 에 그림 을 그 리 는 데 편리 하고 자주 사용 하 는 draw 방법 을 소개 합 니 다.
void drawRect(RectF rect,Paint paint):영역 을 그립 니 다.매개 변 수 는 RectF 의 영역 입 니 다.
void drawOval(RectF oval,Paint paint):사각형 의 내 접 타원 을 그립 니 다.
void drawCircle(float cx,float cy,float radius,Paint paint):원형 을 그립 니 다.cx 와 cy 는 원심 좌표 이 고 radius 는 반지름 길이 입 니 다.
void draw Arc(RectF oval,float startAngle,float sweepAngle.boolean useCenter,Paint paint):원호 형 을 그 리 는 것 도 사각형 의 내 접 타원 을 기준 으로 한다.그 중에서 startAngle 은 시작 각도 이 고 sweepAngle 은 라디안 크기 이 며 useCenter 는 true 이 며 부채 줄 을 그립 니 다.false 이 고 원호 일 뿐 입 니 다.ps:startAngle 이 0 일 때 원형 시계 3 시 방향 입 니 다.
void drawPath(Path path,Paint paint):주어진 path 에 따라 연결선 을 그립 니 다.
void drawBitmap(Bitmap bitmap,Rect src,Rect dst,Paint paint):스티커,매개 변수 bitmap 는 그 릴 bitmap 대상 이 고 매개 변수 src 는 bitmap 의 소스 구역(보통 null)을 말 합 니 다.dst 는 bitmap 의 목표 구역 이 고 paint 는 붓 으로 null 이 될 수 있 습 니 다.
void drawLine(float startX,float startY,float stopX,float stopY,Paint paint):주어진 출발점 과 끝 점 사이 에 연결선 을 그립 니 다.
void drawPoint(float x,float y,Paint paint):주어진 좌표 에 따라 점 을 그립 니 다.
void drawText(String text,float x,float y,Paint paint):주어진 좌표 에 따라 텍스트 를 그립 니 다.그 중에서 x 는 텍스트 가 시 작 된 x 축 좌표 이 고 y 는 텍스트 가 세로 로 끝 난 y 축 좌표 이다.
붓 페인트
위 에 열거 한 Canvas.draw XXX()방법 을 보면 Paint 라 는 매개 변수 가 있 는데 이 를'화필'로 이해 할 수 있 습 니 다.이 화필 을 통 해 Canvas 라 는 화포 에 그림 을 그 릴 수 있 습 니 다.이것 은'android.graphics.Paint'가방 아래 에 있 으 며,주로 그림 스타일 을 설정 하 는데 사용 되 며,펜 색상 을 포함 합 니 다.
Paint 에 서 는 회화 스타일 을 대량으로 설정 하 는 방법 을 제공 합 니 다.여 기 는 자주 사용 하 는 기능 만 보 여 줍 니 다.
setARGB(int a,int r,int g,int b):ARGB 색상 을 설정 합 니 다.
setColor(int color):색상 설정.
setAlpha(int a):투명 도 를 설정 합 니 다.
setAntiAlias(boolean aa):톱날 저항 여 부 를 설정 합 니 다.
setShader(Shader shader):Paint 의 충전 효 과 를 설정 합 니 다.
setStrokeWidth(float width):Paint 의 터치 폭 을 설정 합 니 다.
setStyle(Paint.Style style):Paint 의 충전 스타일 을 설정 합 니 다.
setTextSize(float textSize):텍스트 를 그 릴 때의 텍스트 크기 를 설정 합 니 다.
사용자 정의 원형 진행 막대
사용자 정의 원형 진도 바 를 예 로 들 어 효과 도 를 먼저 살 펴 보 겠 습 니 다.

효과 도 를 통 해 우 리 는 먼저 사용자 정의 속성 을 추상 화 합 니 다.다음 과 같 습 니 다.
링 내부 충전 색.
라운드 진도 바 의 배경 색.
라운드 진도 바 색상.
원 환 반경.
링 진도 바 의 너비.
진도 조 시작 각도.
중간 글자 의 색.
중간 글자 의 크기.
중간 텍스트 에 표시 할 플래그 위 치 를 표시 할 지 여부 입 니 다.
Android 에 서 는 프로젝트 의 res/values/디 렉 터 리 에 resources 원본 파일 을 만 들 고 declare-styleable 을 통 해 특정한 속성 집합 을 설명 할 수 있 습 니 다.
예시 속성 집합 은 다음 과 같다(res/values/attrsround_progress_bar.xml）：

<resources>
  <declare-styleable name="RoundProgressBar">
    <attr name="startAngle" format="integer"></attr>
    <attr name="radius" format="dimension"></attr>
    <attr name="ringWidth" format="dimension"></attr>
    <attr name="centerColor" format="color"></attr>
    <attr name="ringColor" format="color"></attr>
    <attr name="progressColor" format="color"></attr>
    <attr name="textSize" format="dimension"></attr>
    <attr name="textColor" format="color"></attr>
    <attr name="isTextDisplay" format="boolean"></attr>
  </declare-styleable>
</resources>

사용자 정의 속성 은 사용자 정의 View 의 구조 함수 에서 TypedArray 배열 을 통 해 얻 을 수 있 습 니 다.저 희 는 원형 View 를 정의 하여 위의 그림 의 효 과 를 실현 합 니 다(RoundProgressbar.자바).

package love.com.progressbar.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import love.com.progressbar.R;


public class RoundProgressBar extends View {
  private static final int START_ANGLE = -90;
  private static final String CENTER_COLOR = "#eeff06";
  private static final String RING_COLOR = "#FF7281E1";
  private static final String PROGRESS_COLOR = "#FFDA0F0F";
  private static final String TEXT_COLOR = "#FF000000";
  private static final int TEXT_SIZE = 30;
  private static final int CIRCLE_RADIUS = 20;
  private static final int RING_WIDTH = 5;

  /**
   *        ，  canvas.drawArc  
   */
  private int startAngle;

  /**
   *      
   */
  private int radius;

  /**
   *       
   */
  private int ringWidth;

  /**
   *     
   */
  private int mProgress = 0;

  /**
   *        
   */
  private int centerColor;

  /**
   *       
   */
  private int ringColor;

  /**
   *       
   */
  private int progressColor;

  /**
   *     
   */
  private int textSize;

  /**
   *     
   */
  private int textColor;

  /**
   *         
   */
  private boolean isTextDisplay;

  private String textContent;

  private Paint mPaint;

  public RoundProgressBar(Context context) {
    this(context, null);
  }

  public RoundProgressBar(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    //        
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressBar);
    for (int i = 0; i < a.length(); i ++) {
      int attr = a.getIndex(i);
      switch (attr) {
        case R.styleable.RoundProgressBar_startAngle:
          startAngle = a.getInteger(attr, START_ANGLE);
          break;
        case R.styleable.RoundProgressBar_centerColor:
          centerColor = a.getColor(attr, Color.parseColor(CENTER_COLOR));
          break;
        case R.styleable.RoundProgressBar_progressColor:
          progressColor = a.getColor(attr, Color.parseColor(PROGRESS_COLOR));
          break;
        case R.styleable.RoundProgressBar_ringColor:
          ringColor = a.getColor(attr, Color.parseColor(RING_COLOR));
          break;
        case R.styleable.RoundProgressBar_textColor:
          textColor = a.getColor(attr, Color.parseColor(TEXT_COLOR));
          break;
        case R.styleable.RoundProgressBar_textSize:
          textSize = (int) a.getDimension(attr, TypedValue.applyDimension(
              TypedValue.COMPLEX_UNIT_SP, TEXT_SIZE,
              getResources().getDisplayMetrics()));
          break;
        case R.styleable.RoundProgressBar_isTextDisplay:
          isTextDisplay = a.getBoolean(attr, true);
          break;
        case R.styleable.RoundProgressBar_radius:
          radius = (int) a.getDimension(attr, TypedValue.applyDimension(
              TypedValue.COMPLEX_UNIT_DIP, CIRCLE_RADIUS,
              getResources().getDisplayMetrics()
          ));
          break;
        case R.styleable.RoundProgressBar_ringWidth:
           ringWidth = (int) a.getDimension(attr, TypedValue.applyDimension(
              TypedValue.COMPLEX_UNIT_DIP, RING_WIDTH,
              getResources().getDisplayMetrics()
          ));
          break;
        default:
          break;
      }
    }
    a.recycle();

    //        
    setPaint();
  }

  private void setPaint() {
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    //       
    int cx = getWidth() / 2;
    int cy = cx;

    /**
     *      
     */
    if (centerColor != 0) {
      drawCenterCircle(canvas, cx, cy);
    }

    /**
     *      
     */
    drawOuterCircle(canvas, cx, cy);

    /**
     *      
     */
    drawProgress(canvas, cx, cy);

    /**
     *        
     */
    drawProgressText(canvas, cx, cy);
  }

  private void drawProgressText(Canvas canvas, int cx, int cy) {
    if (!isTextDisplay) {
      return;
    }
    mPaint.setColor(textColor);
    mPaint.setTextSize(textSize);
    mPaint.setTypeface(Typeface.DEFAULT_BOLD);
    mPaint.setStrokeWidth(0);
    textContent = getProgress() + "%";
    float textWidth = mPaint.measureText(textContent);
    canvas.drawText(textContent, cx - textWidth / 2, cy + textSize / 2, mPaint);
  }

  private void drawProgress(Canvas canvas, int cx, int cy) {
    mPaint.setColor(progressColor);
    mPaint.setStrokeWidth(ringWidth);
    mPaint.setStyle(Paint.Style.STROKE);
    RectF mRectF = new RectF(cx - radius, cy - radius, cx + radius, cy + radius);
    float sweepAngle = (float) (mProgress * 360.0 / 100);
    canvas.drawArc(mRectF, startAngle, sweepAngle, false, mPaint);
  }

  private void drawOuterCircle(Canvas canvas, int cx, int cy) {
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setColor(ringColor);
    mPaint.setStrokeWidth(ringWidth);
    canvas.drawCircle(cx, cy, radius, mPaint);
  }

  private void drawCenterCircle(Canvas canvas, int cx, int cy) {
    mPaint.setColor(centerColor);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(cx, cy, radius, mPaint);
  }


  public synchronized int getProgress() {
    return mProgress;
  }

  public synchronized void setProgress(int progress) {
    if (progress < 0) {
      progress = 0;
    } else if (progress > 100) {
      progress = 100;
    }
    mProgress = progress;
    //      ，    invalidate      
    postInvalidate();
  }
}

MainActivity.java 의 레이아웃 파일 에서 원형 진행 바 를 이렇게 호출 할 수 있 습 니 다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:round="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <love.com.progressbar.view.RoundProgressBar
    android:id="@+id/id_round_progressbar"
    android:layout_width="400dp"
    android:layout_height="400dp"
    round:radius="100dp"
    round:ringWidth="20dp"
    round:startAngle="-90"
    round:centerColor="#eeff06"
    round:ringColor="#e16556e6"
    round:progressColor="#d20c0c"
    round:textColor="#000000"
    round:textSize="20sp"
    round:isTextDisplay="true"/>
</RelativeLayout>

그 중에서 xmlns:round="http://schemas.android.com/apk/res-autoAndroid Studio 에 추 가 된 사용자 정의 View 속성 을 가 져 오 는 네 임 스페이스 쓰기 입 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.