转载时请注明出处,尊重他人的劳动成果,谢谢。
先附上效果图:
这个控件是动态加载到75%的,主要我忘了怎么做动态图,就先放一个静态图在这里表示表示。旁边这个没有没有喜欢的?有想知道的 我可以告诉答案。
现附上代码,不懂的请留言:
package com.sahadev.circleview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Paint.FontMetrics; import android.graphics.RectF; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.view.View.OnClickListener; import android.widget.Scroller; public class CircleView extends View implements OnClickListener { private Paint outPaint, inPaint; /* The Circle's radius */ private int radius = 200; /* The torus's width */ private int width = 50, backgroundColor = Color.WHITE;// 默认 背景色为纯白 private RectF mTempRectF = new RectF(); private int mProgress;// 当前进度 private int mTargetProgress = 75;// 目标进度 private int mWidth = 400, mHeight = 400;// 该控件的初始大小为400*400 private Scroller mScroller;// 滑动辅助类 private int duration = 1000;// 动画间隔时间 private int textSize = 50, mFontHeight; private float mTextWidth = 0; public CircleView(Context context) { this(context, null); } public CircleView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CircleView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); outPaint = new Paint(); inPaint = new Paint(); outPaint.setTextSize(textSize); mScroller = new Scroller(context); mScroller.forceFinished(false); outPaint.setColor(Color.argb(90, 90, 90, 90)); outPaint.setStyle(Paint.Style.FILL_AND_STROKE); outPaint.setAntiAlias(true); inPaint.setColor(backgroundColor); inPaint.setAntiAlias(true); setBackgroundColor(backgroundColor); FontMetrics fm = outPaint.getFontMetrics();// 得到系统默认字体属性 mFontHeight = (int) (Math.ceil(fm.descent - fm.top) + 2);// 获得字体高度 mFontHeight = mFontHeight - textSize; mTempRectF.set(0, 0, mWidth, mHeight); } public void setTextSize(int textSize) { this.textSize = textSize; } /* * 设置背景色 * * @see android.view.View#setBackgroundColor(int) */ public void setBackgroundColor(int color) { this.backgroundColor = color; } /** * 设置圆圈颜色 * * @param color */ public void setCircleColor(int color) { outPaint.setColor(color); } /** * 设置圆圈半径 * * @param radius */ public void setRadius(int radius) { this.radius = radius; } /** * 设置圆圈宽度 * * @param width */ public void setWidth(int width) { this.width = width; } /** * 设置目标进度 * * @param progress * 大于0,小于100 */ public void setTargetProgress(int progress) { this.mTargetProgress = progress; } /** * 可以作为进度条设置当前进度 * * @param progress */ public void setProgress(int progress) { this.mProgress = progress; postInvalidate(); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: onClick(this); return true; } return super.onTouchEvent(event); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawArc(mTempRectF, -90, 360 * mProgress / 100, true, outPaint);// 画一个扇形 canvas.drawCircle(mWidth / 2, mHeight / 2, radius - width, inPaint);// 中心画一个圆 mTextWidth = outPaint.measureText(mProgress + "%"); canvas.drawText(mProgress + "%", (mWidth - mTextWidth) / 2, (mHeight) / 2 + mFontHeight, outPaint); } /* * 获取适合的高宽 * * @see android.view.View#onMeasure(int, int) */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int size = 0; size = widthMeasureSpec > mWidth && heightMeasureSpec > mHeight ? (mWidth > mHeight ? mHeight : mWidth) : (widthMeasureSpec > heightMeasureSpec ? heightMeasureSpec : widthMeasureSpec); /* 该控件为正方形 */ setMeasuredDimension(size, size); } /* * 触动该控件 绘制到指定位置 * * @see android.view.View.OnClickListener#onClick(android.view.View) */ @Override public void onClick(View v) { mScroller.startScroll(0, 0, mTargetProgress, 0, duration); postInvalidate(); } /** * 设置动画绘制时间 * * @param duration */ public void setDuration(int duration) { this.duration = duration; } @Override public void computeScroll() { super.computeScroll(); if (mScroller.computeScrollOffset()) { mProgress = mScroller.getCurrX(); postInvalidate(); } } }
像一般自定义控件使用这个控件就可以了,具体方法相信大家都懂得,我就不贴方法了,只用设置进去就可以看到效果。