框架Fresco的使用

         Fresco是一个强大的图片加载组件。Fresco中设计有一个叫做image pipeline的模块。它负责从网络，从本地文件系统，本地资源加载图片。为了最大限度节省空间和CPU时间，它含有3级缓存设计（2级内存，1级文件）。Fresco中设计有一个叫做Drawees模块，方便地显示loading图，当图片不再显示在屏幕上时，及时地释放内存和空间占用。Fresco支持Android2.3(API level 9)及其以上系统。

      

内存管理

一个没有未压缩的图片，即Android中的Bitmap，占用大量的内存。大的内存占用势必引发更加频繁的GC。在5.0以下，GC将会显著地引发界面卡顿。在5.0以下系统，Fresco将图片放到一个特别的内存区域。当然，在图片不显示的时候，占用的内存会自动被释放。这会使得APP更加流畅，减少因图片内存占用而引发的OOM。Fresco在低端机器上表现一样出色，你再也不用因图片内存占用而思前想后。

图片的渐进式呈现

渐进式的JPEG图片格式已经流行数年了，渐进式图片格式先呈现大致的图片轮廓，然后随着图片下载的继续，呈现逐渐清晰的图片，这对于移动设备，尤其是慢网络有极大的利好，可带来更好的用户体验。

Android本身的图片库不支持此格式，但是Fresco支持。使用时，和往常一样，仅仅需要提供一个图片的URI即可，剩下的事情，Fresco会处理。

Gif图和WebP格式

是的，支持加载Gif图，支持WebP格式。

图像的呈现

Fresco的Drawees设计，带来一些有用的特性：

• 自定义居中焦点(对人脸等图片显示非常有帮助)。
• 圆角图，当然圆圈也行。
• 下载失败之后，点击重现下载。
• 自定义占位图，自定义overlay, 或者进度条。
• 指定用户按压时的overlay。

图像的加载

Fresco的image pipeline设计，允许用户在多方面控制图片的加载：

• 为同一个图片指定不同的远程路径，或者使用已经存在本地缓存中的图片。
• 先显示一个低解析度的图片，等高清图下载完之后再显示高清图。
• 加载完成回调通知。
• 对于本地图，如有EXIF缩略图，在大图加载完成之前，可先显示缩略图。
• 缩放或者旋转图片。
• 处理已下载的图片。
• WebP支持。

      

1）添加依赖库。
目前git上的版本是0.11.0

1 2 3 4 5 6

dependencies {      compile fileTree(include: [ '*.jar' ], dir:  'libs' )      testCompile  'junit:junit:4.12'      compile  'com.android.support:appcompat-v7:23.4.0'      compile  'com.facebook.fresco:fresco:0.11.0' }

　　

2）然后如果你是多次用到Fresco，建议在 Application 初始化，如果只是写着玩，就在应用调用 setContentView() 之前，进行初始化：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

package  com.example.nanchen.imageloadfrescodemo;   import  android.app.Application;   import  com.facebook.drawee.backends.pipeline.Fresco;   /**   * Created by 南尘 on 2016/7/11.   */ public  class  MyApplication  extends  Application {        @Override      public  void  onCreate() {          super .onCreate();          Fresco.initialize( this );      } }

　　

 

 

3）因为我这里加载的是一张网络图片，所以要获得网络权限
<uses-permission android:name="android.permission.INTERNET"/>

4）用人家的框架就要按照人家的要求来是不，所以控件名字，命名空间都要听人家的
Fresco不同于其它几个图片加载库，它是基于自定义控件的，要使用控件SimpleDraweeView来显示图片，
注意，控件不支持宽高同时设置为wrap_content，默认强制设置宽高，否则不显示图片

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<?xml version= "1.0"  encoding= "utf-8" ?> <RelativeLayout      xmlns:android= "http://schemas.android.com/apk/res/android"      xmlns:tools= "http://schemas.android.com/tools"      xmlns:fresco= "http://schemas.android.com/apk/res-auto"      android:layout_width= "match_parent"      android:layout_height= "match_parent"      tools:context= "com.example.nanchen.imageloadfrescodemo.MainActivity" >          <!--<com.facebook.drawee.view.SimpleDraweeView-->          <!--android:layout_width= "50dp" -->          <!--android:layout_height= "50dp" -->          <!--android:id= "@+id/main_simple_drawee_view" -->          <!--fresco:placeholderImage= "@mipmap/ic_launcher" />-->        <com.facebook.drawee.view.SimpleDraweeView          android:layout_width= "400dp"          android:layout_height= "match_parent"          android:id= "@+id/main_simple_drawee_view"          fresco:placeholderImage= "@mipmap/ic_launcher" />       </RelativeLayout>

　　

5）在activity中加载图片显示，Fresco 不支持相对路径的URI. 所有的URI都必须是绝对路径，并且带上该URI的scheme。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

package  com.example.nanchen.imageloadfrescodemo;   import  android.net.Uri; import  android.os.Bundle; import  android.support.v7.app.AppCompatActivity;   import  com.facebook.drawee.backends.pipeline.Fresco; import  com.facebook.drawee.interfaces.DraweeController; import  com.facebook.drawee.view.SimpleDraweeView;   public  class  MainActivity  extends  AppCompatActivity {        private  SimpleDraweeView sdv;        @Override      protected  void  onCreate(Bundle savedInstanceState) {          super .onCreate(savedInstanceState); //        Fresco.initialize(this);//Fresco的初始化，必须调用在setContentView之前          setContentView(R.layout.activity_main);            sdv = (SimpleDraweeView) findViewById(R.id.main_simple_drawee_view);            Uri uri =  Uri.parse( "http://dynamic-image.yesky.com/740x-/uploadImages/2015/163/50/690V3VHW0P77.jpg" ); //        sdv.setImageURI(uri);            DraweeController controller = Fresco.newDraweeControllerBuilder()                  .setUri(uri)                  .setAutoPlayAnimations( true )                  .build();          sdv.setController(controller);      } }

　　

运行效果如下：

 

• drawee支持如下属性：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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" //图片加载失败时显示，提示用户点击重新加载，重复加载4次还是没有加载出来的时候才会显示failureImage的图片 fresco:retryImageScaleType= "centerCrop"  //重新加载的图片缩放类型 fresco:progressBarImage= "@drawable/progress_bar"  //进度条图片 fresco:progressBarImageScaleType= "centerInside" fresco:progressBarAutoRotateInterval= "1000" //进度图自动旋转间隔时间(单位：毫秒ms) fresco:backgroundImage= "@color/blue" //背景图片，这里的背景图片首先被绘制 fresco:overlayImage= "@drawable/watermark" // 设置叠加图，在xml中只能设置一张叠加图片，如果需要多张图片的话，需要在java代码中设置哦 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"  //边框颜色

　　

 

上面的ImageScaleType有下面一些缩放类型：

 

类型	描述
center	居中，无缩放
centerCrop	保持宽高比缩小或放大，是的两边都大于或等于边界，且宽和高契合显示边界，居中显示
focusCrop	同centerCrop，但居中点不是中点，而是指定的某个点
centerInside	缩放图片使两边都在显示边界内，居中显示。和fitCenter不同，不会对图片进行放大。如果尺寸大于显示边界，则保持宽高比例缩小图片。
fitCenter	保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，且宽或高契合显示边界，居中显示。
fitStart	同上，但不居中，和显示边界左上对齐。
fitEnd	同fitCenter，但不居中，和显示边界右下对齐。
fitXY	不保存宽高比，填充满显示边界。
none	如果要使用tile mode显示，则需要设置为none

 

多图请求

有时候需要加载很多图片，这个时候如果网络情况不是很好的情况下，一直显示占位图，体验也不是很好，我们可以先显示一个低分辨率的图片，等到大图加载完成之后，在显示真正的图片。

1 2 3 4 5 6

DraweeController controller = Fresco.newDraweeControllerBuilder()      .setLowResImageRequest(ImageRequest.fromUri(lowResUri))      .setImageRequest(ImageRequest.fromUri(highResUri))      .setOldController(draweeView.getController())      .build(); draweeView.setController(controller);

当然如果你想监听加载的过程，就加一个ControllerListen

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

//写一个监听器 监听图片加载 ControllerListener listener =  new  BaseControllerListener(){        /**       * 当图片加载成功时会执行的方法       * @param id       * @param imageInfo       * @param animatable       */      @Override      public  void  onFinalImageSet(String id, Object imageInfo, Animatable animatable) {          super .onFinalImageSet(id, imageInfo, animatable);      }          /**       * 图片加载失败时调用的方法       * @param id       * @param throwable       */      @Override      public  void  onFailure(String id, Throwable throwable) {          super .onFailure(id, throwable);      }          /**       *  如果图片使用渐进式，这个方法将会被回调       * @param id       * @param throwable       */      @Override      public  void  onIntermediateImageFailed(String id, Throwable throwable) {          super .onIntermediateImageFailed(id, throwable);      } };   DraweeController controller = Fresco.newDraweeControllerBuilder()          .setUri(uri)          .setAutoPlayAnimations( true )          .setControllerListener(listener)          .build();   sdv.setController(controller);