안 드 로 이 드 사용자 정의 보기 모조 알 리 페 이 참깨 신용 계기판
이것 은 내 가 만 든 효과 인지,아니면 좀 차이 가 있다.
알 리 페 이 9.9 버 전 참깨 신용 점수 실현
먼저 각종 붓 을 초기 화하 고 기본
size
,padding
,작은 원점 을 초기 화 합 니 다.(오리지널 참깨 신용의 희미 한 효과 가 있 는 작은 도 트 를 찾 지 못 해 이 걸 로 대체 할 수 밖 에 없 었 다)
//View
defaultSize = dp2px(250);
// Padding
arcDistance = dp2px(14);
//
mMiddleArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mMiddleArcPaint.setStrokeWidth(8);
mMiddleArcPaint.setColor(Color.WHITE);
mMiddleArcPaint.setStyle(Paint.Style.STROKE);
mMiddleArcPaint.setAlpha(80);
//
mInnerArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mInnerArcPaint.setStrokeWidth(30);
mInnerArcPaint.setColor(Color.WHITE);
mInnerArcPaint.setAlpha(80);
mInnerArcPaint.setStyle(Paint.Style.STROKE);
//
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTextAlign(Paint.Align.CENTER);
//
mCalibrationPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCalibrationPaint.setStrokeWidth(4);
mCalibrationPaint.setStyle(Paint.Style.STROKE);
mCalibrationPaint.setColor(Color.WHITE);
mCalibrationPaint.setAlpha(120);
//
mSmallCalibrationPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mSmallCalibrationPaint.setStrokeWidth(1);
mSmallCalibrationPaint.setStyle(Paint.Style.STROKE);
mSmallCalibrationPaint.setColor(Color.WHITE);
mSmallCalibrationPaint.setAlpha(130);
//
mCalibrationTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCalibrationTextPaint.setTextSize(30);
mCalibrationTextPaint.setColor(Color.WHITE);
//
mArcProgressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArcProgressPaint.setStrokeWidth(8);
mArcProgressPaint.setColor(Color.WHITE);
mArcProgressPaint.setStyle(Paint.Style.STROKE);
mArcProgressPaint.setStrokeCap(Paint.Cap.ROUND);
// Bitmap
mBitmapPaint = new Paint();
mBitmapPaint.setStyle(Paint.Style.FILL);
mBitmapPaint.setAntiAlias(true);
//
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_circle);
//
pos = new float[2];
// tangent
tan = new float[2];
matrix = new Matrix();
코드 는 매우 간단 합 니 다.바로 각종 초기 화 입 니 다.아래 를 보 세 요.View
의 측정 은 주로 설정warp_content
할 때 기본 너비 와 높 은 값 을 지정 합 니 다.
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
setMeasuredDimension(resolveMeasure(widthMeasureSpec, defaultSize),
resolveMeasure(heightMeasureSpec, defaultSize));}
//
public int resolveMeasure(int measureSpec, int defaultSize){
int result = 0;
int specSize = MeasureSpec.getSize(measureSpec);
switch (MeasureSpec.getMode(measureSpec))
{
case MeasureSpec.UNSPECIFIED:
result = defaultSize;
break;
case MeasureSpec.AT_MOST:
// warp_content
result = Math.min(specSize, defaultSize);
break;
case MeasureSpec.EXACTLY:
// math_parent
break;
default:
result = defaultSize;
}
return result;}
그리고View
의 너비 와 높이 를 조정 하 는 방법 을 확인한다.
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh){
super.onSizeChanged(w, h, oldw, oldh);
width = w;
height = h;
radius = width / 2;
//
mMiddleRect = new RectF(defaultPadding, defaultPadding,width - defaultPadding, height - defaultPadding);
//
mInnerRect = new RectF(defaultPadding + arcDistance, defaultPadding + arcDistance,width - defaultPadding - arcDistance, height - defaultPadding - arcDistance);
//
mMiddleProgressRect = new RectF(defaultPadding, defaultPadding,width - defaultPadding, height - defaultPadding);
}
원호 초기 화 에 필요 한 사각형 구현 입 니 다.아래 에 중점 을 두 고 그립 니 다.바깥쪽 의 원 호 를 그립 니 다.간단 합 니 다.원호 의 시작 각도,각도.
private void drawMiddleArc(Canvas canvas){
canvas.drawArc(mMiddleRect, mStartAngle, mEndAngle, false, mMiddleArcPaint);
}
내부 원호 그리 기
private void drawInnerArc(Canvas canvas){
canvas.drawArc(mInnerRect, mStartAngle, mEndAngle, false, mInnerArcPaint);
}
내부 원호 의 작은 눈금 을 그립 니 다.캔버스 는 원호 왼쪽 아래 의 출발점 으로 회전 하여 각 눈금 선의 시작 점 을 계산 한 후에 전체 원 호 는 210 도 입 니 다.6 각도 마다 눈금 선 을 그립 니 다.
private void drawSmallCalibration(Canvas canvas){
//
canvas.save();
canvas.rotate(-105, radius, radius);
//
int startDst = (int) (defaultPadding + arcDistance - mInnerArcPaint.getStrokeWidth() / 2 - 1);
int endDst = (int) (startDst + mInnerArcPaint.getStrokeWidth());
for (int i = 0; i <= 35; i++) {
// 6
canvas.drawLine(radius, startDst, radius, endDst, mSmallCalibrationPaint);
canvas.rotate(6, radius, radius);
}
canvas.restore();
}
내부 원호 의 큰 눈금,350,550,600,650,700,950,대응 하 는 신용 점 수 를 그립 니 다.똑 같이 캔버스 를 회전 시 키 고 눈금 선의 시작 점 을 계산 하 며 매번 회전 하 는 각 도 를 계산 하고 35 도 마다 한 번 회전 하 며 해당 하 는 큰 눈금 선 을 차례대로 그립 니 다.
그 다음 에 해당 하 는 텍스트 내용 을 그립 니 다.
paint
의measureText
방법 으로 텍스트 의 길 이 를 측정 하고 해당 하 는 텍스트 내용 을 차례대로 그립 니 다.
private void drawCalibrationAndText(Canvas canvas){
//
canvas.save();
canvas.rotate(-105, radius, radius);
//
int startDst = (int) (defaultPadding + arcDistance - mInnerArcPaint.getStrokeWidth() / 2 - 1);
int endDst = (int) (startDst + mInnerArcPaint.getStrokeWidth());
//
int rotateAngle = 210 / 10;
for (int i = 1; i < 12; i++) {
if (i % 2 != 0)
{
canvas.drawLine(radius, startDst, radius, endDst, mCalibrationPaint);
}
//
float textLen = mCalibrationTextPaint.measureText(sesameStr[i - 1]);
canvas.drawText(sesameStr[i - 1], radius - textLen / 2, endDst + 40, mCalibrationTextPaint);
canvas.rotate(rotateAngle, radius, radius);
}
canvas.restore();}
중간의 신용 점수,신용 등급,평가 시간 등 텍스트 를 그립 니 다.이것 은 비교적 간단 하고 직접drawText
하 며 순서대로 배열 하여 그리 면 됩 니 다.
private void drawCenterText(Canvas canvas){
// Logo
mTextPaint.setTextSize(30);
canvas.drawText("BETA", radius, radius - 130, mTextPaint);
//
mTextPaint.setTextSize(200);
mTextPaint.setStyle(Paint.Style.STROKE);
canvas.drawText(String.valueOf(mMinNum), radius, radius + 70, mTextPaint);
//
mTextPaint.setTextSize(80);
canvas.drawText(sesameLevel, radius, radius + 160, mTextPaint);
//
mTextPaint.setTextSize(30);
canvas.drawText(evaluationTime, radius, radius + 205, mTextPaint);
}
가장 바깥쪽 진 도 를 그립 니 다.여기 서 사용 하 는Path
원 호 를 추가 합 니 다.좌표 점 을 계속 계산 해 야 하기 때문에 주로PathMeasure
클래스 를 사 용 했 습 니 다.그 려 진 원 호 를path
에 넣 었 습 니 다.현재 점 의 실제 위치
private float[] pos;
현재 tangent 값private float[] tan;
경로 의 종점 의 정절 값 과 좌 표를 가 져 온 다음 좌표 점 에 따라 작은 원점 을 그립 니 다.
PathMeasure pathMeasure = new PathMeasure(path, false);
pathMeasure.getPosTan(pathMeasure.getLength() * 1, pos, tan);
private void drawRingProgress(Canvas canvas){
Path path = new Path();
path.addArc(mMiddleProgressRect, mStartAngle, mCurrentAngle);
PathMeasure pathMeasure = new PathMeasure(path, false);
pathMeasure.getPosTan(pathMeasure.getLength() * 1, pos, tan);
matrix.reset();
matrix.postTranslate(pos[0] - bitmap.getWidth() / 2, pos[1] - bitmap.getHeight() / 2);
canvas.drawPath(path, mArcProgressPaint);
// 0
if (mCurrentAngle == 0)
return;
canvas.drawBitmap(bitmap, matrix, mBitmapPaint);
mBitmapPaint.setColor(Color.WHITE);
canvas.drawCircle(pos[0], pos[1], 8, mBitmapPaint);
}
자,여기까지 모든 그리 기 가 끝 났 습 니 다.그 다음 에 원호 진도 바 를 움 직 입 니 다.사용ValueAnimator
,진도 바 애니메이션 은 원호 진도 바 의 시작 각도mCurrentAngle
,원호 각도mTotalAngle
,수치 애니메이션 은 초기 화minNum=0
를 정 의 했 습 니 다.maxNum
들 어 오 는 수치 에 따라 계산 합 니 다.
public void startAnim(){
ValueAnimator mAngleAnim = ValueAnimator.ofFloat(mCurrentAngle, mTotalAngle);
mAngleAnim.setInterpolator(new AccelerateDecelerateInterpolator());
mAngleAnim.setDuration(3000);
mAngleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator){
mCurrentAngle = (float) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
mAngleAnim.start();
ValueAnimator mNumAnim = ValueAnimator.ofInt(mMinNum, mMaxNum);
mNumAnim.setDuration(3000);
mNumAnim.setInterpolator(new LinearInterpolator());
mNumAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator){
mMinNum = (int) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
mNumAnim.start();}
마지막 으로 들 어 오 는 신용 점수 에 따라 원호 진도 조 가 도착 하 는 각 도 를 계산한다.
public void setSesameValues(int values){
if (values <= 350){
mMaxNum = values;
mTotalAngle = 0f;
sesameLevel = " ";
evaluationTime = " :" + getCurrentTime();
} else if (values <= 550){
mMaxNum = values;
mTotalAngle = (values - 350) * 80 / 400f + 2;
sesameLevel = " ";
evaluationTime = " :" + getCurrentTime();
} else if (values <= 700)
{
mMaxNum = values;
if (values > 550 && values <= 600){
sesameLevel = " ";
} else if (values > 600 && values <= 650){
sesameLevel = " ";
} else {
sesameLevel = " ";
}
mTotalAngle = (values - 550) * 120 / 150f + 43;
evaluationTime = " :" + getCurrentTime();
} else if (values <= 950){
mMaxNum = values;
mTotalAngle = (values - 700) * 40 / 250f + 170;
sesameLevel = " ";
evaluationTime = " :" + getCurrentTime();
} else{
mTotalAngle = 240f;
}
startAnim();
}
총결산이 글 은 새 판 의 실현 과정 만 분 석 했 고 구 판 의 실현 사고 도 많 지 않 으 며 코드 도 복잡 하지 않다.이 글 이 안 드 로 이 드 개발 에 도움 이 되 고 궁금 한 점 이 있 으 면 댓 글로 소통 할 수 있 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.