fresco的简单使用

最新推荐文章于 2019-01-19 02:20:18 发布

牙上的韭菜

最新推荐文章于 2019-01-19 02:20:18 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/yz1743585120/article/details/84573492

版权

1.Fresco的环境搭建

（1）在项目的build.grade文件里添加依赖(注意:因为Fresco进行了包的拆分,用到哪个功能就添加对应的依赖,可以减少APP的体积)

//基本依赖
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）在app

<uses-permissiplication中初始化(记得在清单文件里配置application)

Fresco.initialize(this);

（3）配置网络权限 <uses-permission android:name="android.permission.INTERNET"/>

（4）在xml布局文件中,加入命名空间

	xmlns:fresco="http://schemas.android.com/apk/res-auto"

（5）在xml中引入SimpleDraweeView控件(fresco:placeholderImage="@drawable/my_drawable":默认占位图片)

<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.对图片进行不同的裁剪

 mBuilder = new GenericDraweeHierarchyBuilder(getResources());


@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_center:
                GenericDraweeHierarchy center = mBuilder.setActualImageScaleType(ScalingUtils.ScaleType.CENTER).build();
                imageDisplay(center);
                break;
            case R.id.btn_centercrop:
                GenericDraweeHierarchy center_crop = mBuilder.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_CROP).build();
                imageDisplay(center_crop);
                break;
            case R.id.btn_focuscrop:
                PointF pointF = new PointF(0, 0);
                GenericDraweeHierarchy focus_crop = mBuilder.setActualImageScaleType(ScalingUtils.ScaleType.FOCUS_CROP).setActualImageFocusPoint(pointF).build();
                imageDisplay(focus_crop);
                break;
            case R.id.btn_centerinside:
                GenericDraweeHierarchy center_inside = mBuilder.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE).build();
                imageDisplay(center_inside);
                break;
            case R.id.btn_fitcenter:
                GenericDraweeHierarchy fit_center = mBuilder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_CENTER).build();
                imageDisplay(fit_center);
                break;
            case R.id.btn_fitstart:
                GenericDraweeHierarchy fit_start = mBuilder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_START).build();
                imageDisplay(fit_start);
                break;
            case R.id.btn_fitend:
                GenericDraweeHierarchy fit_end = mBuilder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_END).build();
                imageDisplay(fit_end);
                break;
            case R.id.btn_fitxy:
                GenericDraweeHierarchy fit_xy = mBuilder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_XY).build();
                imageDisplay(fit_xy);
                break;
            case R.id.btn_none:
                GenericDraweeHierarchy none = mBuilder.setActualImageScaleType(null).build();
                imageDisplay(none);
                break;
        }
    }



private void imageDisplay(GenericDraweeHierarchy center) {
        Uri uri = Uri.parse("https://ws1.sinaimg.cn/large/0065oQSqly1fuo54a6p0uj30sg0zdqnf.jpg");
        sdv_fresco_crop.setHierarchy(center);
        sdv_fresco_crop.setImageURI(uri);
    }

5.圆形图片和圆角图片

//加载图片的网址
uri = Uri.parse("https://ws1.sinaimg.cn/large/0065oQSqly1fubd0blrbuj30ia0qp0yi.jpg");

//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("https://ws1.sinaimg.cn/large/0065oQSqly1fubd0blrbuj30ia0qp0yi.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 QualityInfo getQualityInfo(int scanNumber) {




boolean isGoodEnough = (scanNumber >= 5);



return ImmutableQualityInfo.of(scanNumber, isGoodEnough, false);



 }


 };

//上面的和下面一行是固定代码.使用使复制粘贴即可


ImagePipelineConfig.newBuilder(this).setProgressiveJpegConfig(jpegConfig).build();

// 创建 ImageRequest 对象.


ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)//设置URL


.setProgressiveRenderingEnabled(true)//打开渐进 渲染


.build();

 DraweeController draweeController = Fresco.newDraweeControllerBuilder()

//必须要设置ImageRequest对象,里面包含了图片的网址.


.setImageRequest(request)

//开启用户点击重新加载图片的功能


.setTapToRetryEnabled(true)

//会复用以前的对象,可以节省内存.


.setOldController(sdv_fresco_jpeg.getController())

 .build();

// 1设置加载的控制


sdv_fresco_jpeg.setController(draweeController);

7.GIF动画图片


//请求GIF动画,采用MVC的设计模式(注意加载GIF动画还要添加依赖)
/* 支持 GIF 动图，需要添加:compile 'com.facebook.fresco:animated-gif:0.14.1' */
//GIF动画网址,加载需要一段时间
Uri uri = Uri.parse("https://ws1.sinaimg.cn/large/0065oQSqly1fubd0blrbuj30ia0qp0yi.jpg");


 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://img1.gamedog.cn/2012/03/11/19-120311133617-50.jpg");


 Uri highUri = Uri.parse("http://img5.duitang.com/uploads/item/201312/03/20131203153823_Y4y8F.jpeg");

// 控制加载图片


DraweeController controller = Fresco.newDraweeControllerBuilder()

//一开始加载一个低分辨率的URL


.setLowResImageRequest(ImageRequest.fromUri(lowUri))

//然后加载一个高分辨率的URL,你真正要加载的图片


.setImageRequest(ImageRequest.fromUri(highUri))

 .build();

// 加载图片


sdv_fresco_multi.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();

// 加载图片


sdv_fresco_multi.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(sdv_fresco_multi.getController())


 .build();

// 加载图片


sdv_fresco_multi.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 QualityInfo getQualityInfo(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(String id, 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(String id, ImageInfo imageInfo) {




super.onIntermediateImageSet(id, imageInfo);



tv_fresco_listener2.setText("IntermediateImageSet image receiced");



 }

// 加载图片失败回调


@Override

public void onFailure(String id, 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 String getName() {

    return "postProcessor";

 }


//具体的进行绘制,bitmap就是下载过来的图片,绘制红色点状网络
@Override
public void process(Bitmap bitmap) {
    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);

11.动态展示图片,也就是在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);

牙上的韭菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fresco的简单使用

1.Fresco的环境搭建（1）在项目的build.grade文件里添加依赖(注意:因为Fresco进行了包的拆分,用到哪个功能就添加对应的依赖,可以减少APP的体积)//基本依赖compile 'com.facebook.fresco:fresco:0.14.1'// 仅支持 WebP 静态图，需要添加compile 'com.facebook.fresco:webpsupp...
复制链接

扫一扫