@linux1s1s
2016-07-19T10:08:24.000000Z
字数 6676
阅读 2260
Fresco
2016-07
转载 作者:Desmond
首先介绍几种Fresco中的图像层次,了解它们会帮助你理解Fresco加载图像的原理。
如果你使用过Fresco这个强大的库之后,你就知道它可以在一个图像的加载、绘制过程中实现极大的定制化。你可以设置进度条来显示图片加载/下载的进度,可以设置占位图等到图片加载/下载成功后再显示目标图片,可以让在加载/下载失败后显示失败图片(更多功能参考Fresco中文文档)。Fresco将进度条、占位图、失败图都作为图像的一层视图来管理,这部分仅仅负责视图层次绘制,将负责视图功能部分与逻辑部分尽可能实现解耦。
Fresco中定义了许多Drawable,它们都直接或间接继承了Drawable
,但是各自的功能是不一样的。经过总结,我认为其中一共有三种功能的Drawable:层次型、容器型和视图型。直接上源码的一个视图例子就好理解了,作者进行了适当修改与翻译。
o 层次型Drawable(维持图层)
|
------ 容器型Drawable(可对内容进行缩放)
| |
| --- 视图型Drawable(存放占位图)
|
------ 容器型Drawable(可对内容进行缩放)
| |
| ----- 容器型Drawable(可多次设置内容)
| |
| --- 视图型Drawable(存放目标显示图片)
|
------ 容器型Drawable(可对内容进行缩放)
| |
| --- 视图型Drawable(存放重试图片)
|
------ 容器型Drawable(可对内容进行缩放)
|
--- 视图型Drawable(存放失败图片)
该例位于com.facebook.drawee.generic.GenericDraweeHierarchy
的类注释中。
这个例子充分描述了一个图像的层次,当然也可以在设置的时候往里面自行设置所需要的图层。
在这一节中介绍的Drawable并不直接负责具体图像绘制,而是负责组建图像层次。
ArrayDrawable
内部存储着一个Drawable数组,它与Android内置的LayerDrawable
很相似,可见它将数组中的Drawable
当做它的图层,在绘制的时候ArrayDrawable
会按照数组顺序绘制其中的图层,数组最后的成员会显示在最上方。不过与LayerDrawable
最大的不同的点有两处:
- 绘制顺序虽然是数组顺序,但是ArrayDrawable
在绘制时会跳过暂时不需要绘制的图层;
- 在ArrayDrawable
中不支持动态的添加/删除图层,只能在初始化时通过传入的数组决定图层数。不过好在它能够为存在的图层更换Drawable。(关于LayerDrawable
可以参考我翻译的一文章:Android LayerDrawable。)
FadeDrawable
继承了ArrayDrawable
。它除了具有ArrayDrawable
本身的功能之外,还提供隐藏/显示图层的功能(可设置渐变)。具体的几个核心函数有:
setTransitionDuration(int durationMs)
设置隐藏/显示图层渐变动画时间(默认为300ms)。fadeInLayer(int index)
显示指定图层fadeOutLayer(int index)
隐藏指定图层fadeInAllLayers()
显示所有图层fadeOutAllLayers()
隐藏所有图层fadeToLayer(int index)
显示指定图层同时隐藏其他图层fadeUpToLayer(int index)
隐藏数组下标<=index的图层它内部维护着一个boolean数组来维持需要显示的图层(可以调用isLayerOn(int inxex)
查看指定图层是否显示)。
ForwardingDrawable
ForwardingDrawable
通俗的来说就是图片容器。它内部维护一个Drawable
变量mCurrentDelegate
,将Drawable的基本函数以及一些回调函数传递给目标图片,并在draw(Canvas)
函数中调用mCurrentDeletate.draw(Canvas)
函数将目标图片绘制出来。
它可以通过getCurrent()
来获取容器内容,起到一个相当于是传递树的作用。它是所有容器型Drawable的基类,以下介绍几个它的子类,他们实现了不同功能的容器包装。
ScaleTypeDrawable
ScaleTypeDrawable
封装了对代理图片的缩放处理,具体的缩放参数(ScaleType
)与Android ScaleType的名字、功能相同。它在处理图片缩放的时候与ImageView
的处理方式相似,我们来看一下它是怎么处理的:
private void configureBoundsIfUnderlyingChanged() {
/* 当图像尺寸改变后,就重新确定图像边缘 */
if (mUnderlyingWidth != getCurrent().getIntrinsicWidth() ||
mUnderlyingHeight != getCurrent().getIntrinsicHeight()) {
configureBounds();
}
}
其中mUnderLyingWidth
与mUnderLyingHeight
维护了已知的上一张图片宽高(初始均为0),当要绘制时调用这个函数,如果与上一张绘制的图像不一样时,就重新确认绘制边缘与缩放矩阵。
再来看一下configureBounds()
是怎么确定转换矩阵的吧:
void configureBounds() {
...
// 特殊情况判断:绘制图片是否为空白图或与之前绘制的图片尺寸相同
...
// 当要往X、Y方向上填充容器时,直接将目标图片边界设置成容器图片的边界即可,Drawable会在绘制的时候自己调整。
if (mScaleType == ScalingUtils.ScaleType.FIT_XY) {
underlyingDrawable.setBounds(bounds);
mDrawMatrix = null;
return;
}
//处理其他缩放情况
underlyingDrawable.setBounds(0, 0, underlyingWidth, underlyingHeight);
ScalingUtils.getTransform(
mTempMatrix,
bounds,
underlyingWidth,
underlyingHeight,
(mFocusPoint != null) ? mFocusPoint.x : 0.5f,
(mFocusPoint != null) ? mFocusPoint.y : 0.5f,
mScaleType);
mDrawMatrix = mTempMatrix;
}
这里通过ScalingUtils.getTransform
来计算出变换矩阵,我们以CENTER_INSIDE
为例研究一下它的工作机制:
public static Matrix getTransform(
final Matrix transform,
final Rect parentBounds,
final int childWidth,
final int childHeight,
final float focusX,
final float focusY,
final ScaleType scaleType) {
...
final float scaleX = (float) parentWidth / (float) childWidth;
final float scaleY = (float) parentHeight / (float) childHeight;
...
switch(scaleType){
...
case CENTER_INSIDE:
//计算缩放倍数
scale = Math.min(Math.min(scaleX, scaleY), 1.0f);
//计算平移距离
dx = parentBounds.left + (parentWidth - childWidth * scale) * 0.5f;
dy = parentBounds.top + (parentHeight - childHeight * scale) * 0.5f;
//设置缩放矩阵
transform.setScale(scale, scale);
//设置评议距离
transform.postTranslate((int) (dx + 0.5f), (int) (dy + 0.5f));
break;
}
return transform;
}
其他具体的ScaleType
处理就不赘述了,有兴趣的同学可以自己看源码再研究。默认的ScaleType是CENTER_CROP。
在计算好矩阵之后,我们来看一下这个容器是怎么将它的内容绘制出来的:
public void draw(Canvas canvas) {
//计算矩阵
configureBoundsIfUnderlyingChanged();
if (mDrawMatrix != null) {
int saveCount = canvas.save();
canvas.clipRect(getBounds());
canvas.concat(mDrawMatrix);
super.draw(canvas);
canvas.restoreToCount(saveCount);
} else {
//无变换矩阵时,直接让Drawable绘制到确定的边缘中。
super.draw(canvas);
}
}
我们可以看到它将矩阵应用到Canvas
中,并调用ForwardingDrawable
的draw(Canvas)
让它将目标视图绘制出来,之后还原Canvas的缩放属性防止累加缩放。
暂时先介绍各类容器Drawable的功能,为方便后续理解。待分析完Fresco的架构之后再为分析。
大多数情况下,Fresco用于表现图片的视图型Drawable使用的就是Android原生Drawable
来做图像的载体。不过也有两个例外:
ProgressBarDrawable
ProgressBarDrawable
是负责绘制进度条的Drawable。它内部维持一个level
用来描述进度(0<=level<=10000),并自己实现了绘制过程,我们首先通过源码来看一下是怎么绘制的:
@Override
public void draw(Canvas canvas) {
if (mHideWhenZero && mLevel == 0) {
return;
}
drawBar(canvas, 10000, mBackgroundColor);
drawBar(canvas, mLevel, mColor);
}
private void drawBar(Canvas canvas, int level, int color) {
Rect bounds = getBounds();
int length = (bounds.width() - 2 * mPadding) * level / 10000;
int xpos = bounds.left + mPadding;
int ypos = bounds.bottom - mPadding - mBarWidth;
mPaint.setColor(color);
canvas.drawRect(xpos, ypos, xpos + length, ypos + mBarWidth, mPaint);
}
可以看出,它先将整个进度条填充满backgroundColor
颜色(可以通过setBackgroundColor
设置),再将进度覆盖区域矩形填充满color
颜色(可以通过setColor
设置)。
RoundedBitmapDrawable
这个Drawable与上面的容器型RoundedCornersDrawable
有几个区别:
RoundedBitmapDrawable
是将自身内容修剪成圆角矩形边绘制出来,并且可以使用Bitmap作为对象,返回一个BitmapDrawable
。而RoundedCornersDrawable
是将容器内容修剪成圆角矩形边,并且可以选择是否用指定颜色覆盖容器内容,可以使用任何Drawable当做容器。
待分析完Fresco的架构之后,会回来分析圆角图片的实现机制。它与正常的使用Xfermode实现方式不同。
实际上这两个类的功能是有一定重合的,我认为是由于RoundedCornerDrawable
目前只能做到用圆角矩形覆盖内容,而无法将内容修剪成圆角矩形,所以才使用了RoundedBitmapDrawable
。关于RoundedCornersDrawable
的功能Fresco也在改进中。期待后续它能将两个功能合并起来。
为什么说它们特殊呢,因为他们只是接口!
TransformAwareDrawable
要和TransfromCallback
一起使用。TransformAwareDrawable
的作用很简单,就是提供设置TransfromCallback
的回调函数,那我们来看看TransfromCallback
的作用是什么:
public interface TransformCallback {
// 获取已经应用在自身的变换Matrix,储存在transfrom中。
public void getTransform(Matrix transform);
// 获取根节点边界,储存在bounds中。
public void getRootBounds(RectF bounds);
}
之所以要设置这个回调,是因为本篇中的Drawable是有层次的。如果B 是 A的子图层,那应用在A上的变换矩阵自然应该应用到B上,所以提供这个回调可以让B获取应用在A上的变换矩阵,从而正确地进行绘制。
在本篇文章中出现的所有Drawable都实现了TransformAwareDrawable
与TransfromCallback
。 在ArrayDrawable
中的getTransfrom
中可以看出它的工作机制(实际上除了个别自身有缩放的图层如ScaleTypeDrawable
, MatrixDrawable
外的实现都是想以下这段代码一样):
@Override
public void getTransform(Matrix transform) {
//如果有父图层,则获取应用在父图层上的变换矩阵
if (mTransformCallback != null) {
mTransformCallback.getTransform(transform);
} else {
//如果没有父图层,就获取单位矩阵
transform.reset();
}
}
在ScaleTypeDrawable
和MatrixDrawable
中会将自身的变换矩阵通过Matrix.confat(Matrix m)
传给transform
。如此一来就实现了变换矩阵向下传递的功能。
VisibilityAwareDrawable
与VisibilityCallback
搭配使用,它提供了在自身可见度改变的时候的通知函数(onVisibilityChange(boolean visible)
)和在自身绘制时发生通知的回调(onDraw()
)。仅仅GenericDraweeHierarchy.RootDrawable
实现了它。
由于类中方法、变量过多,作者对其做了大量精简,仅用于参考设计层次。