开始使用Fresco

类库发布到了Maven中央库:

1. Android Studio 或者 Gradle

dependencies {
  compile 'com.facebook.fresco:fresco:0.9.0+'
}
官方文档已经说fresco的类库发布到了Maven中央库,所以我们只需添加上面的代码再同步编译即可,如果无效,请在project的build.gradle文件中添加以下红色代码:
 allprojects {
    repositories {
        jcenter()
        mavenCentral()
         }
    }
这样你就可以在你项目中使用fresco。

2. Intellij IDEA 或者 Maven:

这是一个在 Intellij IDEA 的工程简单示例: https://github.com/liaohuqiu/fresco-demo-for-maven ,可供参考。 在这个 issue 解决之前,pom 中相关依赖缺少 type 字段,通过以下方式无法直接引入: <dependency>   <groupId>com.facebook.fresco</groupId>   <artifactId>fresco</artifactId>   <version>LATEST</version> </dependency> 需要这样: <!-- use this version, exclude all the other version from the other libraries. --> <dependency>     <groupId>com.android.support</groupId>     <artifactId>support-v4</artifactId>     <version>21.0.3</version>     <type>aar</type> </dependency> <!-- begin of fresco --> <dependency>     <groupId>com.facebook.fresco</groupId>     <artifactId>fresco</artifactId>     <version>0.9.0</version>     <type>aar</type>     <exclusions>         <exclusion>             <groupId>com.android.support</groupId>             <artifactId>support-v4</artifactId>         </exclusion>         <exclusion>             <groupId>com.facebook.fresco</groupId>             <artifactId>*</artifactId>         </exclusion>     </exclusions> </dependency> <dependency>     <groupId>com.facebook.fresco</groupId>     <artifactId>fbcore</artifactId>     <type>aar</type>     <version>0.9.0</version> </dependency> <dependency>     <groupId>com.facebook.fresco</groupId>     <artifactId>drawee</artifactId>     <type>aar</type>     <version>0.9.0</version>     <exclusions>         <exclusion>             <groupId>com.android.support</groupId>             <artifactId>support-v4</artifactId>         </exclusion>         <exclusion>             <groupId>com.facebook.fresco</groupId>             <artifactId>fbcore</artifactId>         </exclusion>     </exclusions> </dependency> <dependency>     <groupId>com.facebook.fresco</groupId>     <artifactId>imagepipeline</artifactId>     <type>aar</type>     <version>0.9.0</version>     <exclusions>         <exclusion>             <groupId>com.android.support</groupId>             <artifactId>support-v4</artifactId>         </exclusion>         <exclusion>             <groupId>com.facebook.fresco</groupId>             <artifactId>fbcore</artifactId>         </exclusion>     </exclusions> </dependency> <!-- end of fresco --> 很丑陋对吧,抱歉目前暂时只能这样,有更好的办法请一定告诉我。 刷新 Maven 工程,下载引用,下载完成之后,将: gen-external-apklibs/com.facebook.fresco_imagepipeline_{版本号}/jni 目录下的三个文件夹:armeabi,armeabi-v7a,x86 这三个文件夹拷贝到 libs 文件夹下。

3. Eclipse ADT

首先,下载这个文件. 解压后,你会看到一个目录:frescolib,注意这个目录。 从菜单 “文件(File)”,选择导入(Import) 展开 Android, 选择 "Existing Android Code into Workspace", 下一步。 浏览,选中刚才解压的的文件中的 frescolib 目录。 这5个项目应该都会被添加到工程: drawee, fbcore, fresco, imagepipeline, imagepipeline-okhttp。请确认前4个项目一定是被选中的。点击完成。 右键,项目,选择属性,然后选择 Android。 点击右下角的 Add 按钮,选择 fresco,点击 OK,再点击 OK。 现在,fresco 就导入到项目中了,你可以开始编译了。如果编译不通过,可以尝试清理资源,或者重启 Eclipse。 如果你想在网络层使用 OkHttp,请看这里. 如果 support-v4 包重复了,删掉 frescolib/imagepipeline/libs 下的即可。

4.官方的项目,编译起来比较困难,如果你仅仅是想看 DEMO 运行效果

 可以参考这个https://github.com/liaohuqiu/fresco-demo-for-gradle

5:开始使用

  

        如果你仅仅是想简单下载一张网络图片,在下载完成之前,显示一张占位图,那么简单使用SimpleDraweeView 即可。

   为了下载网络图片,请确保在 AndroidManifest.xml 中有以下权限:

          <uses-permission android:name="android.permission.INTERNET"/>

   在 Application 初始化时,在应用调用 setContentView() 之前,进行初始化:

     Fresco.initialize(context);

  在xml布局文件中, 加入命名空间:
<!-- 其他元素 -->
<LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fresco="http://schemas.android.com/apk/res-auto">

加入SimpleDraweeView:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="20dp"
    android:layout_height="20dp"
    fresco:placeholderImage="@drawable/my_drawable"
  />

开始加载图片

  Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/fresco-logo.png");
  SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
  draweeView.setImageURI(uri);

剩下的,Fresco会替你完成:

  • 显示占位图直到加载完成;
  • 下载图片;
  • 缓存图片;
  • 图片不再显示时,从内存中移除;

6.现在介绍一些fresco的属性,通过这些属性我们可以很方便的定制一些效果


<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="20dp"   // 不支持wrap_content 如果要设置宽高比, 需要在Java代码中指定setAspectRatio(1.33f);
    android:layout_height="20dp"    // 不支持wrap_content 
    fresco:fadeDuration="300"
    fresco:actualImageScaleType="focusCrop"
 // 设置图片缩放. 通常使用focusCrop,该属性值会通过算法把人头像放在中间
    fresco:placeholderImage="@color/wait_color"
 // 下载成功之前显示的图片
    fresco:placeholderImageScaleType="fitCenter"
    fresco:failureImage="@drawable/error"
// 加载失败的时候显示的图片
    fresco:failureImageScaleType="centerInside"
    fresco:retryImage="@drawable/retrying"
// 加载失败,提示用户点击重新加载的图片(会覆盖failureImage的图片)
    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"
// 圆角角度,180的时候会变成圆形图片
    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"
  />
修改图片尺寸
Uri uri = "file:///mnt/sdcard/MyApp/myfile.jpg";
int width = 50, height = 50;
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
    .setResizeOptions(new ResizeOptions(width, height))
    .build();
PipelineDraweeController controller = Fresco.newDraweeControllerBuilder()
    .setOldController(mDraweeView.getController())
    .setImageRequest(request)
    .build();
mSimpleDraweeView.setController(controller);
自动旋转
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
    .setAutoRotateEnabled(true)
    .build();

posted @ 2016-05-23 23:16  vegatate  阅读(178)  评论(0编辑  收藏  举报