안 드 로 이 드 샤 오미 보안 센터 진도 표시 줄 효과 검사

샤 오미 안전 센터 검사 효과 모방
잔말 말고 우리 먼저 효과 도 를 올 리자.
github 주소:https://github.com/niniloveyou/GradeProgressView

이 효과 의 사용 장면 은 많 지 않다.주로 각종 검 측 을 할 때,예 를 들 어 쓰레기 청소,핸드폰 안전 검 측 등 이다.물론 이 효과 가 추 하 다 는 것 을 싫어 하지 않 으 면 진도 조 로 도 사용 할 수 있다.하하.
다음은 건어물 분석 을 통 해 이 효과 가 어떻게 실현 되 는 지 말씀 드 리 겠 습 니 다.
이 효 과 를 얻 으 려 면 먼저 어떤 기술적 난점 이 있 는 지 생각해 보 자.
1.진도 표
2.가운데 바늘 은 어떻게
1.진도 표
진도 가 쉽 지 않다 는 사람 이 있 습 니까?이렇게 쓰 세 요.

mPaint.setPathEffect(new DashPathEffect(new float[]{dashWith, dashSpace}, 。。。));


canvas.drawArc(mRectF, 135, 270, false, mPaint);
mPaint.setColor(Color.WHITE);
canvas.drawArc(mRectF, 135, degree, false, mPaint);

PathEffect 설정
그리고 원 호 를 그 려 서 붓 에 색 을 설정 한 다음 에 진도 에 따라 각 도 를 계산 한 다음 에 원 호 를 그 려 서 첫 번 째 원호 부분 을 덮 으 면 되 잖 아 요.이렇게 많아
하지만 내 가 말 하고 싶 은 too young too simple.그때 나 도 그렇게 생각 했 으 니 이 루 자!만 들 었 으 면 50%(즉 두 번 째 원호 가 첫 번 째 원호 의 반 을 덮 는 것)를 그 려 보 세 요.괜 찮 네요.perfect 는 그런 것 같 아 요.30%를 더 그 려 보 세 요.니 마 가 틀 렸 어 요.왜 작은 칸 이 겹 치지 않 았 어 요?좀 틀 렸 어 요.MDZZ
나중에 간단 한 방법 을 생각해 냈 는데 덮 지 않 고 두 개의 원 호 를 그 렸 지만 이 두 개의 원 호 는 연결 되 었 다.예 를 들 어 첫 번 째 원 호 는 반 을 그리고 두 번 째 는 반 을 그린다.

//draw background arc
canvas.drawArc(mRectF, 135 + degree, 270 - degree, false, mPaint);

//draw progress arc
canvas.drawArc(mRectF, 135, degree, false, mProgressPaint);

2.가운데 바늘 은 어떻게
먼저 포인터 의 경 로 를 그립 니 다.

mPointerPath = new Path();
mPointerPath.moveTo(centerX + pointRadius, centerY - 7);
mPointerPath.lineTo(centerX + pointRadius, centerY + 7);
mPointerPath.lineTo(mRectF.right - pointGap - lineWidth / 2,centerY);
mPointerPath.lineTo(centerX + pointRadius, centerY - 7);
mPointerPath.close();

중심 에 작은 원 을 그립 니 다.
그리고 draw 포인터,이렇게 캔버스 가 회전 할 때 포인터 도 자 연 스 럽 게 회전 합 니 다.canvas.save(),canvas.restore()의 역할 을 보 러 가 야 할 지 모 르 겠 습 니 다.

 //draw pointer
canvas.drawCircle(centerX, centerY, pointRadius,mInnerCirclePaint);
canvas.save();
canvas.rotate(135 + degree, centerX, centerY);
canvas.drawPath(mPointerPath, mPointerPaint);
canvas.restore();

아래 위의 전체 코드:

package deadline.grade;

import android.animation.ValueAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.os.Build;
import android.support.annotation.IntRange;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;

/**
 * @author deadline
 * @time 2016/9/24
 */
public class GradeProgressView extends View {


 private static final String TAG = GradeProgressView.class.getSimpleName();

 private static final int DEFAULT_PROGRESS_COLOR = Color.WHITE;
 private static final int DEFAULT_BACKGROUND_COLOR = 0x5AFFFFFF;

 private int mBackgroundColor = DEFAULT_BACKGROUND_COLOR;
 private int mProgressColor = DEFAULT_PROGRESS_COLOR;

 //        ，  ，  
 private int dashWith = 4;
 private int dashSpace = 6;
 private int lineWidth = 60;

 //                 
 private int outLineWidth = 5;
 private int gapWidth = 25;

 //      ，   ，            
 private int pointLineWidth = 10;
 private int pointRadius = 25;
 private int pointGap = 20;

 private int mProgress = 0;

 //  
 private RectF mOuterRectF;
 private Paint mOuterPaint;

 //   
 private RectF mRectF;
 private Paint mPaint;
 private Paint mProgressPaint;

 //  
 private Paint mInnerCirclePaint;
 private Paint mPointerPaint;
 private Path mPointerPath;

 private float centerX;
 private float centerY;

 private ValueAnimator animator;

 private OnProgressChangeListener mListener;

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

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

 public GradeProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 setup();
 }

 @TargetApi(Build.VERSION_CODES.LOLLIPOP)
 public GradeProgressView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
 super(context, attrs, defStyleAttr, defStyleRes);
 }


 private void setup() {

 mRectF = new RectF();
 mOuterRectF = new RectF();

 mOuterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mOuterPaint.setStrokeWidth(outLineWidth);
 mOuterPaint.setColor(mBackgroundColor);
 mOuterPaint.setStyle(Paint.Style.STROKE);

 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mPaint.setStrokeWidth(lineWidth);
 mPaint.setColor(mBackgroundColor);
 mPaint.setStyle(Paint.Style.STROKE);
 mPaint.setPathEffect(new DashPathEffect(new float[]{dashWith, dashSpace}, dashSpace));

 mProgressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mProgressPaint.setStrokeWidth(lineWidth);
 mProgressPaint.setColor(mProgressColor);
 mProgressPaint.setStyle(Paint.Style.STROKE);
 mProgressPaint.setPathEffect(new DashPathEffect(new float[]{dashWith, dashSpace}, dashSpace));

 mPointerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mPointerPaint.setStrokeWidth(pointLineWidth / 2);
 mPointerPaint.setColor(mProgressColor);
 mPointerPaint.setStyle(Paint.Style.FILL_AND_STROKE);
 mPointerPaint.setStrokeCap(Paint.Cap.ROUND);
 mPointerPaint.setShadowLayer(4, 3, 0, 0x20000000);

 mInnerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mInnerCirclePaint.setStrokeWidth(pointLineWidth);
 mInnerCirclePaint.setColor(mProgressColor);
 mInnerCirclePaint.setStyle(Paint.Style.STROKE);
 mInnerCirclePaint.setShadowLayer(4, 3, 0, 0x20000000);
 }


 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
 super.onSizeChanged(w, h, oldw, oldh);

 int value = outLineWidth / 2;
 mOuterRectF.set(value, value, w - value, h - value);

 int gap = lineWidth / 2 + outLineWidth + gapWidth;

 mRectF.set(mOuterRectF.left + gap,
  mOuterRectF.top + gap,
  mOuterRectF.right - gap,
  mOuterRectF.bottom - gap);

 centerX = mRectF.centerX();
 centerY = mRectF.centerY();

 mPointerPath = new Path();
 mPointerPath.moveTo(centerX + pointRadius, centerY - 7);
 mPointerPath.lineTo(centerX + pointRadius, centerY + 7);
 mPointerPath.lineTo(mRectF.right - pointGap - lineWidth / 2, centerY);
 mPointerPath.lineTo(centerX + pointRadius, centerY - 7);
 mPointerPath.close();
 }

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

 float degree = 2.7f * mProgress;

 //draw out arc
 canvas.drawArc(mOuterRectF, 135, 270, false, mOuterPaint);

 //draw background arc
 canvas.drawArc(mRectF, 135 + degree, 270 - degree, false, mPaint);

 //draw progress arc
 canvas.drawArc(mRectF, 135, degree, false, mProgressPaint);


 //draw pointer
 canvas.drawCircle(centerX, centerY, pointRadius, mInnerCirclePaint);

 canvas.save();
 canvas.rotate(135 + degree, centerX, centerY);
 canvas.drawPath(mPointerPath, mPointerPaint);
 canvas.restore();
 }


 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);

 int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
 int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
 setMeasuredDimension(Math.min(measureHeight, measureWidth), Math.min(measureHeight, measureWidth));
 }

 public void setOnProgressChangeListener(OnProgressChangeListener listener){
 this.mListener = listener;
 }

 public int getProgressColor() {
 return mProgressColor;
 }

 public void setProgressColor(int progressColor) {
 this.mProgressColor = progressColor;
 if(mProgressPaint != null){
  mProgressPaint.setColor(mProgressColor);
 }

 if(mPointerPaint != null){
  mPointerPaint.setColor(mProgressColor);
 }

 if(mInnerCirclePaint != null){
  mInnerCirclePaint.setColor(mProgressColor);
 }
 postInvalidate();
 }

 public int getBackgroundColor() {
 return mBackgroundColor;
 }

 public void setBackgroundColor(int backgroundColor) {

 this.mBackgroundColor = backgroundColor;
 if(mPaint != null){
  mPaint.setColor(mBackgroundColor);
 }

 if(mOuterPaint != null){
  mOuterPaint.setColor(mBackgroundColor);
 }
 postInvalidate();
 }

 public int getLineWidth() {
 return lineWidth;
 }

 public void setLineWidth(int lineWidth) {
 this.lineWidth = lineWidth;
 if(mPaint != null){
  mPaint.setStrokeWidth(lineWidth);
 }

 if(mProgressPaint != null){
  mProgressPaint.setStrokeWidth(lineWidth);
 }
 postInvalidate();
 }

 public int getOutLineWidth() {
 return outLineWidth;
 }

 public void setOutLineWidth(int outLineWidth) {
 this.outLineWidth = outLineWidth;
 if(mOuterPaint != null){
  mOuterPaint.setStrokeWidth(outLineWidth);
 }
 postInvalidate();
 }

 public int getGapWidth() {
 return gapWidth;
 }

 public void setGapWidth(int gapWidth) {
 this.gapWidth = gapWidth;
 }

 public int getProgress() {
 return mProgress;
 }

 public void setProgress(@IntRange(from = 0, to = 100) int progress) {
 if(progress > 100){
  progress = 100;
 }

 if(progress < 0){
  progress = 0;
 }
 this.mProgress = progress;
 if(mListener != null){
  mListener.onProgressChanged(GradeProgressView.this, mProgress);
 }
 postInvalidate();
 }

 public void setProgressWidthAnimation(@IntRange(from = 0, to = 100) int progress){

 if(progress > 100){
  progress = 100;
 }

 if(progress < 0){
  progress = 0;
 }

 if(animator != null && animator.isRunning()){
  animator.cancel();
  animator = null;
 }

 animator = ValueAnimator.ofInt(mProgress, progress);
 int duration = 10 * Math.abs(progress - mProgress);
 animator.setDuration(duration);

 animator.setInterpolator(new AccelerateDecelerateInterpolator());
 animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator valueAnimator) {
  int value = (int)valueAnimator.getAnimatedValue();
  if(mProgress != value) {
   mProgress = value;
   if(mListener != null){
   mListener.onProgressChanged(GradeProgressView.this, mProgress);
   }
   postInvalidate();
  }
  }
 });
 animator.start();

 }


 @Override
 protected void onDetachedFromWindow() {
 super.onDetachedFromWindow();

 if(animator != null){
  animator.cancel();
  animator = null;
 }

 }


 public interface OnProgressChangeListener{

 void onProgressChanged(GradeProgressView gradeProgressView, int progress);
 }
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.