1. 写在前面

好久没写博客了，最近在对公司的项目进行重构和优化，针对图片加载框架的修改，原来使用的是Glide，现在改成Facebook的fresco来做对比。先介绍fresco的基本使用。

2. 库的依赖配置

我这里用的IDE是Android Studio，对于库支持的使用配置比较简单，如下：在module的gradle中加入库的依赖引用。

dependencies { 
  /************图片加载框架fresco库开始**************/ 
  compile 'com.facebook.fresco:fresco:0.12.0' 
  /************图片加载框架fresco库结束**************/
} 

这样就可以使用fresco库来加载图片了，是不是很简单。当然fresco库远不止这些，这是一个很强大的库，如要支持webP格式的图片，Gif图片。还可以引入如下的库：

dependencies { 
/************图片加载框架fresco库开始**************/ 
 compile 'com.facebook.fresco:fresco:0.12.0' 
// 在API < 14的系统如也要支持 webP图片的话加入 
compile 'com.facebook.fresco:animated-base-support:0.12.0' 
// 支持Gif图片，需加入 
compile 'com.facebook.fresco:animated-gif:0.12.0' 
// 支持webP图片的动态图，需加入 
compile 'com.facebook.fresco:animated-webp:0.12.0' 
// 支持webP图片的静态图，需加入 
compile 'com.facebook.fresco:webpsupport:0.12.0'  
/************图片加载框架fresco库结束**************/
}

webp格式图片，进一步的优化了图片资源的大小，加载的效率更高了，提升了app的性能。为了迎合官方推广使用Android Studio，这里就不多介绍fresco在Eclipse中的使用，这里附上库的下载包：zip文件# 3. 使用fresco来加载图片首先在加载图片前需要对框架做初始化的操作，通过调用Fresco.initialize方法一次就可以初始化。因为多次调用此方法是一样的，所以作为初始化的地方最好的位置就是 Application的onCreate里：

public class MyApplication extends Application { 
  @Override 
  public void onCreate() { 
    super.onCreate(); Fresco.initialize(this); 
  }
}

注意事项：一般情况下这样就可以了，但是对于多进程的应用来说，不同的进程都会执行一次Application的onCreate方法，那就意味着在onCreate里的一些初始化操作会多次执行，多少对于应用的性能是有影响的。那对于多进程环境的应用可以有如下解决方案（伪代码，就是这么随意任性）：

public class MyApplication extends Application { 
    @Override 
    public void onCreate() { 
      super.onCreate(); 
      String curProcessName = 获取当前进程的名字 
      String needUseFrescoProcessName = 需要使用fresco组件库来加载图片的进程名字 
      if(curProcessName.equals(needUseFrescoProcessName)) { 
        // 当前进程就是需要加载fresco组件的进程，才初始化组件 
        Fresco.initialize(this); 
        // 同理其它的一些组件也是，如：第三方分享组件，统计组件，支付组件等等 
      }  
    }
}

我们先加载一张网络图片，那就需要网络权限，在manifest中加入，别加入自己的Application：

<manifest ... > 
<uses-permission android:name="android.permission.INTERNET" /> 
<application ... android:label="@string/app_name" android:name=".MyApplication" > 
... 
</application>
 ... 
</manifest>

fresco为我们提供了一个图片显示控件SimpleDraweeView，这个控件基本上能满足我们绝大多数的需求，使用也很简单：

<com.facebook.drawee.view.SimpleDraweeView 
xmlns:fresco="http://schemas.android.com/apk/res-auto" 
android:id="@+id/sdv_head_image" 
android:layout_width="50dp" 
android:layout_height="50dp" 
fresco:placeholderImage="@drawable/ic_wait_image"/>

因为要用到控件的自定义属性，所以需要引入自定义的命名空间fresco。placeholderImage顾名思义，就是图片还在加载，下载的时候，等待期间显示的图片，可以是drawable图片也可以是color颜色。下面来加载一张网络图片：

SimpleDraweeView headImage = 
(SimpleDraweeView)findViewById(R.id.sdv_head_image); Uri headUri = 
Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/logo.png"); headImage.setUri(headUri);

是不是很简单，只要把图片的地址用Uri包装起来，设置给SimpleDraweeView，fresco就会帮你去显示占位符图片，下载，缓存，在图像不可见的时候及时的回收图片占用的内存。so easy~~Uri包装不同的图片格式如下：

| 类型 | SCHEME | 示例 |
| ------------- |:-------------|: -----|
| 远程图片 | http://, https:// | HttpURLConnection 或者参考 使用其他网络加载方案|
|本地文件 |file:// | FileInputStream
|Content provider| content://| ContentResolver
|asset目录下的资源| asset://| AssetManager|
|res目录下的资源| res://| Resources.openRawResource|
|Uri中指定图片数据| data:mime/type;base64,| 数据类型必须符合 rfc2397规定 (仅支持 UTF-8)|

3.1. 在xml中配置SimpleDraweeView的属性

<com.facebook.drawee.view.SimpleDraweeView       
    xmlns:fresco="http://schemas.android.com/apk/res-
    auto" android:id="@+id/sdv_head_image" 
    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" 
    fresco:viewAspectRatio="1.0"/>

解释下属性的意思：

好了xml中的属性配置就介绍完了，相信有些小伙伴会有个疑问，我第一次使用SimpleDraweeView，怎么会知道它会有这么些自定义的属性可以使用呢！

3.2. 如何查找SimpleDraweeView控件中都有哪些可用的自定义属性

首先，查看SimpleDraweeView的源码

public class SimpleDraweeView extends GenericDraweeView { 
    // ...省略一些代码 
    public SimpleDraweeView(Context context, AttributeSet attrs) { 
        super(context, attrs); 
        init(context, attrs); 
    }  
    private void init(Context context, @Nullable AttributeSet attrs) {
       if (isInEditMode()) { return; }     
       Preconditions.checkNotNull( sDraweeControllerBuilderSupplier, 
"SimpleDraweeView was not initialized!");   
        mSimpleDraweeControllerBuilder = sDraweeControllerBuilderSupplier.get();  
        if (attrs != null) { 
            TypedArray gdhAttrs = context.obtainStyledAttributes( attrs, R.styleable.SimpleDraweeView); 
            try { 
                if (gdhAttrs.hasValue(R.styleable.SimpleDraweeView_actualImageUri)) {     
                    setImageURI(Uri.parse(gdhAttrs.getString(R.styleable.Si
mpleDraweeView_actualImageUri)), null); 
                } 
            } finally { 
                gdhAttrs.recycle(); 
            }
         } 
    }
}

很容易就找到了声明属性的属性集：R.styleable.SimpleDraweeView，接下来我们需要找到声明这个属性集合的values.xml，如下：

属性声明处

属性声明处

看这就找到了xml里面配置的所有属性，是不是很简单！细心的小伙伴会发现R.styleable.SimpleDraweeView下定义的属性就一个actualImageUri，其它的属性是定义在R.styleable.GenericDraweeHierarchy下的，不禁心想博主你特么在逗我么！我能说冤枉么（55555~~~），别急小伙伴们，下面就来分析问你解惑，fresco是在哪里为我们加载和解析了我们xml配置的那些属性呢。

其次，分析fresco如何加载xml配置的属性

看SimpleDraweeView的源码会发现，它的父类是GenericDraweeView，我们来跟踪这个父类：

public class GenericDraweeView extends DraweeView<GenericDraweeHierarchy> { 
// ...省略一些代码 
    public GenericDraweeView(Context context, AttributeSet attrs) { 
      super(context, attrs);
      inflateHierarchy(context, attrs); 
    } 
    protected void inflateHierarchy(Context context, @Nullable AttributeSet attrs) { 
        GenericDraweeHierarchyBuilder builder = GenericDraweeHierarchyInflater.inflateBuilder(context, 
attrs); 
        setAspectRatio(builder.getDesiredAspectRatio());         
        setHierarchy(builder.build()); 
    }
}

可以看到属性的构建交给了GenericDraweeHierarchyInflater.inflateBuilder方法，继续跟踪下去：

public static GenericDraweeHierarchyBuilder inflateBuilder( Context context, @Nullable AttributeSet attrs) { 
    Resources resources = context.getResources();     
    GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(resources); 
    return updateBuilder(builder, context, attrs); 
}

继续跟踪updateBuilder方法：

public static GenericDraweeHierarchyBuilder updateBuilder( GenericDraweeHierarchyBuilder builder, Context context, @Nullable AttributeSet attrs) { 
    // ...省略了一些代码  
    if (attrs != null) { 
        TypedArray gdhAttrs = context.obtainStyledAttributes( attrs, R.styleable.GenericDraweeHierarchy);
        try { 
            final int indexCount = gdhAttrs.getIndexCount(); 
            for (int i = 0; i < indexCount; i++) { 
            final int attr = gdhAttrs.getIndex(i); 
            // most popular ones first 
            if (attr == R.styleable.GenericDraweeHierarchy_actualImageScaleType) { 
                builder.setActualImageScaleType(getScaleTypeFromXml(gdhAttrs, attr)); 
            } else if (attr == R.styleable.GenericDraweeHierarchy_placeholderImage) { 
                builder.setPlaceholderImage(getDrawable(context, gdhAttrs, attr)); 
            } 
        } 
      }
}

终于找到梦寐以求的R.styleable.GenericDraweeHierarchy，然后是一个个去遍历获取每个属性的值，设置给GenericDraweeHierarchyBuilder构造器。调用触发是在SimpleDraweeView的构造器里的super(context, attrs），经过层层调用由updateBuilder完成了所有属性的加载和解析赋值。

文章有点长，感谢耐心看完！fresco基本的加载图片的使用就是这样。后面我会陆续写一些重构和优化项目时，使用fresco的一些特性，和Glide框架的对比，优缺点等等内容。希望此文能带给小伙伴们些许帮助。谢谢~