例：
http://p1.so.qhmsg.com/bdr/_240_/t0179d442a840b6df46.gif
http://img.1985t.com/uploads/attaches/2017/12/141013-eSnS9sO.jpg
https://www.zhaoapi.cn/images/1524972479241gaga_icon.jpg
1.Fresco的环境搭建
（1）在项目的build.grade文件里添加依赖
(注意:因为Fresco进行了包的拆分,用到哪个功能就添加对应的依赖,可以减少APP的体积)
dependencies {
//Fresco,无论使用哪个模块的功能,都必须要添加的基础依赖
compile 'com.facebook.fresco:fresco:0.14.1'
//下面的依赖根据需求,用到哪个模块,就导入对应的依赖即可.
// 仅支持 WebP 静态图，需要添加
compile 'com.facebook.fresco:webpsupport:0.14.1'
// 支持 GIF 动图，需要添加
compile 'com.facebook.fresco:animated-gif:0.14.1'
// 支持 WebP 静态图及 WebP 动图，需要添加
compile 'com.facebook.fresco:animated-webp:0.14.1'
compile 'com.facebook.fresco:webpsupport:0.14.1'
// 在 API < 14 上的机器支持 WebP 时，需要添加
compile 'com.facebook.fresco:animated-base-support:0.14.1'
}
（2）在application中初始化Fresco(记得在清单文件里配置application)
Fresco.initialize(this); （3）配置网络权限
<uses-permission android:name="android.permission.INTERNET"/>（4）在xml布局文件中,加入命名空间
<LinearLayout xmlns:fresco="http://schemas.android.com/apk/res-auto">（5）在xml中引入SimpleDraweeView控件
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="130dp" android:layout_height="130dp" fresco:placeholderImage="@drawable/my_drawable" />
2.Fresco的基本使用
(1)在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); 注意：如果项目中使用了OkHttp需要进行替换(因为Fresco底层网络用的是okhttp,不做修改会出现jar包冲突) OkHttp2版本:compile "com.facebook.fresco:imagepipeline-okhttp:0.12.0+" OkHttp3版本::compile "com.facebook.fresco:imagepipeline-okhttp3:0.12.0+"
3.根据URI的地址,带进度条加载一个网络图片
//所要加载图片的网址 Uri uri = Uri.parse("http://assets.kgc.cn/upload/openteacher/20160831/1472636067718985.jpg"); //创建Builder对象,一般创建出参数对象 GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources()); //创建参数对象,设置其样式为进度条 GenericDraweeHierarchy hierarchy = builder.setProgressBarImage(new ProgressBarDrawable()).build(); //将参数对象设置给图片控件 sdv_fresco_spimg.setHierarchy(hierarchy); //控件加载图片,参数:网络图片的网址. sdv_fresco_spimg.setImageURI(uri);
4.对图片进行不同的裁剪
创建出成员变量的GenericDraweeHierarchyBuilder
builder = new GenericDraweeHierarchyBuilder(getResources());
//根据点击事件,对图片执行不同的裁剪 @Override public void onClick(View v){ switch (v.getId()) { // 居中，无缩放 case R.id.bt_fresco_center: // 设置描述 tv_fresco_explain.setText("居中，无缩放"); // 样式设置,使图片只显示中间的部分 GenericDraweeHierarchy CENTER= builder.setActualImageScaleType(ScalingUtils.ScaleType.CENTER).build(); // 显示图片 imageDisplay(CENTER); break; // 保持宽高比缩小或放大，使得两边都大于或等于显示边界(也就是裁剪成正方形)。以中间的点为图片中心 case R.id.bt_fresco_centercrop: // 设置描述 tv_fresco_explain.setText("保持宽高比缩小或放大，使得两边都大于或等于显示边界。居中显示"); // 样式设置,使图片按比例缩小或放大,且裁剪成正方形. GenericDraweeHierarchy CENTER_CROP =builder.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_CROP).build(); // 图片显示 imageDisplay(CENTER_CROP); break; // 同centerCrop, 但居中点不是中点，而是指定的某个点,这里设置为图片的左上角那点 case R.id.bt_fresco_focuscrop: // 设置描述 tv_fresco_explain.setText("同centerCrop, 但居中点不是中点，而是指定的某个点,这里我设置为图片的左上角那点"); //指定中心点位置 PointF point = new PointF(0,0); //根据指定的点设置为图片中心,使图片按比例缩小或放大,且裁剪成正方形. GenericDraweeHierarchy FOCUS_CROP= builder.setActualImageScaleType(ScalingUtils.ScaleType.FOCUS_CROP) .setActualImageFocusPoint(point).build(); // 图片显示 imageDisplay(FOCUS_CROP); break; //使两边都在显示边界内，居中显示。如果图尺寸大于显示边界，则保持长宽比缩小图片 case R.id.bt_fresco_centerinside: // 设置描述 tv_fresco_explain.setText("使两边都在显示边界内，居中显示。如果图尺寸大于显示边界，则保持长宽比缩小图片"); // 样式设置,使图片按比例显示在控件内, GenericDraweeHierarchy CENTER_INSIDE=builder.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE).build(); // 图片显示 imageDisplay(CENTER_INSIDE); break; // 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内。居中显示 case R.id.bt_fresco_fitcenter: // 设置描述 tv_fresco_explain.setText("保持宽高比，缩小或者放大，使得图片完全显示在显示边界内。居中显示"); // 样式设置,保持宽高比例,对图片进行缩或放,图片位置居中显示(效果和上面一种类似) GenericDraweeHierarchy FIT_CENTER =builder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_CENTER).build(); // 图片显示 imageDisplay(FIT_CENTER); break; // 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，不居中，和显示边界左上对齐 case R.id.bt_fresco_fitstart: // 设置描述 tv_fresco_explain.setText("保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，不居中，和显示边界左上对齐"); // 样式设置,保持宽高比例,对图片进行缩或放,图片位置,不居中，和显示边界左上对齐 GenericDraweeHierarchy FIT_START =builder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_START).build(); // 图片显示 imageDisplay(FIT_START); break; // 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，不居中，和显示边界右下对齐 case R.id.bt_fresco_fitend: // 设置描述 tv_fresco_explain.setText("保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，不居中，和显示边界右下对齐"); // 样式设置,保持宽高比例,对图片进行缩或放,图片位置,不居中，和显示边界右下对齐 GenericDraweeHierarchy FIT_END =builder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_END).build(); // 图片显示 imageDisplay(FIT_END); break; // 不保持宽高比，填充满显示边界 case R.id.bt_fresco_fitxy: // 设置描述 tv_fresco_explain.setText("不保持宽高比，填充满显示边界"); // 样式设置,使图片填充整个控件,不保证宽高比例. GenericDraweeHierarchy FIT_XY= builder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_XY).build(); // 图片显示 imageDisplay(FIT_XY); break; // 如要使用titlemode显示, 需要设置为none case R.id.bt_fresco_none: // 设置描述 tv_fresco_explain.setText("如要使用titlemode显示, 需要设置为none"); // 样式设置 GenericDraweeHierarchy hierarchy= builder.setActualImageScaleType(null).build(); // 图片显示 imageDisplay(hierarchy); break; } }
/** * 把得到的样式进行设置,加载出图片 * @param hierarchy */ private void imageDisplay(GenericDraweeHierarchyhierarchy) { // 加载图片 Uri uri = Uri.parse("http://img4q.duitang.com/uploads/item/201305/20/20130520115416_VrUUR.jpeg"); sdv_fresco_crop.setHierarchy(hierarchy); sdv_fresco_crop.setImageURI(uri); }
5.圆形图片和圆角图片
//加载图片的网址 uri = Uri.parse("http://img4q.duitang.com/uploads/item/201304/27/20130427043538_wAfHC.jpeg"); //builder对象用一个即可,在这里创建出成员变量 builder = new GenericDraweeHierarchyBuilder(getResources()); // 设置圆形图片 // 设置形状对象,形状为圆形 parames =RoundingParams.asCircle(); //创建设置参数,设置一个形状,把形状对象塞入 GenericDraweeHierarchy roundness= builder.setRoundingParams(parames).build(); //将参数对象设置给图片控件 sdv_fresco_circleandcorner.setHierarchy(roundness); //控件加载图片 sdv_fresco_circleandcorner.setImageURI(uri); // 设置圆角图片 //设置边角的弧度,使其为圆角 parames =RoundingParams.fromCornersRadius(50f); /* //设置图片控件的背景颜色 parames.setOverlayColor(getResources().getColor(android.R.color.holo_red_light));//覆盖层 //设置图片的边框颜色及边框的粗细 parames.setBorder(getResources().getColor(android.R.color.holo_blue_light),5);//边框*/ //这里的代码和设置圆形图片这一块代码是一种的,唯一不同就是对parames的设置. GenericDraweeHierarchy circularBead = builder.setRoundingParams(parames).build(); sdv_fresco_circleandcorner.setHierarchy(circularBead); // 加载图片 sdv_fresco_circleandcorner.setImageURI(uri);
6.渐进式展示图片(采用MVC的设计模式)
// 获取图片URL Uri uri = Uri.parse("http://img1.yulin520.com/news/8OIFWKCGZFR0O868X20V.jpg#586_616"); // 加载质量配置,为了实现节省CPU,随着图片下载的进行，下载完的扫描序列如下: 1, 4, 5, 10 /* 首次调用getNextScanNumberToDecode返回为2，因为初始时，解码的扫描数为0。 那么1将不会解码，下载完成4个扫描时，解码一次。下个解码为扫描数为6(5不会解码，10才会解码)*/ 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(Main3Activity.this).setProgressiveJpegConfig(jpegConfig).build(); // 创建 ImageRequest 对象. ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)//设置URL .setProgressiveRenderingEnabled(true)//打开渐进渲染 .build(); DraweeController draweeController =Fresco.newDraweeControllerBuilder() //必须要设置ImageRequest对象,里面包含了图片的网址. .setImageRequest(request) //开启用户点击重新加载图片的功能 .setTapToRetryEnabled(true) //会复用以前的对象,可以节省内存. .setOldController(my_image_view.getController()) .build(); // 1设置加载的控制 my_image_view.setController(draweeController);
7.GIF动画图片
//请求GIF动画,采用MVC的设计模式(注意加载GIF动画还要添加依赖) /* 支持 GIF 动图，需要添加:compile 'com.facebook.fresco:animated-gif:0.14.1' */ //GIF动画网址,加载需要一段时间 Uri uri = Uri.parse("http://www.sznews.com/humor/attachement/gif/site3/20140902/4487fcd7fc66156f51db5d.gif"); DraweeController controller =Fresco.newDraweeControllerBuilder() .setUri(uri)//设置GIF网址 .setAutoPlayAnimations(false)//是否自动播放动画,false为不播放 .setOldController(sdv_fresco_gif.getController())//内存优化 .build(); sdv_fresco_gif.setController(controller); // 动画停止 //拿到动画对象 Animatable animatableStop = sdv_fresco_gif.getController().getAnimatable(); //进行非空及是否动画在播放判断 if(animatableStop != null &&animatableStop.isRunning()) { //动画在播放,停止动画播放 animatableStop.stop(); } // 动画开始 //拿到动画对象 Animatable animatableStart = sdv_fresco_gif.getController().getAnimatable(); //进行非空及是否动画在播放判断 if(animatableStart != null &&!animatableStart.isRunning()) { //动画停止播放,播放动画 animatableStart.start(); }
8.多图请求及图片复用
//多图请求及图片复用 // 先显示低分辨率的图，然后是高分辨率的图,MVC的设计模式 // 同一个图片,不同分辨率的两个URL地址 Uri lowUri = Uri.parse("http://img3.imgtn.bdimg.com/it/u=4045410176,95411995&fm=27&gp=0.jpg"); Uri highUri = Uri.parse("http://img.1985t.com/uploads/attaches/2017/12/141013-eSnS9sO.jpg"); // 控制加载图片 DraweeController controller =Fresco.newDraweeControllerBuilder() //一开始加载一个低分辨率的URL .setLowResImageRequest(ImageRequest.fromUri(lowUri)) //然后加载一个高分辨率的URL,你真正要加载的图片 .setImageRequest(ImageRequest.fromUri(highUri)) .build(); // 加载图片 my_image_view.setController(controller); // 本地缩略图预览 // 图片地址,参数1.File对象, 从手机手机SD卡里加载一张图片 Uri uri = Uri.fromFile(new File(Environment.getExternalStorageDirectory()+"/shuaige.jpg")); // 加载图片的请求 ImageRequest request =ImageRequestBuilder.newBuilderWithSource(uri) //开启缩略图预览模式 .setLocalThumbnailPreviewsEnabled(true) .build(); // 控制图片的加载 DraweeController preview =Fresco.newDraweeControllerBuilder() .setImageRequest(request) .build(); // 加载图片 my_image_view.setController(preview); //本地图片的复用 //在请求之前，还会去内存中请求一次图片，没有才会先去本地，最后去网络uri //本地准备复用图片的uri 如果本地这个图片不存在，会自动去加载下一个uri // 本地图片的地址 Uri uri1 = Uri.fromFile(new File(Environment.getExternalStorageDirectory()+"/shuaige.jpg")); //图片的网址 Uri uri2 = Uri.parse("http://img5.duitang.com/uploads/item/201312/03/20131203153823_Y4y8F.jpeg"); //创建ImageRequest对象,将其放入ImageRequest[]数组中. ImageRequest request1 =ImageRequest.fromUri(uri1); ImageRequest request2 =ImageRequest.fromUri(uri2); ImageRequest[] requests = {request1,request2}; // 控制加载图片 DraweeController reuse =Fresco.newDraweeControllerBuilder() //设置加载图片的顺序.参数ImageRequest[]数组 .setFirstAvailableImageRequests(requests) .setOldController(my_image_view.getController()) .build(); // 加载图片 my_image_view.setController(reuse);
9.图片加载监听
// 图片地址 Uri uri = Uri.parse("http://h.hiphotos.baidu.com/zhidao/pic/item/58ee3d6d55fbb2fbac4f2af24f4a20a44723dcee.jpg"); // 加载质量配置,为了实现节省CPU,随着图片下载的进行，下载完的扫描序列如下: 1, 4, 5, 10 /* 首次调用getNextScanNumberToDecode返回为2，因为初始时，解码的扫描数为0。 那么1将不会解码，下载完成4个扫描时，解码一次。下个解码为扫描数为6(5不会解码，10才会解码)*/ ProgressiveJpegConfig jpegConfig= new ProgressiveJpegConfig() { @Override public int getNextScanNumberToDecode(int scanNumber) { return scanNumber + 2; } @Override public QualityInfogetQualityInfo(int scanNumber) { boolean isGoodEnough =(scanNumber >= 5); return ImmutableQualityInfo.of(scanNumber,isGoodEnough, false); } }; //上面的和下面一行是固定代码.使用使复制粘贴即可 ImagePipelineConfig.newBuilder(this).setProgressiveJpegConfig(jpegConfig).build(); // 图片请求, ImageRequest request =ImageRequestBuilder.newBuilderWithSource(uri)//指定加载图片地址 .setProgressiveRenderingEnabled(true)打开渐进渲染 .build(); // 图片加载的控制 DraweeController controller =Fresco.newDraweeControllerBuilder() .setOldController(sdv_fresco_listener.getController()) .setImageRequest(request) //设置监听器监听图片的加载 .setControllerListener(controllerListener) .build(); // 加载图片 sdv_fresco_listener.setController(controller); private ControllerListener controllerListener = new BaseControllerListener<ImageInfo>(){ // 加载图片完毕回调 @Override public void onFinalImageSet(Stringid, ImageInfo imageInfo, Animatable animatable) { super.onFinalImageSet(id,imageInfo, animatable); //图片信息对象非空判断 if (imageInfo == null) { return; } // 获取图片的质量信息 QualityInfo qualityInfo = imageInfo.getQualityInfo(); tv_fresco_listener.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(Stringid, ImageInfo imageInfo) { super.onIntermediateImageSet(id,imageInfo); tv_fresco_listener2.setText("IntermediateImageSet image receiced"); } // 加载图片失败回调 @Override public void onFailure(Stringid, Throwable throwable) { super.onFailure(id,throwable); //这里的id参数就是图片加载失败的打印信息 tv_fresco_listener.setText("Error loading" + id); } };
10.修改内存中图片占用资源的大小
// 图片地址 Uri uri = Uri.parse("http://c.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd21a519680db30f2442a70fa1.jpg"); //图片的请求 ImageRequest request =ImageRequestBuilder.newBuilderWithSource(uri) //重新设置这张图片的宽高.以便解决内存 .setResizeOptions(new ResizeOptions(50, 50)) .build(); // 控制图片的加载 PipelineDraweeController controller= (PipelineDraweeController) Fresco.newDraweeControllerBuilder() .setOldController(sdv_fresco_resize.getController()) .setImageRequest(request) .build(); // 加载图片 sdv_fresco_resize.setController(controller);
11.修改图片
// 图片地址 Uri uri = Uri.parse("http://c.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd21a519680db30f2442a70fa1.jpg"); // 修改图片 Postprocessor postProcessor = new BasePostprocessor(){ //重新Postprocessor名称. @Override public StringgetName() { return "postProcessor"; } //具体的进行绘制,bitmap就是下载过来的图片,绘制红色点状网络 @Override public void process(Bitmapbitmap) { for (int x = 0; x < bitmap.getWidth(); x += 2) { for (int y = 0; y < bitmap.getHeight(); y += 2) { //给图片点设置颜色,参数X轴,Y轴,颜色 bitmap.setPixel(x, y, Color.RED); } } } }; // 创建图片请求 ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri) //对加载进行处理.参数就是处理的模型Postprocessor对象. .setPostprocessor(postProcessor) .build(); // 控制加载 PipelineDraweeController controller = (PipelineDraweeController)Fresco.newDraweeControllerBuilder() .setOldController(sdv_fresco_modify.getController()) .setImageRequest(request) .build(); // 加载图片 sdv_fresco_modify.setController(controller);
12.动态展示图片,也就是在java代码里添加控件
//创建控件 //创建Fresco加载图片的控件对象 simpleDraweeView = new SimpleDraweeView(this); // 设置控件对象的宽高比,必须设置,参数浮点型,大于1,则宽度是高度的几倍. simpleDraweeView.setAspectRatio(0.5f); //使用控件,并添加到布局中 // 图片的地址 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() .setOldController(simpleDraweeView.getController()) .setImageRequest(request) .build(); // 加载图片 simpleDraweeView.setController(controller); // 将simpleDraweeView控件对象,添加到线性布局中 ll_fresco.addView(simpleDraweeView);
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
