仿微博头像转圈加载
先来看一下效果图吧
2018-01-31-20-24-45.gif
我们在自定义一个控件的时候首先要分析它的结构。
可以看出一共有四部分四个圆弧，两个线条圆弧，两个点状圆弧绘画的步骤分别是
0-360度
1.从0点开始，角度从360度到0度的一个线条圆
2.一小段一小段的弧线，然后让画布旋转绘制成圆弧。
360-720度
3.从0点开始角度从0-360度的一个线条圆
4.一小段一小段的弧线，然后让画布旋转绘制成圆弧。
首先我们自定义一个控件，需要我们先分析它的属性，然后定义自定义属性：
- mStartColor 开始的颜色（因为是渐变样式）
- mEndColor 结束的颜色（因为是渐变样式）
- mArcRadian 一小段弧线的弧度
- mArcWidth 画弧线的宽度
- mArcSpacing 每一段弧线的距离
在values下创建attrs.xml文件
<resources>
<declare-styleable name="LoradingHeard">
<attr name="circleStartColor" format="color|reference"/>
<attr name="circleEndColor" format="color|reference"/>
<attr name="circleArcWidth" format="integer|reference"/>
<attr name="circleArcRadian" format="integer|reference"/>
<attr name="circleArcSpacing" format="integer|reference"/>
</declare-styleable>
</resources>
declare-styleable： 表示一个属性组。它的name必须和你自定义view的名字相同。
获取自定义属性的方法我们可以通过
getContext().obtainStyledAttributes()获取TypedArray，
通过TypedArray来获取自定义属性的值，获取完成之后，我们必须要用typedArray 的recycle（）的方法将 TypedArray 回收。
mStartColor = typedArray.getColor(R.styleable.LoradingHeard_circleStartColor,
ContextCompat.getColor(context, R.color.colorPrimary));
mEndColor = typedArray.getColor(R.styleable.LoradingHeard_circleEndColor,
ContextCompat.getColor(context, R.color.colorPrimaryDark));
mArcSpacing = typedArray.getInteger(R.styleable.LoradingHeard_circleArcSpacing, 10);
mArcRadian = typedArray.getInteger(R.styleable.LoradingHeard_circleArcRadian, 5);
mArcWidth = typedArray.getInteger(R.styleable.LoradingHeard_circleArcWidth, 5);
typedArray.recycle();
我们可以看到在获取玩xml的自定义属性以后调用了recycle（），这个方法，那么为什么要调用这个方法？
首先我们来看一下typedArray的创建
@NonNull
TypedArray obtainStyledAttributes(@NonNull Resources.Theme wrapper,
AttributeSet set,
@StyleableRes int[] attrs,
@AttrRes int defStyleAttr,
@StyleRes int defStyleRes) {
synchronized (mKey) {
final int len = attrs.length;
final TypedArray array = TypedArray.obtain(wrapper.getResources(), len);
其他代码
return array;
}
}
可以看出来并不是实例化出来的，是调用了TypedArray的静态方法来获得typedArray的实例的。但是到这里还是没能解决我们的问题，那就接着往下看TypedArray.obtain的方法：
static TypedArray obtain(Resources res, int len) {
TypedArray attrs = res.mTypedArrayPool.acquire();
if (attrs == null) {
attrs = new TypedArray(res);
}
attrs.mRecycled = false;
// Reset the assets, which may have changed due to configuration changes
// or further resource loading.
attrs.mAssets = res.getAssets();
attrs.mMetrics = res.getDisplayMetrics();
attrs.resize(len);
return attrs;
}
我们发现内部是一个单利的形式，发现typedArray这个实例是从线程池里面获取的。这样我们是不是就知道了，其实程序在运行时维护了一个 TypedArray的池，需要的时候我们会向线程池请求实例，用完后调用recycle（）方法释放这个实例，从而让其可以被复用，而不是重新创建，这样就减少了系统频繁创建array，导致oom。
Shader
从效果图中可以看出来整个线条圆是分为渐变的颜色。
如果想画出渐变的效果我们可以用这个类 Shader，它有五个子类
- BitmapShader ： 位图绘制时纹理的着色器
- ComposeShader ：组合着色器
- LinearGradient ：线性渐变着色器（我们要用到这个）
- RadialGradient ： 径向渐变着色器
- SweepGradient ：绕着一个中心点进行扫描的渐变着色器
一般用再paint.setShader(shader)中，shader是一个Shader对象。
LiearGradient
LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)
- x0表示渐变的起始点x坐标
- y0表示渐变的起始点y坐标
- x1表示渐变的终点x坐标
- y1表示渐变的终点y坐标
- color0表示渐变开始颜色
- color1表示渐变结束颜色
- tile表示平铺模式
Shader shader = new LinearGradient(0f, 0f, mWidth, mHeight,
mStartColor, mEndColor, Shader.TileMode.CLAMP);
paint.setShader(shader);
现在我们的所有准备活动都准备完毕，那就开始画吧上核心代码
A:第一个圆弧从0点开始，角度从360度到0度
if (maxAngle <= 360) {
float angle = 0;
canvas.rotate(mRatio * maxAngle / 360, mWidth / 2, mHeight / 2);
canvas.drawArc(mRectF, maxAngle, 360 - maxAngle, false, paint);
B:一小段弧线，然后让画布旋转360度
while (angle <= maxAngle) {
float length = mArcRadian * angle / maxAngle;
canvas.drawArc(mRectF, 0, length, false, paint);
canvas.rotate(mArcSpacing, mWidth / 2, mHeight / 2);
angle += mArcSpacing;
}
C::第一个圆弧从0点开始，角度从度到0度360度。
} else {
float angle = 0;
canvas.rotate(mRatio + mRatio * (maxAngle - 360) / 360, mWidth / 2, mHeight / 2);
canvas.drawArc(mRectF, 0, maxAngle - 360, false, paint);
canvas.rotate(maxAngle - 360, mWidth / 2, mHeight / 2);
D:一小段弧线，然后让画布旋转360度
while (angle <= 720 - maxAngle) {
float length = mArcRadian * angle / (720 - maxAngle);
canvas.drawArc(mRectF, 0, length, false, paint);
canvas.rotate(mArcSpacing, mWidth / 2, mHeight / 2);
angle += mArcSpacing;
}
}
E:刷新数据进行更新绘制
if (maxAngle <= 720) {
maxAngle += mArcSpacing;
postInvalidateDelayed(30);
}
