这里有新鲜出炉的精品教程,程序狗速度看过来!
Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用“安卓”或“安致”。
这篇文章主要为大家详细介绍了Android自定义View仿华为圆形加载进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
View仿华为圆形加载进度条效果图
实现思路
可以看出该View可分为三个部分来实现
最外围的圆,该部分需要区分进度圆和底部的刻度圆,进度部分的刻度需要和底色刻度区分开来
中间显示的文字进度,需要让文字在View中居中显示
旋转的小圆点,小圆点需要模拟小球下落运动时的加速度效果,开始下落的时候慢,到最底部时最快,上来时速度再逐渐减慢
具体实现
先具体细分讲解,博客最后面给出全部源码
(1)首先为View创建自定义的xml属性
在工程的values目录下新建attrs.xml文件
- <resources>
- <!-- 仿华为圆形加载进度条 -->
- <declare-styleable name="CircleLoading">
- <attr name="indexColor" format="color" />
- <attr name="baseColor" format="color" />
- <attr name="dotColor" format="color" />
- <attr name="textSize" format="dimension" />
- <attr name="textColor" format="color" />
- </declare-styleable>
- </resources>
各个属性的作用:
indexColor:进度圆的颜色
baseColor:刻度圆底色
dotColor:小圆点颜色
textSize:文字大小
textColor:文字颜色
(2)新建CircleLoadingView类继承View类,重写它的三个构造方法,获取用户设置的属性,同时指定默认值
- public CircleLoadingView(Context context) {
- this(context, null);
- }
- public CircleLoadingView(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public CircleLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- // 获取用户配置属性
- TypedArray tya = context.obtainStyledAttributes(attrs, R.styleable.CircleLoading);
- baseColor = tya.getColor(R.styleable.CircleLoading_baseColor, Color.LTGRAY);
- indexColor = tya.getColor(R.styleable.CircleLoading_indexColor, Color.BLUE);
- textColor = tya.getColor(R.styleable.CircleLoading_textColor, Color.BLUE);
- dotColor = tya.getColor(R.styleable.CircleLoading_dotColor, Color.RED);
- textSize = tya.getDimensionPixelSize(R.styleable.CircleLoading_textSize, 36);
- tya.recycle();
- initUI();
- }
我们从View绘制的第一步开始
(3)测量onMeasure,首先需要测量出View的宽和高,并指定View在wrap_content时的最小范围,对于View绘制流程还不熟悉的同学,可以先去了解下具体的绘制流程
浅谈Android View绘制三大流程探索及常见问题
重写onMeasure方法,其中我们要考虑当View的宽高被指定为wrap_content时的情况,如果我们不对wrap_content的情况进行处理,那么当使用者指定View的宽高为wrap_content时将无法正常显示出View
- @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- int myWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
- int myWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
- int myHeightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
- int myHeightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
- // 获取宽
- if (myWidthSpecMode == MeasureSpec.EXACTLY) {
- // match_parent/精确值
- mWidth = myWidthSpecSize;
- } else {
- // wrap_content
- mWidth = DensityUtil.dip2px(mContext, 120);
- }
- // 获取高
- if (myHeightSpecMode == MeasureSpec.EXACTLY) {
- // match_parent/精确值
- mHeight = myHeightSpecSize;
- } else {
- // wrap_content
- mHeight = DensityUtil.dip2px(mContext, 120);
- }
- // 设置该view的宽高
- setMeasuredDimension(mWidth, mHeight);
- }
MeasureSpec的状态分为三种EXACTLY、AT_MOST、UNSPECIFIED,这里只要单独指定非精确值EXACTLY之外的情况就好了。
本文中使用到的DensityUtil类,是为了将dp转换为px来使用,以便适配不同的屏幕显示效果
- public static int dip2px(Context context, float dpValue) {
- final float scale = context.getResources().getDisplayMetrics().density;
- return (int)(dpValue * scale + 0.5f);
- }
(4)重写onDraw,绘制需要显示的内容
因为做的是单纯的View而不是ViewGroup,内部没有子控件需要确定位置,所以可直接跳过onLayout方法,直接开始对View进行绘制
分为三个部分绘制,绘制刻度圆,绘制文字值,绘制旋转小圆点
- @Override
- protected void onDraw(Canvas canvas) {
- drawArcScale(canvas);
- drawTextValue(canvas);
- drawRotateDot(canvas);
- }
绘制刻度圆
先画一个小竖线,通过canvas.rotate()方法每次旋转3.6度(总共360度,用100/360=3.6)得到一个刻度为100的圆,然后通过progress参数,得到要显示的进度数,并把小于progress的刻度变成进度圆的颜色
- /**
- * 画刻度
- */
- private void drawArcScale(Canvas canvas) {
- canvas.save();
- for (int i = 0; i < 100; i++) {
- if (progress > i) {
- mScalePaint.setColor(indexColor);
- } else {
- mScalePaint.setColor(baseColor);
- }
- canvas.drawLine(mWidth / 2, 0, mHeight / 2, DensityUtil.dip2px(mContext, 10), mScalePaint);
- // 旋转的度数 = 100 / 360
- canvas.rotate(3.6f, mWidth / 2, mHeight / 2);
- }
- canvas.restore();
- }
绘制中间文字
文字绘制的坐标是以文字的左下角开始绘制的,所以需要先通过把文字装载到一个矩形Rect,通过画笔的getTextBounds方法取得字符串的长度和宽度,通过动态计算,来使文字居中显示
- /**
- * 画内部数值
- */
- private void drawTextValue(Canvas canvas) {
- canvas.save();
- String showValue = String.valueOf(progress);
- Rect textBound = new Rect();
- mTextPaint.getTextBounds(showValue, 0, showValue.length(), textBound); // 获取文字的矩形范围
- float textWidth = textBound.right - textBound.left; // 获得文字宽
- float textHeight = textBound.bottom - textBound.top; // 获得文字高
- canvas.drawText(showValue, mWidth / 2 - textWidth / 2, mHeight / 2 + textHeight / 2, mTextPaint);
- canvas.restore();
- }
绘制旋转小圆点
这个小圆点就是简单的绘制一个填充的圆形就好
- /**
- * 画旋转小圆点
- */
- private void drawRotateDot(final Canvas canvas) {
- canvas.save();
- canvas.rotate(mDotProgress * 3.6f, mWidth / 2, mHeight / 2);
- canvas.drawCircle(mWidth / 2, DensityUtil.dip2px(mContext, 10) + DensityUtil.dip2px(mContext, 5), DensityUtil.dip2px(mContext, 3), mDotPaint);
- canvas.restore();
- }
让它自己动起来可以通过两种方式,一种是开一个线程,在线程中改变mDotProgress的数值,并通过postInvalidate方法跨线程刷新View的显示效果
- new Thread() {
- @Override
- public void run() {
- while (true) {
- mDotProgress++;
- if (mDotProgress == 100) {
- mDotProgress = 0;
- }
- postInvalidate();
- try {
- Thread.sleep(50);
- } catch (InterruptedException e) {
- e.printStackTrace();
- }
- }
- }
- }.start();
开线程的方式不推荐使用,这是没必要的开销,而且线程不好控制,要实现让小圆点在运行过程中开始和结束时慢,运动到中间时加快这种效果不好实现,所以最好的方式是使用属性动画,需要让小圆点动起来时,调用以下方法就好了
- /**
- * 启动小圆点旋转动画
- */
- public void startDotAnimator() {
- animator = ValueAnimator.ofFloat(0, 100);
- animator.setDuration(1500);
- animator.setRepeatCount(ValueAnimator.INFINITE);
- animator.setRepeatMode(ValueAnimator.RESTART);
- animator.setInterpolator(new AccelerateDecelerateInterpolator());
- animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
- @Override
- public void onAnimationUpdate(ValueAnimator animation) {
- // 设置小圆点的进度,并通知界面重绘
- mDotProgress = (Float) animation.getAnimatedValue();
- invalidate();
- }
- });
- animator.start();
- }
在属性动画中可以通过setInterpolator方法指定不同的插值器,这里要模拟小球掉下来的重力效果,所以需要使用AccelerateDecelerateInterpolator插值类,该类的效果就是在动画开始时和结束时变慢,中间加快
(5)设置当前进度值
对外提供一个方法,用来更新当前圆的进度
- /**
- * 设置进度
- */
- public void setProgress(int progress) {
- this.progress = progress;
- invalidate();
- }
通过外部调用setProgress方法就可以跟更新当前圆的进度了
源码
- /**
- * 仿华为圆形加载进度条
- * Created by zhuwentao on 2017-08-19.
- */
- public class CircleLoadingView extends View {
- private Context mContext;
- // 刻度画笔
- private Paint mScalePaint;
- // 小原点画笔
- private Paint mDotPaint;
- // 文字画笔
- private Paint mTextPaint;
- // 当前进度
- private int progress = 0;
- /**
- * 小圆点的当前进度
- */
- public float mDotProgress;
- // View宽
- private int mWidth;
- // View高
- private int mHeight;
- private int indexColor;
- private int baseColor;
- private int dotColor;
- private int textSize;
- private int textColor;
- private ValueAnimator animator;
- public CircleLoadingView(Context context) {
- this(context, null);
- }
- public CircleLoadingView(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public CircleLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- // 获取用户配置属性
- TypedArray tya = context.obtainStyledAttributes(attrs, R.styleable.CircleLoading);
- baseColor = tya.getColor(R.styleable.CircleLoading_baseColor, Color.LTGRAY);
- indexColor = tya.getColor(R.styleable.CircleLoading_indexColor, Color.BLUE);
- textColor = tya.getColor(R.styleable.CircleLoading_textColor, Color.BLUE);
- dotColor = tya.getColor(R.styleable.CircleLoading_dotColor, Color.RED);
- textSize = tya.getDimensionPixelSize(R.styleable.CircleLoading_textSize, 36);
- tya.recycle();
- initUI();
- }
- private void initUI() {
- mContext = getContext();
- // 刻度画笔
- mScalePaint = new Paint();
- mScalePaint.setAntiAlias(true);
- mScalePaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
- mScalePaint.setStrokeCap(Paint.Cap.ROUND);
- mScalePaint.setColor(baseColor);
- mScalePaint.setStyle(Paint.Style.STROKE);
- // 小圆点画笔
- mDotPaint = new Paint();
- mDotPaint.setAntiAlias(true);
- mDotPaint.setColor(dotColor);
- mDotPaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
- mDotPaint.setStyle(Paint.Style.FILL);
- // 文字画笔
- mTextPaint = new Paint();
- mTextPaint.setAntiAlias(true);
- mTextPaint.setColor(textColor);
- mTextPaint.setTextSize(textSize);
- mTextPaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
- mTextPaint.setStyle(Paint.Style.FILL);
- }
- @Override protected void onDraw(Canvas canvas) {
- drawArcScale(canvas);
- drawTextValue(canvas);
- drawRotateDot(canvas);
- }
- /**
- * 画刻度
- */
- private void drawArcScale(Canvas canvas) {
- canvas.save();
- for (int i = 0; i < 100; i++) {
- if (progress > i) {
- mScalePaint.setColor(indexColor);
- } else {
- mScalePaint.setColor(baseColor);
- }
- canvas.drawLine(mWidth / 2, 0, mHeight / 2, DensityUtil.dip2px(mContext, 10), mScalePaint);
- // 旋转的度数 = 100 / 360
- canvas.rotate(3.6f, mWidth / 2, mHeight / 2);
- }
- canvas.restore();
- }
- /**
- * 画内部数值
- */
- private void drawTextValue(Canvas canvas) {
- canvas.save();
- String showValue = String.valueOf(progress);
- Rect textBound = new Rect();
- mTextPaint.getTextBounds(showValue, 0, showValue.length(), textBound); // 获取文字的矩形范围
- float textWidth = textBound.right - textBound.left; // 获得文字宽
- float textHeight = textBound.bottom - textBound.top; // 获得文字高
- canvas.drawText(showValue, mWidth / 2 - textWidth / 2, mHeight / 2 + textHeight / 2, mTextPaint);
- canvas.restore();
- }
- /**
- * 画旋转小圆点
- */
- private void drawRotateDot(final Canvas canvas) {
- canvas.save();
- canvas.rotate(mDotProgress * 3.6f, mWidth / 2, mHeight / 2);
- canvas.drawCircle(mWidth / 2, DensityUtil.dip2px(mContext, 10) + DensityUtil.dip2px(mContext, 5), DensityUtil.dip2px(mContext, 3), mDotPaint);
- canvas.restore();
- }
- /**
- * 启动小圆点旋转动画
- */
- public void startDotAnimator() {
- animator = ValueAnimator.ofFloat(0, 100);
- animator.setDuration(1500);
- animator.setRepeatCount(ValueAnimator.INFINITE);
- animator.setRepeatMode(ValueAnimator.RESTART);
- animator.setInterpolator(new AccelerateDecelerateInterpolator());
- animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Override public void onAnimationUpdate(ValueAnimator animation) {
- // 设置小圆点的进度,并通知界面重绘
- mDotProgress = (Float) animation.getAnimatedValue();
- invalidate();
- }
- });
- animator.start();
- }
- /**
- * 设置进度
- */
- public void setProgress(int progress) {
- this.progress = progress;
- invalidate();
- }
- @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- int myWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
- int myWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
- int myHeightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
- int myHeightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
- // 获取宽
- if (myWidthSpecMode == MeasureSpec.EXACTLY) {
- // match_parent/精确值
- mWidth = myWidthSpecSize;
- } else {
- // wrap_content
- mWidth = DensityUtil.dip2px(mContext, 120);
- }
- // 获取高
- if (myHeightSpecMode == MeasureSpec.EXACTLY) {
- // match_parent/精确值
- mHeight = myHeightSpecSize;
- } else {
- // wrap_content
- mHeight = DensityUtil.dip2px(mContext, 120);
- }
- // 设置该view的宽高
- setMeasuredDimension(mWidth, mHeight);
- }
- }
总结
在的onDraw方法中需要避免频繁的new对象,所以把一些如初始化画笔Paint的方法放到了最前面的构造方法中进行。
在分多个模块绘制时,应该使用canvas.save()和canvas.restore()的组合,来避免不同模块绘制时的相互干扰,在这两个方法中绘制相当于PS中的图层概念,上一个图层进行的修改不会影响到下一个图层的显示效果。
在需要显示动画效果的地方使用属性动画来处理,可自定义的效果强,在系统提供的插值器类不够用的情况下,我么还可通过继承Animation类,重写它的applyTransformation方法来处理各种复杂的动画效果。
来源: http://www.phperz.com/article/17/0914/345707.html