Android圆形进度条控件-CircleSeekBar
1.引言
博主Android开发起步没多久,一脚踏入社会工作。对Android可以说是非常的喜欢,这里花了一天多的时间写了一个圆形进度条的控件,没有参考其他类似控件的实现方式。如果有什么好的建议,或者需要我改善的,希望大家能够指出,和你们一起进步哦。
另外项目我已经放到Git上,大家可以随意使用。CircleSeekBar项目地址:https://github.com/Hellobird/CircleSeekBar-For-Android。
2.预览图
感觉效果还可以吧,下面讲下主要的方法。
3.主要方法
首先该类是继承自View类的,重写了onDraw、onMeasure方法。onDraw主要控制界面的绘制,onMeasure主要计算了一些重要参数,列如进度条边框的Rect,View的高度宽度等。
3.1 onDraw()方法
该方法因为是绘制调用的方法,所以不能涉及大量的运算,或者声明变量。这里主要是包括进度的绘制,文字的绘制,以及淡入淡出效果、缩放效果效果的设置。进度绘制主要使用了drawArc()这个方法,可以根据自己的设定画弧。动画的刷新主要靠判断当当前进度还未到达目标进度时,会调用invalidate()继续刷新。我也不知道常用滑动效果是否是这样不断刷新出来的,如果有更好的方法务必请告诉我一下。
- <span style="white-space:pre"> </span>@Override
- protected void onDraw(Canvas canvas) {
- // 判断当前角度偏移方向
- if (mCurrentAngle > mTargetAngle) {
- mCurrentAngle = mCurrentAngle - mVelocity;
- if (mCurrentAngle < mTargetAngle) {
- mCurrentAngle = mTargetAngle;
- }
- } else if (mCurrentAngle < mTargetAngle) {
- mCurrentAngle = mCurrentAngle + mVelocity;
- if (mCurrentAngle > mTargetAngle) {
- mCurrentAngle = mTargetAngle;
- }
- }
- float ratio = mCurrentAngle / 360f;
- // 设置透明度
- if (mFadeEnable) {
- int alpha = (int) ((mEndAlpha - mStartAlpha) * ratio);
- mProgressPaint.setAlpha(alpha);
- }
- // 设置二级进度缩放效果
- if (mZoomEnable) {
- zoomSProgressRect(ratio);
- }
- // 绘制二级进度条
- canvas.drawArc(mSProgressRect, 0, 360f, false, mSProgressPaint);
- // 绘制进度条
- canvas.drawArc(mProgressRect, mStartAngle, mCurrentAngle, mUseCenter,
- mProgressPaint);
- // 绘制字体
- if (mShowText) {
- String text = formatProgress(mCurrentAngle / 360f * mMaxProgress);
- mTextPaint.getTextBounds(text, 0, text.length(), mTextBounds);
- canvas.drawText(text, (getWidth() - mTextBounds.width()) >> 1,
- (getHeight() >> 1) + (mTextBounds.height() >> 1),
- mTextPaint);
- }
- // 如果当前进度不等于目标进度,继续绘制
- if (mCurrentAngle != mTargetAngle) {
- invalidate();
- }
- }
3.2 onMeasure()方法
该方法主要是计算控件所需空间,以及确定进度环绘制的位置。这里的计算凡是除以2的,我都用的位运算替代,因为这个比除法快多了,不过不知道是否有隐患,知道的高手希望能解答一下。
- <span style="white-space:pre"> </span>@Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- /* 计算控件宽度与高度 */
- int widthMode = MeasureSpec.getMode(widthMeasureSpec);
- int widthSize = MeasureSpec.getSize(widthMeasureSpec);
- int heightMode = MeasureSpec.getMode(heightMeasureSpec);
- int heightSize = MeasureSpec.getSize(heightMeasureSpec);
- int width;
- int height;
- if (widthMode == MeasureSpec.EXACTLY) {
- width = widthSize;
- } else {
- int desired = (int) (getPaddingLeft()
- + DimenUtils.dip2px(mContext, MIN_WIDTH) + getPaddingRight());
- width = desired;
- }
- if (heightMode == MeasureSpec.EXACTLY) {
- height = heightSize;
- } else {
- int desired = (int) (getPaddingTop()
- + DimenUtils.dip2px(mContext, MIN_HEIGHT) + getPaddingBottom());
- height = desired;
- }
- setMeasuredDimension(width, height);
- /* 计算进度显示的矩形框 */
- float radius = width > height ? height >> 1 : width >> 1;
- float maxStrokeWidth = mProgressStrokeWidth > mSProgressStrokeWidth ? mProgressStrokeWidth
- : mSProgressStrokeWidth;
- radius = radius - getMaxPadding() - maxStrokeWidth;
- int centerX = width >> 1;
- int centerY = height >> 1;
- mProgressRect.set(centerX - radius, centerY - radius, centerX + radius,
- centerY + radius);
- mSProgressRect = new RectF(mProgressRect);
3.3 控件属性定义
- <resources>
- <declare-styleable name="CircleSeekBar">
- <attr name="mode">
- <enum name="stroke" value="0" />
- <enum name="fill" value="1" />
- <enum name="fill_and_stroke" value="2" />
- </attr>
- <attr name="showText" format="boolean" />
- <attr name="startAngle" format="float" />
- <attr name="textSize" format="dimension" />
- <attr name="textColor" format="color" />
- <attr name="progressWidth" format="dimension" />
- <attr name="progressColor" format="color" />
- <attr name="sProgressWidth" format="dimension" />
- <attr name="sProgressColor" format="color" />
- <attr name="progress" format="float" />
- <attr name="maxProgress" format="float" />
- <attr name="velocity" format="float" />
- <attr name="fadeEnable" format="boolean" />
- <attr name="startAlpha" format="integer" />
- <attr name="endAlpha" format="integer" />
- <attr name="zoomEnable" format="boolean" />
- </declare-styleable>
- </resources>
3.4总结
Android原生控件虽然少,但魅力就在可以随心所欲制定自己想要的控件和样式。这个方法里其实最重要的也就是onDraw和onMeasure方法,加起来一百来行代码,实现的效果感觉还不错。另外对控件有什么疑问或者是觉得可以改进和增加的效果,可以评论我哦。如果想要自己动手,也可以去git上挥洒你的代码。希望大家相互学习支持,让Android学习更加有趣。最后附上完整代码。
- public class CircleSeekBar extends View {
- /* 最小宽度,单位为dp */
- private static int MIN_WIDTH = 50;
- /* 最小高度,单位为dp */
- private static int MIN_HEIGHT = 50;
- /* 默认模式 */
- public static int MODE_DEFAULT = 0;
- /* 笔画模式 */
- public static int MODE_STROKE = 0;
- /* 填充模式 */
- public static int MODE_FILL = 1;
- /* 笔画&填充模式 */
- public static int MODE_FILL_AND_STROKE = 2;
- /* 进度格式化默认值 */
- private static String PROGRESS_FORMAT_DEFAULT = "##0.0";
- /* 进度默认最大值 */
- private static float MAX_PROGRESS_DEFAULT = 100f;
- /* 开始位置角度默认值 */
- private static final float START_ANGLE_DEFAULT = 0f;
- /* 刷新滑动速度默认值 */
- private static final float VELOCITY_DEFAULT = 3.0f;
- /* 文字大小默认值,单位为sp */
- private static final float TEXT_SIZE_DEFAULT = 10.0f;
- /* 默认文字颜色 */
- private static final int TEXT_COLOR_DEFAULT = 0xffbf5252;
- /* 进度条边框宽度默认值,单位为dp */
- private static final float PROGRESS_WIDTH_DEFAULT = 5.0f;
- /* 默认进度颜色 */
- private static final int PROGRESS_COLOR_DEFAULT = 0xff3d85c6;
- /* 进度条底色默认值,单位为dp */
- private static final float S_PROGRESS_WIDTH_DEFAULT = 2.0f;
- /* 默认进度颜色 */
- private static final int S_PROGRESS_COLOR_DEFAULT = 0xffdddddd;
- private Context mContext;
- private Paint mPaint;
- private Paint mTextPaint;
- private Paint mProgressPaint;
- private Paint mSProgressPaint;
- private int mMode; // 进度模式
- private float mMaxProgress; // 最大进度
- private boolean mShowText; // 是否显示文字
- private float mStartAngle; // 起始角度
- private float mVelocity; // 速度
- private float mTextSize; // 字体大小
- private int mTextColor; // 字体颜色
- private float mProgressStrokeWidth; // 进度条宽度
- private int mProgressColor; // 进度颜色
- private float mSProgressStrokeWidth; // 二级进度宽度
- private int mSProgressColor; // 二级进度颜色
- private boolean mFadeEnable; // 是否开启淡入淡出效果
- private int mStartAlpha; // 开始透明度,0~255
- private int mEndAlpha; // 结束透明度,0~255
- private boolean mZoomEnable; // 二级进度缩放
- private RectF mProgressRect;
- private RectF mSProgressRect;
- private Rect mTextBounds;
- private float mCurrentAngle; // 当前角度
- private float mTargetAngle; // 目标角度
- private boolean mUseCenter; // 是否从中心绘制
- private DecimalFormat mFormat; // 格式化数值
- public CircleSeekBar(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public CircleSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- mContext = context;
- init(attrs);
- }
- private void init(AttributeSet attrs) {
- if (attrs != null) {
- TypedArray type = mContext.obtainStyledAttributes(attrs,
- R.styleable.CircleSeekBar);
- mMode = type.getInt(R.styleable.CircleSeekBar_mode, MODE_DEFAULT);
- mMaxProgress = type.getFloat(R.styleable.CircleSeekBar_maxProgress,
- MAX_PROGRESS_DEFAULT);
- mShowText = type.getBoolean(R.styleable.CircleSeekBar_showText,
- true);
- mStartAngle = type.getFloat(R.styleable.CircleSeekBar_startAngle,
- START_ANGLE_DEFAULT);
- mVelocity = type.getFloat(R.styleable.CircleSeekBar_velocity,
- VELOCITY_DEFAULT);
- mTextSize = type.getDimension(R.styleable.CircleSeekBar_textSize,
- DimenUtils.dip2px(mContext, TEXT_SIZE_DEFAULT));
- mTextColor = type.getColor(R.styleable.CircleSeekBar_textColor,
- TEXT_COLOR_DEFAULT);
- mProgressStrokeWidth = type.getDimension(
- R.styleable.CircleSeekBar_progressWidth,
- DimenUtils.dip2px(mContext, PROGRESS_WIDTH_DEFAULT));
- mProgressColor = type.getColor(
- R.styleable.CircleSeekBar_progressColor,
- PROGRESS_COLOR_DEFAULT);
- mSProgressStrokeWidth = type.getDimension(
- R.styleable.CircleSeekBar_sProgressWidth,
- DimenUtils.dip2px(mContext, S_PROGRESS_WIDTH_DEFAULT));
- mSProgressColor = type.getColor(
- R.styleable.CircleSeekBar_sProgressColor,
- S_PROGRESS_COLOR_DEFAULT);
- mFadeEnable = type.getBoolean(R.styleable.CircleSeekBar_fadeEnable,
- false);
- mStartAlpha = type
- .getInt(R.styleable.CircleSeekBar_startAlpha, 255);
- mEndAlpha = type.getInt(R.styleable.CircleSeekBar_endAlpha, 255);
- mZoomEnable = type.getBoolean(R.styleable.CircleSeekBar_zoomEnable,
- false);
- float progress = type.getFloat(R.styleable.CircleSeekBar_progress,
- 0);
- progress = progress > mMaxProgress || progress < 0f ? 0f : progress;
- mTargetAngle = progress / mMaxProgress * 360f;
- mCurrentAngle = mTargetAngle;
- type.recycle();
- } else {
- mMode = MODE_DEFAULT;
- mMaxProgress = MAX_PROGRESS_DEFAULT;
- mStartAngle = START_ANGLE_DEFAULT;
- mVelocity = VELOCITY_DEFAULT;
- mTextSize = TEXT_SIZE_DEFAULT;
- mTextColor = TEXT_COLOR_DEFAULT;
- mProgressStrokeWidth = PROGRESS_WIDTH_DEFAULT;
- mProgressColor = PROGRESS_COLOR_DEFAULT;
- mSProgressStrokeWidth = S_PROGRESS_WIDTH_DEFAULT;
- mSProgressColor = S_PROGRESS_COLOR_DEFAULT;
- mTargetAngle = 0f;
- mCurrentAngle = 0f;
- mStartAlpha = 255;
- mEndAlpha = 255;
- mZoomEnable = false;
- }
- mPaint = new Paint();
- mPaint.setAntiAlias(true);
- mTextPaint = new Paint(mPaint);
- mTextPaint.setColor(mTextColor);
- mTextPaint.setTextSize(mTextSize);
- mProgressPaint = new Paint(mPaint);
- mProgressPaint.setColor(mProgressColor);
- mProgressPaint.setStrokeWidth(mProgressStrokeWidth);
- mSProgressPaint = new Paint(mProgressPaint);
- mSProgressPaint.setColor(mSProgressColor);
- mSProgressPaint.setStrokeWidth(mSProgressStrokeWidth);
- if (mMode == MODE_FILL_AND_STROKE) {
- mProgressPaint.setStyle(Style.FILL);
- mSProgressPaint.setStyle(Style.FILL_AND_STROKE);
- mUseCenter = true;
- } else if (mMode == MODE_FILL) {
- mProgressPaint.setStyle(Style.FILL);
- mSProgressPaint.setStyle(Style.FILL);
- mUseCenter = true;
- } else {
- mProgressPaint.setStyle(Style.STROKE);
- mSProgressPaint.setStyle(Style.STROKE);
- mUseCenter = false;
- }
- mProgressRect = new RectF();
- mTextBounds = new Rect();
- mFormat = new DecimalFormat(PROGRESS_FORMAT_DEFAULT);
- }
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- /* 计算控件宽度与高度 */
- int widthMode = MeasureSpec.getMode(widthMeasureSpec);
- int widthSize = MeasureSpec.getSize(widthMeasureSpec);
- int heightMode = MeasureSpec.getMode(heightMeasureSpec);
- int heightSize = MeasureSpec.getSize(heightMeasureSpec);
- int width;
- int height;
- if (widthMode == MeasureSpec.EXACTLY) {
- width = widthSize;
- } else {
- int desired = (int) (getPaddingLeft()
- + DimenUtils.dip2px(mContext, MIN_WIDTH) + getPaddingRight());
- width = desired;
- }
- if (heightMode == MeasureSpec.EXACTLY) {
- height = heightSize;
- } else {
- int desired = (int) (getPaddingTop()
- + DimenUtils.dip2px(mContext, MIN_HEIGHT) + getPaddingBottom());
- height = desired;
- }
- setMeasuredDimension(width, height);
- /* 计算进度显示的矩形框 */
- float radius = width > height ? height >> 1 : width >> 1;
- float maxStrokeWidth = mProgressStrokeWidth > mSProgressStrokeWidth ? mProgressStrokeWidth
- : mSProgressStrokeWidth;
- radius = radius - getMaxPadding() - maxStrokeWidth;
- int centerX = width >> 1;
- int centerY = height >> 1;
- mProgressRect.set(centerX - radius, centerY - radius, centerX + radius,
- centerY + radius);
- mSProgressRect = new RectF(mProgressRect);
- }
- @Override
- protected void onDraw(Canvas canvas) {
- // 判断当前角度偏移方向
- if (mCurrentAngle > mTargetAngle) {
- mCurrentAngle = mCurrentAngle - mVelocity;
- if (mCurrentAngle < mTargetAngle) {
- mCurrentAngle = mTargetAngle;
- }
- } else if (mCurrentAngle < mTargetAngle) {
- mCurrentAngle = mCurrentAngle + mVelocity;
- if (mCurrentAngle > mTargetAngle) {
- mCurrentAngle = mTargetAngle;
- }
- }
- float ratio = mCurrentAngle / 360f;
- // 设置透明度
- if (mFadeEnable) {
- int alpha = (int) ((mEndAlpha - mStartAlpha) * ratio);
- mProgressPaint.setAlpha(alpha);
- }
- // 设置二级进度缩放效果
- if (mZoomEnable) {
- zoomSProgressRect(ratio);
- }
- // 绘制二级进度条
- canvas.drawArc(mSProgressRect, 0, 360f, false, mSProgressPaint);
- // 绘制进度条
- canvas.drawArc(mProgressRect, mStartAngle, mCurrentAngle, mUseCenter,
- mProgressPaint);
- // 绘制字体
- if (mShowText) {
- String text = formatProgress(mCurrentAngle / 360f * mMaxProgress);
- mTextPaint.getTextBounds(text, 0, text.length(), mTextBounds);
- canvas.drawText(text, (getWidth() - mTextBounds.width()) >> 1,
- (getHeight() >> 1) + (mTextBounds.height() >> 1),
- mTextPaint);
- }
- // 如果当前进度不等于目标进度,继续绘制
- if (mCurrentAngle != mTargetAngle) {
- invalidate();
- }
- }
- /**
- * 格式化进度
- *
- * @param progress
- * @return
- */
- private String formatProgress(float progress) {
- return mFormat.format(progress);
- }
- /**
- * 获取内边距最大值
- *
- * @return
- */
- private int getMaxPadding() {
- int maxPadding = getPaddingLeft();
- int paddingRight = getPaddingRight();
- int paddingTop = getPaddingTop();
- int paddingBottom = getPaddingBottom();
- if (maxPadding < paddingRight) {
- maxPadding = paddingRight;
- }
- if (maxPadding < paddingTop) {
- maxPadding = paddingTop;
- }
- if (maxPadding < paddingBottom) {
- maxPadding = paddingBottom;
- }
- return maxPadding;
- }
- /**
- * 缩放二级进度条
- *
- * @param ratio
- */
- private void zoomSProgressRect(float ratio) {
- float width = mProgressRect.width();
- float height = mProgressRect.height();
- float centerX = mProgressRect.centerX();
- float centerY = mProgressRect.centerY();
- float offsetX = width * 0.5f * ratio;
- float offsetY = height * 0.5f * ratio;
- float left = centerX - offsetX;
- float right = centerX + offsetX;
- float top = centerY - offsetY;
- float bottom = centerY + offsetY;
- mSProgressRect.set(left, top, right, bottom);
- }
- @Override
- protected void onDisplayHint(int hint) {
- if (hint == View.VISIBLE) {
- mCurrentAngle = 0;
- invalidate();
- }
- super.onDisplayHint(hint);
- }
- /**
- * 设置目标进度
- *
- * @param progress
- */
- public void setProgress(float progress) {
- progress = progress > mMaxProgress || progress < 0f ? 0f : progress;
- mTargetAngle = progress / mMaxProgress * 360f;
- postInvalidate();
- }
- /**
- * 设置目标进度
- *
- * @param progress
- * 进度值
- * @param isAnim
- * 是否有动画
- */
- public void setProgressWithAnim(float progress, boolean isAnim) {
- if (isAnim) {
- setProgress(progress);
- } else {
- progress = progress > mMaxProgress || progress < 0f ? 0f : progress;
- mCurrentAngle = progress / mMaxProgress * 360f;
- mTargetAngle = mCurrentAngle;
- postInvalidate();
- }
- }
- /**
- * 设置进度画笔着色方式
- *
- * @param shader
- */
- public void setProgressShader(Shader shader) {
- this.mProgressPaint.setShader(shader);
- invalidate();
- }
- /**
- * 设置二级进度画笔着色方式
- *
- * @param shader
- */
- public void setSProgressShader(Shader shader) {
- this.mSProgressPaint.setShader(shader);
- invalidate();
- }
- public void setMaxProgress(float max) {
- this.mMaxProgress = max;
- }
- public float getMaxProgress() {
- return mMaxProgress;
- }
- public int getMode() {
- return mMode;
- }
- public void setMode(int mMode) {
- this.mMode = mMode;
- }
- public float getStartAngle() {
- return mStartAngle;
- }
- public void setStartAngle(float mStartAngle) {
- this.mStartAngle = mStartAngle;
- }
- public float getVelocity() {
- return mVelocity;
- }
- public void setVelocity(float mVelocity) {
- this.mVelocity = mVelocity;
- }
- public float getTextSize() {
- return mTextSize;
- }
- public void setTextSize(float mTextSize) {
- this.mTextSize = mTextSize;
- }
- public int getTextColor() {
- return mTextColor;
- }
- public void setTextColor(int mTextColor) {
- this.mTextColor = mTextColor;
- }
- public float getProgressStrokeWidth() {
- return mProgressStrokeWidth;
- }
- public void setProgressStrokeWidth(float mProgressStrokeWidth) {
- this.mProgressStrokeWidth = mProgressStrokeWidth;
- }
- public int getProgressColor() {
- return mProgressColor;
- }
- public void setProgressColor(int mProgressColor) {
- this.mProgressColor = mProgressColor;
- }
- public float getSProgressStrokeWidth() {
- return mSProgressStrokeWidth;
- }
- public void setSProgressStrokeWidth(float mSProgressStrokeWidth) {
- this.mSProgressStrokeWidth = mSProgressStrokeWidth;
- }
- public int getSProgressColor() {
- return mSProgressColor;
- }
- public void setSProgressColor(int mSProgressColor) {
- this.mSProgressColor = mSProgressColor;
- }
- public boolean isFadeEnable() {
- return mFadeEnable;
- }
- public void setFadeEnable(boolean mFadeEnable) {
- this.mFadeEnable = mFadeEnable;
- }
- public int getStartAlpha() {
- return mStartAlpha;
- }
- public void setStartAlpha(int mStartAlpha) {
- this.mStartAlpha = mStartAlpha;
- }
- public int getEndAlpha() {
- return mEndAlpha;
- }
- public void setEndAlpha(int mEndAlpha) {
- this.mEndAlpha = mEndAlpha;
- }
- public boolean isZoomEnable() {
- return mZoomEnable;
- }
- public void setZoomEnable(boolean mZoomEnable) {
- this.mZoomEnable = mZoomEnable;
- }
- }