写在前边
N久没写博客了,最近公司项目的图片处理框架换成了Fresco,我被派去负责这块的公共方法的处理。最近闲下来了,用了这么久的Fresco,自己也琢磨了一些小技巧,虽然比不了很多大牛,登不上大雅之堂。但是鉴于现在网络上关于Fresco的讲解和使用的文章还比较少,估计还是能够给各位看官,带来几个开胃小菜的。
结合之前使用,粗略的会分为以下这些方面来介绍和说明一下使用的心得,当然代码也会放在GitHub上的。
SimpleDraweeView的简易封装,显示图片只需要一句话。
根据宽高比例来确定图片控件大小
9Path图+Overly实现标识符效果。
Fresco默认没有对GIF图进行处理。如何解决,大量GIF会导致OOM的问题。
结合列表使用时,重复设置图片加载导致闪烁的问题(通过设置TAG解决)。
使用后处理器对下载完成后的图片进行处理-截取/缩放。
Fresco结合PhotoView使用,并可以使用SimpleDraweeView加载进度属性。
结合RecyclerView,简单的实现延迟加载的效果。
今天就从第一个开始。
其实不用我说,Fresco官方给我提供的最简单的一句话加载的方式mSimpleDraweeView.setImageURI(uri);
,虽然很简单,但是明显的不太适合日常项目开发的需求。
按照官网的提示,想实现定制化的需求,你可能需要设置Hierarchy和Controller和ImageReuqest等等。所以,你的代码可能是这样子的。
GenericDraweeHierarchy hierarchy = new GenericDraweeHierarchyBuilder(context.getResources())
.build();
draweeView.setHierarchy(hierarchy);
ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(uri)
.build();
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setImageRequest(imageRequest)
.setOldController(view.getController())
.build()
draweeView.setController(controller);
这时候你是不是心中有一万个草泥马奔腾而过,你就是想显示一张图片而已,至于这么麻烦么。
你看看人家Glide
:
Glide.with(context).load("http://inthecheesefactory.com/uploads/source/glidepicasso/cover.jpg").into(ivImg);
还有Picasso
:
Picasso.with(context).load(url).into(view);
你是不是有点崩溃了,当当当当,这时候你一定在想怎么可以一句话实现图片加载,同时又可以简单的设置如下N多种配置的一种呢?
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="20dp"
android:layout_height="20dp"
fresco:fadeDuration="300"
fresco:actualImageScaleType="focusCrop"
fresco:placeholderImage="@color/wait_color"
fresco:placeholderImageScaleType="fitCenter"
fresco:failureImage="@drawable/error"
fresco:failureImageScaleType="centerInside"
fresco:retryImage="@drawable/retrying"
fresco:retryImageScaleType="centerCrop"
fresco:progressBarImage="@drawable/progress_bar"
fresco:progressBarImageScaleType="centerInside"
fresco:progressBarAutoRotateInterval="1000"
fresco:backgroundImage="@color/blue"
fresco:overlayImage="@drawable/watermark"
fresco:pressedStateOverlayImage="@color/red"
fresco:roundAsCircle="false"
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"
/>
提前声明呀,本人还是很菜滴,设计模式很多都不是太懂,但是项目要用就硬着头皮封装了一下。
我这里直接继承了SimpleDraweeView类,并在内部提供了很多设置属性的方法,同时又给出了一些默认的Hierarchy
和Controller
等。
就好像下面这个样子,但是这些都是私有方法,你既不需要重写,也不需要调用,内部已经做好了:
private GenericDraweeHierarchy getGenericDraweeHierarchy(Context context, MySimpleDraweeView draweeView) {
return new GenericDraweeHierarchyBuilder(context.getResources())
.setFadeDuration(draweeView.getFadeDuration())
.setOverlay(draweeView.getmOverlay())
.setActualImageScaleType(draweeView.getDraweeViewScaleType())
.setProgressBarImage(draweeView.getProgressBar(), ScalingUtils.ScaleType.CENTER_INSIDE)
.setPlaceholderImage(draweeView.getPlaceholderDrawable(), ScalingUtils.ScaleType.CENTER_CROP)
.build();
}
private GenericDraweeHierarchy getRoundGenericDraweeHierarchy(Context context, MySimpleDraweeView draweeView) {
return new GenericDraweeHierarchyBuilder(context.getResources())
.setPlaceholderImage(draweeView.getPlaceholderDrawable())
.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_CROP)
// .setProgressBarImage(draweeView.getProgressBar(), ScalingUtils.ScaleType.CENTER_INSIDE)
.setRoundingParams(RoundingParams.asCircle())
.build();
}
private ImageRequest getImageRequest(MySimpleDraweeView view, Uri uri) {
switch (mPictureType) {
case JPEG:
case JPG:
case PNG:
return ImageRequestBuilder.newBuilderWithSource(uri)
.setLowestPermittedRequestLevel(view.getLowestPermittedRequestLevel())
.setPostprocessor(view.getPostProcessor())//修改图片
.setResizeOptions(view.getResizeOptions())
.setAutoRotateEnabled(true)
.setLocalThumbnailPreviewsEnabled(true)
.setProgressiveRenderingEnabled(false)
.build();
case GIF:
// 对GIF图,Fresco没有处理,自己手动处理
// 1,解析图片宽高,判断是否需要处理
// 2,不需要处理,直接返回;需要处理则处理后,生成一个拷贝文件,并替换url
if (uri.getScheme().toLowerCase().contains("file") && mPictureType.equals(PictureType.GIF) && isCutGif) {
uri = (new Uri.Builder()).scheme("file").path(Utils.getCopyFile(new File(uri.getPath())).getAbsolutePath()).build();
return ImageRequestBuilder.newBuilderWithSource(uri)
.setLowestPermittedRequestLevel(view.getLowestPermittedRequestLevel())
.setPostprocessor(view.getPostProcessor())//修改图片
.setResizeOptions(view.getResizeOptions())
.setAutoRotateEnabled(true)
.build();
}
return ImageRequestBuilder.newBuilderWithSource(uri)
.setLowestPermittedRequestLevel(view.getLowestPermittedRequestLevel())
.setAutoRotateEnabled(true)
.build();
}
throw new RuntimeException("must have a ImageRequest");
}
private DraweeController getDraweeController(ImageRequest imageRequest, MySimpleDraweeView view) {
return Fresco.newDraweeControllerBuilder().setAutoPlayAnimations(view.getAutoPlayAnimations())//自动播放图片动画
.setControllerListener(view.getControllerListener())
.setImageRequest(imageRequest)
.setOldController(view.getController())
.build();
}
当然
最关键的是提供了一些方便的设置属性的方法:
// 显示图片
public void setDraweeViewUrl(String url);
public void setDraweeViewResId(int resId);
public void setDraweeViewUri(Uri uri)'
// 显示圆形图片
public void setRoundDraweeViewUrl(String url);
public void setRoundDraweeViewResId(int resId);
// 根据比例设置控件的宽高
public void setWidthAndHeight(float width, float height);
// 缩放图片
public void setResizeOptions(ResizeOptions resizeOptions);
// 设置加载进度
public void setProgressBar(Drawable mProgressBar)
// 是否截取GIF
public void setIsCutGif(boolean isCutGif);
// 设置Hint
public void setNumberChartIdentify(int number);
// 设置Gif的Hint
public void setGifChartIdentify(boolean isShowGifIdentify);
等等一大堆的方法,当然不符合你的需求你可以随时扩展。
现在,加载一张图片就可能是这个样子。
photo_1.setWidthAndHeight(1024, 768);
photo_1.setAutoPlayAnimations(true);
photo_1.setGifChartIdentify(true); photo_1.setDraweeViewUrl("http://git.oschina.net/biezhihua/MyResource/raw/master/25-173250_974.gif");
photo_2.setWidthAndHeight(1024, 768);
photo_2.setLongChartIdentify(true); photo_2.setDraweeViewUrl("http://git.oschina.net/biezhihua/MyResource/raw/master/20130321151838_XQYyW.thumb.700_0.jpeg");
photo_3.setWidthAndHeight(1024, 768);
photo_3.setNumberChartIdentify(99); photo_3.setDraweeViewUrl("http://git.oschina.net/biezhihua/MyResource/raw/master/3_1024x768.jpg");
下面是效果图。
这次基本上就这些了,东西不多,都是些小菜,欢迎各位看管拍砖~
O(∩_∩)O哈哈~。
最后
放上Github的地址: https://github.com/biezhihua/MySimpleDraweeView
各位看管,小弟我第一次上传代码给别人看,如果对你有帮助,不敢像很多大神要Fork,就给个Start鼓励一下(偷笑中),谢谢各位了。