空间 >博客>

原 Android自定义view之环形等待控件的实现

婷 发表于 昨天(15:20) (2015-10-14 15:20:21)  |  评论（0）  |  阅读次数（20）| 0 人收藏此文章,     

本篇博客参考鸿洋_大神的《Android 自定义View (三) 圆环交替 等待效果》

拖了这么久才开始更新csdn，着实是懒到家了，写这篇博客的目的就是为了帮助更多的android入门开发者更多的了解自定义控件，毕竟自定义控件对新手来说还是比较神秘的，多说无益，直接上图：

以上就是今天我们要实现的效果，乍一看是不是觉得高端大气上档次，完全没有什么头绪怎么去实现这么“高端”的东西。还会不定时的反问自己可以吗？对，你可以的。让我们一起来学习如何写这样的控件吧。

【前言】自定义view 的几个步骤

【正文】

项目结构图奉上：

我们先来分析一下这个控件。这个控件主要有两种颜色，加载的速度，圆环的宽度，好像也没有其他属性值了。

1.自定义属性：attrs.xml

<?xml version="1.0" encoding="utf-8"?> <resources> <attr format="color"/> <attr format="color"/> <attr format="dimension"/> <attr format="integer"/> <declare-styleable> <attr/> <attr/> <attr/> <attr/> </declare-styleable> </resources>

这里的format主要常见的有以下几种属性：reference 、color、boolean、dimension、float、integer、string、fraction、enum、flag。更多用法以及如何在初始化时获取相应的值，可以百度，这里不是我们的重点。

2.在构造方法中获取我们自定义的属性:CustomProgressbar.java

// 设置第一圈颜色 private int mFirstColor=Color.GREEN; // 设置第二圈颜色 private int mSecondColor=Color.RED; // 设置圈的宽度 private int mCircleWidth=20; // 设置颜色填充画笔 private Paint mPaint; // 设置当前进度 private int mProgress; // 设置当前进度加载速度 private int speed=20; // 是否开始下一个 private boolean isNext = false; public CustomProgressbar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CustomProgressbar(Context context) { this(context, null); } /** * 必要的初始化，获取一些自定义的值 * * @param context * @param attrs * @param defStyle */ public CustomProgressbar(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // 获取自定义的属性集合 TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressbar, defStyle, 0); // 获取自定义属性的个数 int n = array.getIndexCount(); Log.i("test", "自定义属性的个数：" + n); // 遍历属性值 for (int i = 0; i < n; i++) { int attr = array.getIndex(i); Log.i("test", "自定义的属性为:"+attr); switch (attr) { case R.styleable.CustomProgressbar_firstColor: // 获取第一圈颜色值 mFirstColor = array.getColor(attr, Color.GREEN); break; case R.styleable.CustomProgressbar_secondColor: // 获取第一圈颜色值 mSecondColor = array.getColor(attr, Color.RED); break; case R.styleable.CustomProgressbar_circleWidth: // 设置默认圈的宽度为20px mCircleWidth = array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics())); break; case R.styleable.CustomProgressbar_speed: // 获取默认加载速度 speed = array.getInt(attr, 20); break; } } // 回收 array.recycle(); mPaint = new Paint(); // 绘图线程 此线程为耗时线程，放在子线程中执行，防止主线程的卡顿 new Thread() { public void run() { while (true) { mProgress++; if (mProgress == 360) { mProgress = 0; // 如果没有开始下一个，则设置isNext为true if (!isNext) { isNext = true; } else { isNext = false; } } // 刷新UI // postInvalidate()此方法可以直接在UI线程调用，invalidate()则需要在handler中进行调用 postInvalidate(); try { Thread.sleep(speed); } catch (InterruptedException e) { e.printStackTrace(); } } } }.start(); }

很多童鞋肯定会问，为什么这个操作要放在thread里进行操作？重写view是一个耗时操作，所以我们这里就直接放在子线程里进行重绘了，防止程序卡死。还有一个需要注意的就是postInvalidate()方法。postInvalidate()此方法可以直接在UI线程调用，invalidate()则需要在handler中进行调用，想要了解更多的童鞋也可以自己百度两者之间的区别。

3.重写onMeasure方法：本例中没有用到重写onMeasure方法，此处就不贴代码了。

4.重写onDraw方法，进行view 的绘制：CustomProgressbar.java

@Override protected void onDraw(Canvas canvas) { // 获取圆心的x坐标 int center = getWidth() / 2; // 获取圆的半径 int radius = center - mCircleWidth / 2; // 设置填充的宽度 mPaint.setStrokeWidth(mCircleWidth); mPaint.setAntiAlias(true); // 设置填充的style mPaint.setStyle(Paint.Style.STROKE); // new RectF(left, top, right, bottom) 为距离x轴，y轴之间的距离 // 定义rect的形状 RectF f = new RectF(center - radius, center - radius, center + radius, center + radius); if (!isNext) { // 第一圈颜色完整，第二圈颜色跑 mPaint.setColor(mFirstColor);// 设置画笔颜色 // 画出圆环 canvas.drawCircle(center, center, radius, mPaint); // 设置圆环颜色 mPaint.setColor(mSecondColor); /* * public void drawArc(RectF oval, float startAngle, float sweepAngle, * boolean useCenter, Paint paint) oval :指定圆弧的外轮廓矩形区域。 startAngle: * 圆弧起始角度，单位为度。 sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。 useCenter: * 如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形。 paint: 绘制圆弧的画板属性，如颜色，是否填充等。 */ canvas.drawArc(f, -90, mProgress, false, mPaint); } else { // 第一圈颜色完整，第二圈颜色跑 mPaint.setColor(mSecondColor);// 设置画笔颜色 // 画出圆环 canvas.drawCircle(center, center, radius, mPaint); // 设置圆环颜色 mPaint.setColor(mFirstColor); /* * public void drawArc(RectF oval, float startAngle, float sweepAngle, * boolean useCenter, Paint paint) oval :指定圆弧的外轮廓矩形区域。 startAngle: * 圆弧起始角度，单位为度。 sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。 useCenter: * 如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形。 paint: 绘制圆弧的画板属性，如颜色，是否填充等。 */ canvas.drawArc(f, -90, mProgress, false, mPaint); } }

这里关于drawArc的方法，我已经加了详细的注释，不明白的同学可以自己百度一下。