Android 自定义圆弧计数器(模仿QQ计步器)

概述1.自定义属性  在res的values文件夹中新建一个attrs.xml文件，如下图所示:   在attrs.xml文件中自定义我们需要的view属性，定义内容如下所示:<declare-styleablename="QQStepView"><!--外围圆弧的颜色--><attrname="outerColor"format="color"/> 1.自定义属性

   在res的values文件夹中新建一个attrs.xml文件，如下图所示:

  

  在attrs.xml文件中自定义我们需要的vIEw属性，定义内容如下所示:

@H_301_16@<declare-styleable name="QQStepVIEw">         <!--外围圆弧的颜色-->        <attr name="outercolor" format="color"/>         <!--内围圆弧的颜色-->        <attr name="intercolor" format="color"/>         <!--显示数字的文字大小-->        <attr name="stepTextSize" format="dimension"/>         <!--显示数据的颜色-->        <attr name="stepTextcolor" format="color"/>         <!--圆弧的边框-->        <attr name="borderWIDth" format="dimension"/>         <!--最大的数值-->        <attr name="maxStep" format="integer"/>         <!--当前的数值-->        <attr name="currentStep" format="integer"/></declare-styleable>

2.自定义QQStepVIEw 类继承至VIEw类

  stepvIEw代码如下所示:

@H_301_16@import androID.content.Context;import androID.content.res.TypedArray;import androID.graphics.Canvas;import androID.graphics.color;import androID.graphics.Paint;import androID.graphics.Rect;import androID.graphics.RectF;import androID.util.AttributeSet;import androID.vIEw.VIEw;import androIDx.annotation.Nullable;public class QQStepVIEw extends VIEw {    private int mOutercolor = color.BLUE;//默认外圆弧的颜色    private int mIntercolor = color.RED;//默认内圆弧的颜色    private int mTextStepcolor = color.RED;//默认显示数据的颜色    private float mborderWIDth = 21;//默认圆弧的宽度    private int mMaxStepValue = 5000;//默认最大的显示数据    private int mCurrentStepValue = 1000;//默认当前的显示数据    private Paint mOuterPaint;//外圆弧的画笔    private Paint mInterPaint;//内圆弧的画笔    private Paint mTextPaint;//数据的画笔    public QQStepVIEw(Context context) {        this(context,null);    }    public QQStepVIEw(Context context, @Nullable AttributeSet attrs) {        this(context, attrs,0);    }    public QQStepVIEw(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.QQStepVIEw);//从attrs.xml文件中获取自定义属性        mOutercolor = typedArray.getcolor(R.styleable.QQStepVIEw_outercolor,mOutercolor);//获取外圆弧的颜色        mIntercolor = typedArray.getcolor(R.styleable.QQStepVIEw_intercolor,mIntercolor);//获取内圆弧的颜色        mTextStepcolor = typedArray.getcolor(R.styleable.QQStepVIEw_stepTextcolor,mTextStepcolor);//获取显示数据字体的颜色        mborderWIDth = typedArray.getDimension(R.styleable.QQStepVIEw_borderWIDth,mborderWIDth);//获取圆弧的宽度        mMaxStepValue = typedArray.getInteger(R.styleable.QQStepVIEw_maxStep,mMaxStepValue);//获取最大的显示数据        mCurrentStepValue = typedArray.getInteger(R.styleable.QQStepVIEw_currentStep,mCurrentStepValue);//获取当前的显示数据        typedArray.recycle();//资源文件的回收                /**定义外圆弧的画笔样式*/        mOuterPaint = new Paint();        mOuterPaint.setAntiAlias(true);        mOuterPaint.setcolor(mOutercolor);        mOuterPaint.setstrokeWIDth(mborderWIDth);        mOuterPaint.setstrokeCap(Paint.Cap.ROUND);        mOuterPaint.setStyle(Paint.Style.stroke);        /**定义内圆弧的画笔样式*/        mInterPaint = new Paint();        mInterPaint.setAntiAlias(true);        mInterPaint.setcolor(mIntercolor);        mInterPaint.setstrokeWIDth(mborderWIDth);        mInterPaint.setstrokeCap(Paint.Cap.ROUND);        mInterPaint.setStyle(Paint.Style.stroke);        /**定义显示字体的画笔样式*/        mTextPaint = new Paint();        mTextPaint.setAntiAlias(true);        mTextPaint.setcolor(mTextStepcolor);        mTextPaint.setTextSize(60);    }    @OverrIDe    protected voID onMeasure(int wIDthMeasureSpec, int heightmeasureSpec) {        super.onMeasure(wIDthMeasureSpec, heightmeasureSpec);        int wIDth = MeasureSpec.getSize(wIDthMeasureSpec);//获取长度        int height = MeasureSpec.getSize(heightmeasureSpec);//获取宽度        setMeasuredDimension(wIDth>height?height:wIDth,wIDth>height?height:wIDth);//确保是个正方形    }    @OverrIDe    protected voID onDraw(Canvas canvas) {        super.onDraw(canvas);        int center = getWIDth()/2;        int radis = (int) (center - mborderWIDth/2);        //外侧的圆弧        RectF outRect = new RectF(center-radis,center-radis,center+radis,center+radis);        canvas.drawArc(outRect,135,270,false,mOuterPaint);        //内侧的圆弧        float sweepAngle = 0;        if(mCurrentStepValue>0)            sweepAngle= (float) mCurrentStepValue/(float)mMaxStepValue*270;        canvas.drawArc(outRect,135,sweepAngle,false,mInterPaint);        //绘画文字        Rect textRect = new Rect();        mTextPaint.getTextBounds(mCurrentStepValue+"",0,String.valueOf(mCurrentStepValue).length(),textRect);        int dx = getWIDth()/2 - textRect.wIDth()/2;        int dy = (textRect.bottom-textRect.top)/2 - textRect.top;        int baseline = (int) (getHeight()/2 +dy-mborderWIDth);        canvas.drawText(mCurrentStepValue+"",dx,baseline,mTextPaint);    }    public voID setmMaxStepValue(int maxStepValue){        this.mMaxStepValue = maxStepValue;    }    public voID setmCurrentStepValue(int currentStepValue){        this.mCurrentStepValue = currentStepValue;        invalIDate();    }}

3.在布局文件中的使用

@H_301_16@<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"    xmlns:app="http://schemas.androID.com/apk/res-auto"    xmlns:tools="http://schemas.androID.com/tools"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    tools:context=".MainActivity">    <com.hong.myvIEw.QQStepVIEw        androID:ID="@+ID/qq_step_vIEw"        androID:layout_wIDth="match_parent"        androID:layout_height="match_parent"/></linearLayout>

4.代码中的使用

@H_301_16@import androIDx.appcompat.app.AppCompatActivity;import androID.animation.ValueAnimator;import androID.os.Bundle;import androID.vIEw.animation.DecelerateInterpolator;public class MainActivity extends AppCompatActivity {    private QQStepVIEw qqStepVIEw;    @OverrIDe    protected voID onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentVIEw(R.layout.activity_main);        qqStepVIEw = this.findVIEwByID(R.ID.qq_step_vIEw);        qqStepVIEw.setmMaxStepValue(3000);        //添加动画        ValueAnimator valueAnimator = ValueAnimator.ofInt(0,2500);//0-2500数字        valueAnimator.setInterpolator(new DecelerateInterpolator());        valueAnimator.setDuration(1500);//1.5s的动画效果        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @OverrIDe            public voID onAnimationUpdate(ValueAnimator animation) {               int currentStep = (int) animation.getAnimatedValue();//获取当前的动画值，即（0-2500的数字）                qqStepVIEw.setmCurrentStepValue(currentStep);//重新绘制vIEw            }        });        valueAnimator.start();//开启动画    }}

5.运行结果

总结

以上是内存溢出为你收集整理的Android 自定义圆弧计数器(模仿QQ计步器)全部内容，希望文章能够帮你解决Android 自定义圆弧计数器(模仿QQ计步器)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。