Fresco架构的简单使用
一、
1.Fresco介绍
Fresco是Facebook最新推出的一款用于Android应用中展示图片的强大图片库，可以从网络、本地存储和本地资源中加载图片。相对于ImageLoader，拥有更快的图片下载速度以及可以加载和显示gif图等诸多优势，是个很好的图片框架。
2.Fresco特点
1）内存管理
a）在5.0以下系统，Fresco将图片放到一个特别的内存区域。当然，在图片不显示的时候，占用的内存会自动被释放。这会使得APP更加流畅，减少因图片内存占用而引发的OOM。
b）内存分配采用：系统匿名共享内存
2）渐进式呈现图片
渐进式图片格式先呈现大致的图片轮廓，然后随着图片下载的继续， 呈现逐渐清晰的图片，这对于移动设备，尤其是慢网络有极大的利好，可带来更好的用户体验。
3）支持加载Gif图，支持WebP格式。
4）图像的呈现
a）自定义居中焦点(对人脸等图片显示非常有帮助)。
b）圆角图，当然圆圈也行。
c）下载失败之后，点击重新下载。
d）自定义占位图，自定义overlay, 或者进度条。
e）指定用户按压时的overlay。
5）图像的加载
a）为同一个图片指定不同的远程路径，或者使用已经存在本地缓存中的图片。
b）先显示一个低解析度的图片，等高清图下载完之后再显示高清图。
c）加载完成回调通知。
d）对于本地图，如有EXIF缩略图，在大图加载完成之前，可先显示缩略图。
e）缩放或者旋转图片。
f）处理已下载的图片。
6）项目地址
项目地址： https://github.com/facebook/fresco
官方网站：http://fresco-cn.org/docs/index.html
二、Fresco的使用
1.Fresco支持的URI
1）网络图片 http://, https://
2）本地文件 file://
3）Content provider content://
4）asset目录下的资源 asset://
5）res目录下的资源 res://
6）Uri中指定图片数据 data:mime/type;base64,
2.Fresco常用API
android:layout_width="20dp" // 不支持wrap_content， 如果要设置宽高比, 需要在Java代码中指定setAspectRatio(float ratio);
android:layout_height="20dp" // 不支持wrap_content
fresco:placeholderImage="@color/wait_color" // 下载成功之前显示的图片
fresco:placeholderImageScaleType="fitCenter" // 设置图片缩放. 通常使用focusCrop,该属性值会通过算法把人头像放在中间
fresco:failureImage="@drawable/error" // 加载失败的时候显示的图片
fresco:failureImageScaleType=“centerInside" // 设置图片缩放
fresco:retryImage="@drawable/retrying" // 加载失败,提示用户点击重新加载的图片(会覆盖failureImage的图片)
fresco:roundAsCircle="true" // 设置圆形方式显示图片 // 圆角设置
fresco:roundedCornerRadius="1dp"
fresco:roundTopLeft="true"
fresco:roundTopRight="false"
fresco:roundBottomLeft="false"
fresco:roundBottomRight="true"
fresco:roundWithOverlayColor="@color/corner_color"
fresco:roundingBorderWidth="2dp"
fresco:roundingBorderColor="@color/border_color"3.使用步骤
1）添加依赖
dependencies {
// 在 API < 14 上的机器支持 WebP 时，需要添加
compile 'com.facebook.fresco:animated-base-support:0.14.1'
// 支持 GIF 动图，需要添加
compile 'com.facebook.fresco:animated-gif:0.14.1'
// 支持 WebP （静态图+动图），需要添加
compile 'com.facebook.fresco:animated-webp:0.14.1'
compile 'com.facebook.fresco:webpsupport:0.14.1'
// 仅支持 WebP 静态图，需要添加
compile 'com.facebook.fresco:webpsupport:0.14.1'
compile 'com.facebook.fresco:fresco:0.14.1'
} 2）在application中初始化Fresco
Fresco.initialize(this); 3）配置网络权限
4）在xml布局文件中,加入命名空间
5）在xml中引入SimpleDraweeView
6）在Java代码中开始加载图片
Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);4.注意事项
如果项目中使用了OkHttp需要进行替换。
For OkHttp2:
compile "com.facebook.fresco:imagepipeline-okhttp:0.12.0+" For OkHttp3:
compile "com.facebook.fresco:imagepipeline-okhttp3:0.12.0+"三、Fresco使用实例
1.项目准备
1）布局
2）代码
// 设置带进度条样式
GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());
GenericDraweeHierarchy hierarchy = builder.setProgressBarImage(new ProgressBarDrawable()).build();
sdvFresco.setHierarchy(hierarchy);
// 加载图片地址
Uri uri = Uri.parse("http://img4.duitang.com/uploads/item/201211/24/20121124175330_ruKEK.jpeg");
// 设置显示图片
sdvFresco.setImageURI(uri);2.带进度条的图片
1）布局
2）代码
// 设置带进度条样式
GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());
GenericDraweeHierarchy hierarchy = builder.setProgressBarImage(new ProgressBarDrawable()).build();
sdvFresco.setHierarchy(hierarchy);
// 加载图片地址
Uri uri = Uri.parse("http://img4.duitang.com/uploads/item/201211/24/20121124175330_ruKEK.jpeg");
// 设置显示图片
sdvFresco.setImageURI(uri);3.图片的不同裁剪
1）布局
2）代码设置
// 居中，无缩放
@OnClick(R.id.bt_fresco_center)
void bt_fresco_center_click(View view){
}
// 保持宽高比缩小或放大，使得两边都大于或等于显示边界。居中显示
@OnClick(R.id.bt_fresco_centercrop)
void bt_fresco_centercrop_click(View view){
}
// 同centerCrop, 但居中点不是中点，而是指定的某个点,这里我设置为图片的左上角那点
@OnClick(R.id.bt_fresco_focuscrop)
void bt_fresco_focuscrop_click(View view){
}
// 使两边都在显示边界内，居中显示。如果图尺寸大于显示边界，则保持长宽比缩小图片
@OnClick(R.id.bt_fresco_centerinside)
void bt_fresco_centerinside_click(View view){
}
// 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内。居中显示
@OnClick(R.id.bt_fresco_fitcenter)
void bt_fresco_fitcenter_click(View view){
}
// 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，不居中，和显示边界左上对齐
@OnClick(R.id.bt_fresco_fitstart)
void bt_fresco_fitstart_click(View view){
}
// 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，不居中，和显示边界右下对齐
@OnClick(R.id.bt_fresco_fitend)
void bt_fresco_fitend_click(View view){
}
// 不保持宽高比，填充满显示边界
@OnClick(R.id.bt_fresco_fitxy)
void bt_fresco_fitxy_click(View view){
}
// 如要使用title mode显示, 需要设置为none
@OnClick(R.id.bt_fresco_none)
void bt_fresco_none_click(View view){
} 3）代码展示图片
private void imageDisplay() {
sdvFrescoCrop.setHierarchy(hierarchy);
Uri uri = Uri.parse("http://img4q.duitang.com/uploads/item/201305/20/20130520115416_VrUUR.jpeg");
sdvFrescoCrop.setImageURI(uri);
}4.圆形和圆角图
1）布局
2）设置圆形图片
uri = Uri.parse("http://img4q.duitang.com/uploads/item/201304/27/20130427043538_wAfHC.jpeg");
builder = new GenericDraweeHierarchyBuilder(getResources());
// 设置圆形图片
@OnClick(R.id.bt_fresco_circle)
void bt_fresco_circle_click(View view) {
// 参数设置为圆形
params = RoundingParams.asCircle();
GenericDraweeHierarchy hierarchy = builder.setRoundingParams(params).build();
sdvFrescoCircleandcorner.setHierarchy(hierarchy);
// 加载图片
sdvFrescoCircleandcorner.setImageURI(uri);
} 3）设置圆角图片
uri = Uri.parse("http://img4q.duitang.com/uploads/item/201304/27/20130427043538_wAfHC.jpeg");
builder = new GenericDraweeHierarchyBuilder(getResources());
// 设置圆角图片
@OnClick(R.id.bt_fresco_corner)
void bt_fresco_corner_click(View view) {
// 配置参数
params = RoundingParams.fromCornersRadius(50f);//设置圆角大小
params.setOverlayColor(getResources().getColor(android.R.color.holo_red_light));//覆盖层
params.setBorder(getResources().getColor(android.R.color.holo_blue_light), 5);//边框
params.setRoundAsCircle(true);//如果是RoundingParams.fromCornersRadius，这个可以强制进行圆形展示
// 设置圆形参数
GenericDraweeHierarchy hierarchy = builder.setRoundingParams(params).build();
sdvFrescoCircleandcorner.setHierarchy(hierarchy);
// 加载图片
sdvFrescoCircleandcorner.setImageURI(uri);
}5.渐进式展示图片
1）布局
2）代码
@OnClick(R.id.sdv_fresco_askImg)
void sdv_fresco_askImg_click(View view){
// 加载质量配置
ProgressiveJpegConfig jpegConfig = new ProgressiveJpegConfig() {
@Override
public int getNextScanNumberToDecode(int scanNumber) {
return scanNumber + 2;
}
@Override
public QualityInfo getQualityInfo(int scanNumber) {
boolean isGoodEnough = (scanNumber >= 5);
return ImmutableQualityInfo.of(scanNumber, isGoodEnough, false);
}
};
ImagePipelineConfig.newBuilder(this).setProgressiveJpegConfig(jpegConfig).build();
// 获取图片URL
Uri uri = Uri.parse("http://cdn.duitang.com/uploads/item/201303/12/20130312021353_45Qix.jpeg");
// 获取图片请求
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri).setProgressiveRenderingEnabled(true).build();
DraweeController draweeController = Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setTapToRetryEnabled(true)
.setOldController(sdvFrescoJpeg.getController())//使用oldController可以节省不必要的内存分配
.build();
// 设置加载的控制
sdvFrescoJpeg.setController(draweeController);
}6.Gif动画图片
1）布局
2）添加依赖
compile 'com.facebook.fresco:animated-gif:0.14.1' 3）代码
a）请求图片
@OnClick(R.id.bt_fresco_askImg)
void bt_fresco_askImg_click(View view) {
// 图片地址
Uri uri = Uri.parse("http://www.sznews.com/humor/attachement/gif/site3/20140902/4487fcd7fc66156f51db5d.gif");
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)
.setAutoPlayAnimations(false)
.setOldController(sdvFrescoGif.getController())
.build();
// 设置控制器
sdvFrescoGif.setController(controller);
}b）开始动画
@OnClick(R.id.bt_fresco_startAnim)
void bt_fresco_startAnim_click(View view) {
Animatable animation = sdvFrescoGif.getController().getAnimatable();
if (animation != null && !animation.isRunning()) {
animation.start();
}
}c）停止动画
@OnClick(R.id.bt_fresco_stopAnim)
void bt_fresco_stopAnim_click(View view) {
Animatable animation = sdvFrescoGif.getController().getAnimatable();
if (animation != null && animation.isRunning()) {
animation.stop();
}
}7.多图请求及图片复用
1）布局
2）代码
a)先显示低分辨率的图，然后是高分辨率的图
@OnClick(R.id.bt_fresco_multiImg)
void bt_fresco_multiImg_click(View view){
//同一张图片，不同品质的两个uri
Uri lowResUri = Uri.parse("http://img1.gamedog.cn/2012/03/11/19-120311133617-50.jpg");
Uri highResUri = Uri.parse("http://img5.duitang.com/uploads/item/201312/03/20131203153823_Y4y8F.jpeg");
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setLowResImageRequest(ImageRequest.fromUri(lowResUri))
.setImageRequest(ImageRequest.fromUri(highResUri))
.setOldController(sdvFrescoMulti.getController())
.build();
sdvFrescoMulti.setController(controller);
} b)本地缩略图预览
@OnClick(R.id.bt_fresco_thumbnailImg)
void bt_fresco_thumbnailImg_click(View view){
//将本地图片地址转换成Uri
Uri uri = Uri.fromFile(new File(Environment.getExternalStorageDirectory()+"/meinv1.jpg"));
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setLocalThumbnailPreviewsEnabled(true)
.build();
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setOldController(sdvFrescoMulti.getController())
.build();
sdvFrescoMulti.setController(controller);
} c)本地图片复用
@OnClick(R.id.bt_fresco_multiplexImg)
void bt_fresco_multiplexImg_click(View view){
//本地图片的复用
//在请求之前，还会去内存中请求一次图片，没有才会先去本地，最后去网络uri
//本地准备复用图片的uri 如果本地这个图片不存在，会自动去加载下一个uri
Uri uri1 = Uri.fromFile(new File(Environment.getExternalStorageDirectory()+"/meinv1.jpg"));
//图片的网络uri
Uri uri2 = Uri.parse("http://img5.duitang.com/uploads/item/201312/03/20131203153823_Y4y8F.jpeg");
ImageRequest request1 = ImageRequest.fromUri(uri1);
ImageRequest request2 = ImageRequest.fromUri(uri2);
ImageRequest[] requests = {request1, request2};
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setFirstAvailableImageRequests(requests)
.setOldController(sdvFrescoMulti.getController())
.build();
sdvFrescoMulti.setController(controller);
}8.图片加载监听
1）布局
2）代码
a)正常加载图片
@OnClick(R.id.bt_fresco_listener)
void bt_fresco_listener_click(View view) {
ProgressiveJpegConfig jpegConfig = new ProgressiveJpegConfig() {
@Override
public int getNextScanNumberToDecode(int scanNumber) {
return scanNumber + 2;
}
@Override
public QualityInfo getQualityInfo(int scanNumber) {
boolean isGoodEnough = (scanNumber >= 5);
return ImmutableQualityInfo.of(scanNumber, isGoodEnough, false);
}
};
ImagePipelineConfig.newBuilder(this).setProgressiveJpegConfig(jpegConfig).build();
Uri uri = Uri.parse("http://h.hiphotos.baidu.com/zhidao/pic/item/58ee3d6d55fbb2fbac4f2af24f4a20a44723dcee.jpg");
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri).setProgressiveRenderingEnabled(true).build();
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setOldController(sdvFrescoListener.getController())
.setImageRequest(request)
//设置监听器监听图片加载状态
.setControllerListener(controllerListener)
.build();
sdvFrescoListener.setController(controller);
} b)加载过程监听
//对所有的图片加载，onFinalImageSet 或者 onFailure 都会被触发。前者在成功时，后者在失败时。
//如果允许呈现渐进式JPEG，同时图片也是渐进式图片，onIntermediateImageSet会在每个扫描被解码后回调。
// 具体图片的那个扫描会被解码，参见渐进式JPEG图
private ControllerListener controllerListener = new BaseControllerListener() {
@Override
public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {
super.onFinalImageSet(id, imageInfo, animatable);
if (imageInfo == null) {
return;
}
QualityInfo qualityInfo = imageInfo.getQualityInfo();
tvFrescoListener.setText("Final image received! " +
"\nSize: " + imageInfo.getWidth()
+ "x" + imageInfo.getHeight()
+ "\nQuality level: " + qualityInfo.getQuality()
+ "\ngood enough: " + qualityInfo.isOfGoodEnoughQuality()
+ "\nfull quality: " + qualityInfo.isOfFullQuality());
}
@Override
public void onIntermediateImageSet(String id, ImageInfo imageInfo) {
super.onIntermediateImageSet(id, imageInfo);
tvFrescoListener2.setText("IntermediateImageSet image receiced");
}
@Override
public void onFailure(String id, Throwable throwable) {
super.onFailure(id, throwable);
tvFrescoListener.setText("Error loading" + id);
}
}; 9.图片缩放和旋转
1）布局
2）代码
a)缩放
@OnClick(R.id.bt_fresco_resize)
void bt_fresco_resize_click(View view) {
int width = 50;
int height = 50;
Uri uri = Uri.parse("http://c.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd21a519680db30f2442a70fa1.jpg");
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setResizeOptions(new ResizeOptions(width, height)).build();
PipelineDraweeController controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder()
.setOldController(sdvFrescoResize.getController())
.setImageRequest(request)
.build();
sdvFrescoResize.setController(controller);
} b)旋转
@OnClick(R.id.bt_fresco_rotate)
void bt_fresco_rotate_click(View view) {
Uri uri2 = Uri.parse("http://c.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd21a519680db30f2442a70fa1.jpg");
ImageRequest request1 = ImageRequestBuilder.newBuilderWithSource(uri2)
.setAutoRotateEnabled(true).build();
DraweeController controller1 = Fresco.newDraweeControllerBuilder()
.setImageRequest(request1)
.setOldController(sdvFrescoResize.getController()).build();
sdvFrescoResize.setController(controller1);
}10.修改图片
1）布局
2）代码
@OnClick(R.id.bt_fresco_modify)
void bt_fresco_modify_click(View view){
Uri uri = Uri.parse("http://c.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd21a519680db30f2442a70fa1.jpg");
Postprocessor redMeshPostprocessor = new BasePostprocessor() {
@Override
public String getName() {
return "redMeshPostprocessor";
}
//绘制红色点状网格
@Override
public void process(Bitmap bitmap) {
for (int x = 0; x < bitmap.getWidth(); x += 2) {
for (int y = 0; y < bitmap.getHeight(); y += 2) {
bitmap.setPixel(x, y, Color.RED);
}
}
}
};
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setPostprocessor(redMeshPostprocessor)
.build();
PipelineDraweeController controller = (PipelineDraweeController)
Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setOldController(sdvFrescoModify.getController())
.build();
sdvFrescoModify.setController(controller);
}11.动态展示图片
1）布局
2）代码
simpleDraweeView = new SimpleDraweeView(this);
simpleDraweeView.setAspectRatio(1.0f);
@OnClick(R.id.bt_fresco_loadsmall)
void bt_fresco_loadsmall_click(View view) {
final Uri uri = Uri.parse("http://img4q.duitang.com/uploads/item/201304/27/20130427043538_wAfHC.jpeg");
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.build();
PipelineDraweeController controller = (PipelineDraweeController)
Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setOldController(simpleDraweeView.getController())
.build();
simpleDraweeView.setController(controller);
llFresco.addView(simpleDraweeView);
}四、注意事项
1.问题处理
1）重复的边界
这是使用圆角的一个缺陷。 参考圆角和圆圈 来获取更多信息。
2）图片没有加载
你可以从 image pipeline 打出的日志来查看原因。 这里提供一些通常会导致问题的原因。
3）文件不可用
无效的路径、链接会导致这种情况。判断网络链接是否有效，你可以尝试在浏览器中打开它，看看是否图片会被加载。若图片依然加载不出来，那么这不是Fresco的问题。判断本地文件是否有效，你可以通过下面这段代码来校验：
如果这里抛出了异常，那么这不是Fresco的问题，可能是你的其他代码导致的。有可能是没有获取到SD卡读取权限、路径不合法、文件不存在等。
FileInputStream fis = new FileInputStream(new File(localUri.getPath()));4）OOM - 无法分配图片空间
加载特别特别大的图片时最容易导致这种情况。如果你加载的图片比承载的View明显大出太多，那你应该考虑将它Resize一下。
5）Bitmap太大导致无法绘制
Android 无法绘制长或宽大于2048像素的图片。这是由OpenGL渲染系统限制的，如果它超过了这个界限，Fresco会对它进行Resize。
6）通过Logcat来判断原因
在加载图片时会出现各种各样的原因导致加载失败。 在使用Fresco的时候，最直接的方式就是查看 image pipeline 打出的VERBOSE级别日志。
7）启动日志
默认情况下Fresco是关闭日志输出的，你可以配置image pipeline让它启动。
Set requestListeners = new HashSet<>();
requestListeners.add(new RequestLoggingListener());
ImagePipelineConfig config = ImagePipelineConfig.newBuilder(context)
// other setters
.setRequestListeners(requestListeners)
.build();
Fresco.initialize(context, config);
FLog.setMinimumLoggingLevel(FLog.VERBOSE); 8）查看日志
你可以通过下面这条shell命令来查看Fresco日志：
adb logcat -v threadtime | grep -iE 'LoggingListener|AbstractDraweeController|BufferedDiskCache'
图片如果没有在内存缓存中找到，也没有在磁盘缓存中找到，最后去网络上下载图片。下载成功后，图片被解码，之后请求结束。最后数据源通知 controller 图片就绪，显示图片(set_final_result）。
2.一些陷阱
1）不要使用 ScrollViews
如果你想要在一个长的图片列表中滑动，你应该使用 RecyclerView，ListView，或 GridView。这三者都会在你滑动时不断重用子视图。Fresco 的 view 会接收系统事件，使它们能正确管理内存。
ScrollView 不会这样做。因此，Fresco view 不会被告知它们是否在屏幕上显示，并保持图片内存占用直到你的 Fragment 或 Activity 停止。你的 App 将会面临更大的 OOM 风险。
2）不要向下转换
不要试图把Fresco返回的一些对象进行向下转化，这也许会带来一些对象操作上的便利，但是也许在后续的版本中，你会遇到一些因为向下转换特性丢失导致的难以处理的问题。
3）不要使用getTopLevelDrawable
DraweeHierarchy.getTopLevelDrawable() 仅仅 应该在DraweeViews中用，除了定义View中，其他应用代码建议连碰都不要碰这个。在自定义view中，也千万不要将返回值向下转换，也许下个版本，我们会更改这个返回值类型。
4）不要复用 DraweeHierarchies
永远不要把 DraweeHierarchy 通过 DraweeView.setHierarchy 设置给不同的View。DraweeHierarchy 是由一系列 Drawable 组成的。在 Android 中, Drawable 不能被多个 View 共享。
5）不要在多个DraweeHierarchy中使用同一个Drawable
原因同上。不过你可以在占位图、重试图、错误图中使用相同的资源ID，Android 实际会创建不同的 Drawable。 如果你使用GenericDraweeHierarchyBuilder，那么需要调用Resources.getDrawable来通过资源获取图片。不过请不要只调用一次然后将结果传给不同的Hierarchy！
6）不要直接控制 hierarchy
不要直接使用 SettableDraweeHierarchy 方法(reset，setImage，…)。它们应该仅由 controller 使用。不要使用setControllerOverlay来设置一个覆盖图，这个方法只能给 controller 调用。如果你需要显示覆盖图，可以参考Drawee的各种效果配置
7）不要直接给 DraweeView 设置图片
目前 DraweeView 直接继承于 ImageView，因此它有 setImageBitmap,
setImageDrawable 等方法。
如果利用这些方法直接设置一张图片，内部的 DraweeHierarchy 就会丢失，也就无法取到image
pipeline 的任何图像了。
8）使用 DraweeView 时，请不要使用任何 ImageView 的属性
在后续的版本中，DraweeView 会直接从 View 派生。任何属于 ImageView 但是不属于 View 的方法都会被移除。
3.为什么不支持wrap_content
人们经常会问，为什么Fresco中不可以使用wrap_content？主要的原因是，Drawee永远会在getIntrinsicHeight/getIntrinsicWidth中返回-1。这么做的原因是 Drawee 不像ImageView一样。它同一时刻可能会显示多个元素。比如在从占位图渐变到目标图时，两张图会有同时显示的时候。再比如可能有多张目标图片（低清晰度、高清晰度两张）。如果这些图像都是不同的尺寸，那么很难定义”intrinsic”尺寸。
如果我们要先用占位图的尺寸，等加载完成后再使用真实图的尺寸，那么图片很可能显示错误。它可能会被根据占位图的尺寸来缩放、裁剪。唯一防止这种事情的方式就只有在图片加载完成后强制触发一次layout。这样的话不仅会影响性能，而且会让应用的界面突变，很影响用户体验！如果用户正在读一篇文章，然后在图片加载完成后整篇文章突然向下移动，这是非常不好的。
所以你必须指定尺寸或者用match_parent来布局。你如果从服务端请求图片，服务端可以做到返回图片尺寸。然后你拿到之后通过setLayoutParams 来给View设置宽高。当然如果你必须要使用wrap_content，那么你可以参考StackOverflow上的一个回答。但是我们以后会移除这个功能，Ugly things should look ugly。
4.共享元素动画
使用 ChangeBounds，而不是ChangeImageTransform
Android 5.0 (Lollipop) 引入了 共享元素动画，允许在多个Activity切换时共享相同的View！
你可以在XML中定义这个变换。有个ChangeImageTransform变换可以在共享元素切换时对ImageView进行变换，可惜Fresco暂时不支持它，因为Drawee维护着自己的转换Matrix。
幸运的是你可以有另一种做法：使用ChangeBounds。你可以改变layout的边界，这样Fresco会根据它进行自适应，也能够达到你想要的功能。
当你如果认真看到這里，那我为您的耐心点赞。