Android自定义View仿QQ运动步数效果

2023-08-09 23:16:03 142

本文实例为大家分享了AndroidQQ运动步数的具体代码，供大家参考，具体内容如下

今天我们实现下面这样的效果：

首先自定义属性：

自定义View代码如下：

/**
*CreatedbyMichaelon2019/11/1.
*/

publicclassMyQQStepextendsView{

privateintout_color;
privateintinner_color;
privatefloatwidth;
privatefloattextSize;
privateintcolor;
privateintwidth01;
privateintheight01;
privatePaintoutPaint;
privatePaintinnerPaint;
privatePainttextPaint;

privatefloatpercent;
privateintstep;

publicMyQQStep(Contextcontext){
this(context,null);
}

publicMyQQStep(Contextcontext,@NullableAttributeSetattrs){
this(context,attrs,0);
}

publicMyQQStep(Contextcontext,@NullableAttributeSetattrs,intdefStyleAttr){
super(context,attrs,defStyleAttr);
TypedArrayarray=context.obtainStyledAttributes(attrs,R.styleable.MyQQStep);
out_color=array.getColor(R.styleable.MyQQStep_out_color,Color.BLACK);
inner_color=array.getColor(R.styleable.MyQQStep_inner_color,Color.RED);
width=array.getDimension(R.styleable.MyQQStep_border_width,10);
textSize=array.getDimensionPixelSize(R.styleable.MyQQStep_text_size,20);
color=array.getColor(R.styleable.MyQQStep_text_color,Color.GREEN);
array.recycle();
initPaint();
percent=0;
step=5000;
}

privatevoidinitPaint(){
outPaint=newPaint();
outPaint.setAntiAlias(true);
outPaint.setStyle(Paint.Style.STROKE);
outPaint.setStrokeWidth(width);
outPaint.setColor(out_color);
outPaint.setStrokeCap(Paint.Cap.ROUND);

innerPaint=newPaint();
innerPaint.setAntiAlias(true);
innerPaint.setStrokeWidth(width);
innerPaint.setStyle(Paint.Style.STROKE);
innerPaint.setColor(inner_color);
innerPaint.setStrokeCap(Paint.Cap.ROUND);

textPaint=newPaint();
textPaint.setAntiAlias(true);
textPaint.setColor(color);
textPaint.setStyle(Paint.Style.STROKE);
textPaint.setTextSize(textSize);

}

@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
//super.onMeasure(widthMeasureSpec,heightMeasureSpec);
intwidthMode=MeasureSpec.getMode(widthMeasureSpec);
intheightMode=MeasureSpec.getMode(heightMeasureSpec);
if(widthMode==MeasureSpec.AT_MOST){

}else{
width01=MeasureSpec.getSize(widthMeasureSpec);
}
if(heightMode==MeasureSpec.AT_MOST){

}else{
height01=MeasureSpec.getSize(heightMeasureSpec);
}
setMeasuredDimension((width01>height01?height01:width01)
,(width01>height01?height01:width01));
}

@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
intrealWidth=getWidth()>getHeight()?getHeight():getWidth();
intrealHeight=getWidth()>getHeight()?getHeight():getWidth();
RectFr1=newRectF(width/2,width/2,realWidth-width/2
,realHeight-width/2);
canvas.drawArc(r1,135,270,false,outPaint);
canvas.drawArc(r1,135,270*percent,false,innerPaint);

Rectr=newRect();
Strings=step+"";
textPaint.getTextBounds(s,0,s.length(),r);
inttextWidth=r.width();
inttextHeight=r.height();
Paint.FontMetricsIntfontMetricsInt=newPaint.FontMetricsInt();
intdy=(fontMetricsInt.bottom-fontMetricsInt.top)/2-fontMetricsInt.bottom;
intbaseLine=textHeight/2+dy+realHeight/2-textHeight/2;
intx0=realWidth/2-textWidth/2;
canvas.drawText(s,x0,baseLine,textPaint);

}

publicvoidsetPercent(floatpercent,floatvalue){
this.percent=percent;
this.step=(int)value;
invalidate();
}


}

最后在布局以及MainActivity中调用：

privatevoidinitView(){
finalMyQQStepqq_view=findViewById(R.id.qq_step);
ValueAnimatoranimator=ValueAnimator.ofFloat(0,5000);
animator.addUpdateListener(newValueAnimator.AnimatorUpdateListener(){
@Override
publicvoidonAnimationUpdate(ValueAnimatoranimation){
floatp=animation.getAnimatedFraction();
qq_view.setPercent(p,5000*p);
}
});
animator.setDuration(10000);
animator.start();

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Android自定义View仿QQ运动步数效果

热门推荐

随机推荐