Android 사용자 정의 원호 진도 막대 에 디지털 동적 변화 추가
효 과 는 다음 과 같 습 니 다:
사고방식:하나의 내환 원호 와 하나의 외환 원호.하나의 원 은 원호 에서 원주 운동 을 하기 때문에 원 을 그 릴 때 반드시 원호 의 각 점 의 좌 표를 얻어 야 한다.여 기 는 사실 Path Measure 라 는 종 류 를 사용 해서 우 리 를 도와 이런 점 을 얻 을 수 있다.원 호 를 그 릴 때 도 당연히 path 를 사용 해 야 한다.그리고 외부 동태 의 전달 값 에 따라 다시 그리 면 동태 적 인 효 과 를 얻 을 수 있다.
코드 는 다음 과 같 습 니 다:
public class ProgressPathRainbow extends View {
private Paint outPaint;
private Paint innerPaint;
private Paint mTextPaint;
private Paint mRmbTextPaint;
private int mBorderWidth = 40;
private int mCircleRadius = 40;
private int mCurrentProgress = 0;
private int mMaxProgress = 0;
private int startAngle = 180;
private int sweepAngels = 180;
private Paint mCirclePaint;
private String rmb = "¥";
private String currentText = "0.0";
public void setCurrentText(String currentText) {
this.currentText = currentText;
}
//
private float[] pos =new float[2];
public ProgressPathRainbow(Context context) {
super(context);
initPaint();
}
public ProgressPathRainbow(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initPaint();
}
public ProgressPathRainbow(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
}
private void initPaint(){
outPaint = new Paint();
outPaint.setColor(0xFFECECEC);
outPaint.setAntiAlias(true);
outPaint.setStyle(Paint.Style.STROKE);
outPaint.setStrokeCap(Paint.Cap.ROUND);
outPaint.setStrokeWidth(mBorderWidth);
//
innerPaint = new Paint();
innerPaint.setColor(0xffFBA123);
innerPaint.setAntiAlias(true);
innerPaint.setStyle(Paint.Style.STROKE);
innerPaint.setStrokeCap(Paint.Cap.ROUND);
innerPaint.setStrokeWidth(mBorderWidth);
mCirclePaint = new Paint();
mCirclePaint.setColor(Color.WHITE);
mCirclePaint.setStyle(Paint.Style.FILL);
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(0xffE5423D);
mTextPaint.setFakeBoldText(true);
mTextPaint.setTextSize(SizeUtils.sp2px(42));
mRmbTextPaint = new Paint();
mRmbTextPaint.setAntiAlias(true);
mRmbTextPaint.setColor(0xffE5423D);
mRmbTextPaint.setTextSize(SizeUtils.sp2px(18));
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
if (width >= height){
setMeasuredDimension(height,height);
}else {
setMeasuredDimension(width,width);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
RectF rectF = new RectF(mBorderWidth,mBorderWidth,getWidth()-mBorderWidth,getHeight()-mBorderWidth);
//
Path outerPath = new Path();
outerPath.arcTo(rectF,startAngle,sweepAngels);
canvas.drawPath(outerPath,outPaint);
//
Path innerPah = new Path();
float percent = (float)mCurrentProgress/mMaxProgress;
innerPah.arcTo(rectF,startAngle,percent*sweepAngels);
canvas.drawPath(innerPah,innerPaint);
//
String tempText = new BigDecimal(currentText).multiply(new BigDecimal(percent)).setScale(1, RoundingMode.HALF_UP).toString();
Rect textBounds = new Rect();
mTextPaint.getTextBounds(tempText, 0, tempText.length(), textBounds);
int dx = getWidth()/2 - textBounds.width()/2;
// baseLine
Paint.FontMetricsInt fontMetrics = mTextPaint.getFontMetricsInt();
int dy = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom;
int baseLine = getHeight()/3 + dy;
canvas.drawText(tempText,dx,baseLine,mTextPaint);
//
Rect textBoundRmbs = new Rect();
mTextPaint.getTextBounds(rmb, 0, rmb.length(), textBoundRmbs);
int dxRmb = dx-50;
// baseLine
Paint.FontMetricsInt fontMetricsRmb = mTextPaint.getFontMetricsInt();
int dyRmb = (fontMetricsRmb.bottom - fontMetricsRmb.top)/2 - fontMetricsRmb.bottom;
int baseLineRmb = getHeight()/3 + dyRmb;
canvas.drawText(rmb,dxRmb,baseLineRmb,mRmbTextPaint);
// ( , )
PathMeasure pathMeasure = new PathMeasure(outerPath,false);
boolean posTan = pathMeasure.getPosTan(pathMeasure.getLength() * percent, pos, null);
canvas.drawCircle(pos[0],pos[1],mCircleRadius,mCirclePaint);
}
public synchronized void setmCurrentProgress(int mCurrentProgress) {
this.mCurrentProgress = mCurrentProgress;
invalidate();
}
public synchronized void setmMaxProgress(int mMaxProgress) {
this.mMaxProgress = mMaxProgress;
}
}
이상 이면 이 효 과 를 실현 할 수 있다.사용 하면 이렇게 할 수 있어 요.
detailRainbowPr.setmMaxProgress(100);
detailRainbowPr.setCurrentText("99.9");
ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, 100);
valueAnimator.setDuration(5000);
valueAnimator.setInterpolator(new DecelerateInterpolator());
valueAnimator.addUpdateListener(valueAnimator1 -> {
float step = (float) valueAnimator1.getAnimatedValue();
detailRainbowPr.setmCurrentProgress((int) step);
});
valueAnimator.start();
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.