安卓运动圆环自定义View

记得这个东西原来有个同事问过我，当时正在自学自定义View和属性动画这一块，对这个功能也没有写过，所以就google了一下，发了几个类似效果的github项目给朋友，今天礼拜天难得有心情写写代码，所以想想实现一下这个自定义View的效果。
首先，我们从这个gif的效果图中就可以得知这个自定义View我们需要哪些自定义属性，内部圆环的颜色、外部圆环的颜色、圆环的宽度、字体的大小、颜色，话不多说，直接撸码。

 <!-- 运动圆环自定义属性 --> <declare-styleable name="MotionCrcle"> <attr name="outerCrcleColor" format="color"></attr> <attr name="innerCrcleColor" format="color"></attr> <attr name="crcleTextColor" format="color"></attr> <attr name="crcleTextSize" format="integer"></attr> <attr name="crcleWidth" format="integer"></attr> </declare-styleable> 

/** * Created by Administrator on 2018/5/13. * 运动圆环自定义View */ public class MotionCrcle extends View { /** * 外部圆环颜色 */ private int mOuterColor = Color.BLUE; /** * 里面圆环颜色 */ private int mInnerColor = Color.RED; /** * 跑步数的文字大小 */ private int mTextSize = 30; /** * 跑步文字的颜色 */ private int mTextColor = Color.BLACK; /** * 圆环的宽度 */ private int mCrcleWidth = 45; private Paint mOuterPaint, mInnerPaint, mTextPaint; private float mMaxSteps = 0; private int mCurrentSteps = 0; public MotionCrcle(Context context) { this(context, null); } public MotionCrcle(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public MotionCrcle(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MotionCrcle); mOuterColor = array.getColor(R.styleable.MotionCrcle_outerCrcleColor, mOuterColor); mInnerColor = array.getColor(R.styleable.MotionCrcle_innerCrcleColor, mInnerColor); mCrcleWidth = array.getInt(R.styleable.MotionCrcle_crcleWidth, mCrcleWidth); mTextColor = array.getColor(R.styleable.MotionCrcle_crcleTextColor, mTextColor); mTextSize = array.getInt(R.styleable.MotionCrcle_crcleTextSize, mTextSize); initPaint(); array.recycle(); } public synchronized void setmMaxSteps(float mMaxSteps) { this.mMaxSteps = mMaxSteps; } public synchronized void setmCurrentSteps(int mCurrentSteps) { this.mCurrentSteps = mCurrentSteps; invalidate(); } private void initPaint() { mOuterPaint = new Paint(); mOuterPaint.setAntiAlias(true); mOuterPaint.setStrokeWidth(mCrcleWidth); mOuterPaint.setStrokeCap(Paint.Cap.ROUND); mOuterPaint.setStyle(Paint.Style.STROKE); mOuterPaint.setColor(mOuterColor); mInnerPaint = new Paint(); mInnerPaint.setAntiAlias(true); mInnerPaint.setStrokeWidth(mCrcleWidth); mInnerPaint.setStrokeCap(Paint.Cap.ROUND); mInnerPaint.setStyle(Paint.Style.STROKE); mInnerPaint.setColor(mInnerColor); mTextPaint = new Paint(); mTextPaint.setAntiAlias(true); mTextPaint.setTextSize(mTextSize); mTextPaint.setColor(mTextColor); } @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){ /** * 因为运动圆环是一个正方形，所以我们要设置一个最小值作为View的长度 */ int min = Math.min(width, height); widthMeasureSpec = MeasureSpec.makeMeasureSpec(min, MeasureSpec.EXACTLY); heightMeasureSpec = MeasureSpec.makeMeasureSpec(min, MeasureSpec.EXACTLY); setMeasuredDimension(widthMeasureSpec, heightMeasureSpec); } } @Override protected void onDraw(Canvas canvas) { //因为圆环本身是具有宽度的，所以我们这里左边的顶点要往右mCrcleWidth个距离，右边底部的点要往左，所以要减去mCrcleWidth RectF recf = new RectF(mCrcleWidth, mCrcleWidth, getWidth() - mCrcleWidth, getHeight() - mCrcleWidth); //135是外部圆环的初始角度，270是所画的总角度数 canvas.drawArc(recf, 135, 270, false, mOuterPaint); if(mCurrentSteps == 0){ return; } //算出当前步数是最大步数的比值 float angle = mCurrentSteps / mMaxSteps; canvas.drawArc(recf, 135, 270 * angle, false, mInnerPaint); String stepText = mCurrentSteps+""; Rect bounds = new Rect(); //算出步数文字的baseLine，也就是基准线 mTextPaint.getTextBounds(stepText, 0, stepText.length(), bounds); int x = getWidth() / 2 - bounds.width() / 2; Paint.FontMetricsInt metrices = mTextPaint.getFontMetricsInt(); int diffY = (metrices.bottom - metrices.top) / 2 - metrices.bottom; int baseLine = getHeight() / 2 + diffY; canvas.drawText(stepText, x, baseLine, mTextPaint); } } 

文字的绘制和画圆画弧不一样，其实仔细想想也明白，如果绘制按照左上角开始的话是不现实的，因为文字不可能是简单的顶部或底部对其，应该是重心对齐，简单说就是基准线，所以代码中基准线的算法是bottom-top再除以2减去bottom,以基准线开始绘制，top就是负数，bottom是正数。

public class MainActivity extends AppCompatActivity { private Button mBtn; private baohuo.rzj.com.myapplication.Views.MotionCrcle mCrcle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mBtn = (Button) findViewById(R.id.btn); mCrcle = (MotionCrcle) findViewById(R.id.motion_crcle); mCrcle.setmMaxSteps(10000); final ValueAnimator animator = ObjectAnimator.ofFloat(0,4500); animator.setDuration(2000); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { float value = (float) valueAnimator.getAnimatedValue(); mCrcle.setmCurrentSteps((int) value); } }); mBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animator.start(); } }); } } 

以上是Activity的代码，非常简单，不做解释，这个值得一提的是，我在写的时候内部圆环一直没有绘制，文字在不断变化，通过debug发现，我把步数最大值和当前步数设置为int，一个小的int除以大的int的到的只有0，所以我把最大步数改为float，这样得出的值就有小数位，最后附上xml代码。

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="baohuo.rzj.com.myapplication.MainActivity"> <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="30dp" android:text="运动圆环开启" android:gravity="center"/> <baohuo.rzj.com.myapplication.Views.MotionCrcle android:id="@+id/motion_crcle" android:layout_below="@+id/btn" android:layout_width="200dp" android:layout_height="200dp" app:outerCrcleColor="@color/colorPrimary" app:innerCrcleColor="@color/colorAccent" app:crcleTextColor="@color/colorPrimaryDark" app:crcleTextSize="40" app:crcleWidth="20"/> </RelativeLayout>