Fresco使用二

转载请注明出处：http://blog.csdn.net/jingSummer/article/details/52852317

---

我们在上篇博文中总结了Fresco的基本介绍和各个模块之间的分工和方法，想了解的可以自行查看，在这篇，我们重点介绍一下实际的代码操作。
Fresco那么多的功能，我们不可能都介绍到，所以在这里只是介绍几个使用比较多的效果：

图片的占位图显示
图片下载失败图和重新加载图
图片的缩放介绍
圆形图片和圆角图片
进度条
覆盖图
低分辨率图先显示
gif图展示

好了，我们直接进入正题，下面是满满的干货，如果还有对Fresco不知道怎么配置的，请查看上篇博客Fresco使用一。

图片的占位图展示：

XML设置：

<com.facebook.drawee.view.SimpleDraweeView   android:id="@+id/simple_view"   android:layout_width="130dp"   android:layout_height="130dp"   fresco:placeholderImage="@mipmap/ic_launcher"   />

重点是placeholderImage属性，加上这个属性占位图显示的妥妥的。

fresco:placeholderImage=”@mipmap/ic_launcher”

代码中：

Uri uri = Uri.parse("图片地址");SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);draweeView.setImageURI(uri);

最后效果图如下所示：

大家应该看到了在网络图片加载出来之前占位图的展示，但是因为我测试的时候网络比较给力，所以占位图显示的时间比较短。

图片的缩放

XML中：我们在ImageView里面有一个ScaleType的属性，在Fresco中，这个属性和ImageView里面的大部分是相同的，这里我就主要介绍不同的属性：FocusCrop，FocusCrop可以自己指定对其缩放的点。
XML

<com.facebook.drawee.view.SimpleDraweeView    android:id="@+id/simpleView1"    android:layout_width="match_parent"    android:layout_height="150dp"    fresco:placeholderImage="@color/placeHolder" /><com.facebook.drawee.view.SimpleDraweeView    android:id="@+id/simple_scaltype"    android:layout_width="match_parent"    android:layout_height="150dp"    fresco:actualImageScaleType="focusCrop"    fresco:placeholderImage="@color/placeHolder" />

第二个是设置了ScaleType属性的SimpleDraweeView,我们设置了focusCrop之后，之前说了focusCrop是自己指定缩放点的，所以我们需要再代码里面添加指定点

simpleDraweeViewScalType.getHierarchy().setActualImageFocusPoint(new PointF(0,0));    simpleDraweeViewScalType.setImageURI(ImageUri.getBaseImage());

注：FocusCrop需要在代码里面添加FocusPoint(),其中(0f, 0f) 是左上对齐显示，(1f, 1f) 是右下角对齐,(0.5,0.5f)就和centerCrop一样了。

如果基本的scaleType不满足大家的需求,我们还可以自定义ScalType,具体方式大家参考:http://fresco-cn.org/docs/scaling.html
效果如下，可以看到第二张是左上角对齐缩放：

给图片添加淡入淡出动画效果

XML中

<com.facebook.drawee.view.SimpleDraweeView     android:id="@+id/simpleView_fade"     android:layout_width="match_parent      android:layout_height="match_parent"     fresco:placeholderImage="@color/placeHolder"     fresco:fadeDuration="3000"     />

fresco:fadeDuration=”3000”属性设置动画持续时间为3秒钟，我这里只是为了看效果，所以把时间设置的长了点。

代码中：

simpleDraweeViewFade.setImageURI("uri");

注：如果我们不在XML里面设置渐变动画持续时间，可以在代码里面实现：

simpleDraweeViewFade.getHierarchy().setFadeDuration(3000);  simpleDraweeViewFade.setImageURI("uri");

实现效果如下所示：

设置圆形,圆角图片

圆形图片XML

<com.facebook.drawee.view.SimpleDraweeView                android:id="@+id/simpleView_circle"                android:layout_width="match_parent"                android:layout_height="200dp"                android:layout_marginTop="20dp"                fresco:roundAsCircle="true" />

fresco:roundAsCircle=”true” 设置为true之后我们加载出来的图片就是圆形的了，是不是so easy!

圆角图片 XML

<com.facebook.drawee.view.SimpleDraweeView     android:id="@+id/simpleView_corner"     android:layout_width="match_parent"     android:layout_height="200dp"     android:layout_margin="10dp"     fresco:roundedCornerRadius="10dp"     />

fresco:roundedCornerRadius=”10dp” 设置圆角图片的角半径

添加了这句话我们的圆角图片也设置好了，然后再java代码中加载图片就可以了。

除了上面之外，我们对圆角图片还可以指定设置那个角变圆，那个不变：

fresco:roundTopLeft="true" // 左上角是否为圆角fresco:roundTopRight="false"fresco:roundBottomLeft="false"fresco:roundBottomRight="true"

除了XML中设置之外，我们还可以在代码中进行设置，但是我还是比较喜欢在XML中直接设置出来，简单有效，代码中设置的我也会在后面的demo中给出。
具体实现效果：

异常显示图片

加载图片的时候肯定会遇到图片加载异常显示的时候，我们可以在图片加载失败的时候显示加载失败的图片而不至于是空白的，怎么显示加载失败图片呢：

XML

    <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/simpleView_faile"        android:layout_width="match_parent"        android:layout_height="200dp"        fresco:placeholderImage="@color/placeHolder"        fresco:failureImage="@drawable/failure"        />

fresco:failureImage=”@drawable/failure”

添加这句话就可以了，然后在代码中设置setImageURI（”uri”）,就实现了在图片加载失败的时候显示失败占位图。

但是如果我们的需求是在下载失败之后，提示一个点击重新重新下载的图片是怎么实现的呢？
XML

 <com.facebook.drawee.view.SimpleDraweeView     android:id="@+id/simpleView_retry"     android:layout_width="match_parent"     android:layout_height="200dp"     fresco:placeholderImage="@color/placeHolder"     fresco:failureImage="@drawable/failure"     fresco:retryImage="@drawable/image_retry"     />

fresco:retryImage=”@drawable/image_retry”

加上retryImage这个属性设置之后并不能就在加载失败之后显示重新加载图片的提示图，我们还需要再代码中添加setTapToRetryEnabled（true），才可以生效，当点击4次重新加载图片还是没有生效的时候，就显示下载失败图。

  PipelineDraweeControllerBuilder builder = Fresco.newDraweeControllerBuilder();        AbstractDraweeController controller = builder                .setTapToRetryEnabled(true)  // 必须在代码中设置这句话,否则即使在XMl中设置了retryImage也是无效                .setUri(ImageUri.getErrorImage())                .build();        simpleDraweeViewRetry.setController(controller);

效果图如下：

显示进度条

虽然这种需求我目前还没有遇到过，但是既然人家Fresco提供了，我们就看看效果：
XML中什么都没有配置

    <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/simpleView_progressBar"        android:layout_width="match_parent"        android:layout_height="match_parent"        />

代码中：

GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());GenericDraweeHierarchy hierarchy = builder                .setProgressBarImage(new ProgressBarDrawable())                .build();        progressBarView.setHierarchy(hierarchy);        progressBarView.setImageURI(ImageUri.getImageProgressBar());

这里设置的进度条是Fresco提供的默认的，加载的效果就是这样的：

大家应该是可以看到在图片完全加载之前，底部蓝色的进度条的，因为网速比较给力，所以看不出慢慢加载的样式，其实和手机加载浏览器时，显示的进度条差不多的。

很多人不喜欢这种条状的进度条，但是想要在加载出来图片之前，显示一个加载的小动画，

XML

   <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/simpleView_progressBar"        android:layout_width="match_parent"        android:layout_height="match_parent"        fresco:placeholderImage="@color/placeHolder"        fresco:progressBarAutoRotateInterval="1000"        fresco:progressBarImage="@mipmap/ic_launcher"        fresco:progressBarImageScaleType="centerInside"        />

代码中只需要添加setImageURI() 就可以了，这里我就随便加载了一张图，大体效果就是酱紫。

添加覆盖图层

 <com.facebook.drawee.view.SimpleDraweeView      android:id="@+id/simpleView_overLay"      android:layout_width="match_parent"      android:layout_height="200dp"      fresco:overlayImage="@color/overlay"      /><com.facebook.drawee.view.SimpleDraweeView     android:id="@+id/simpleView_press_overlay"     android:layout_width="match_parent"     android:layout_height="200dp"     fresco:pressedStateOverlayImage="@color/overlay"     />

fresco:overlayImage 是用来添加图片的覆盖图层，可以使图片或者颜色
fresco:pressedStateOverlayImage是用来添加图片点击时候的覆盖图层，可以使图片或者颜色

在代码中设置setImageUri就可以了，效果图如下，下面的是在图片点击的时候，才给图片添加的蒙层效果。

低分辨率图片显示

我们如果需要显示高清的图片，但是又不想叫用户等待太长的时间，可以在加载高分辨率图片完成之前，先加载一个低分辨率的图片，在XML中不需要设置什么，代码中添加如下：

        PipelineDraweeControllerBuilder pipelineDraweeControllerBuilder = Fresco.newDraweeControllerBuilder();        AbstractDraweeController controller = pipelineDraweeControllerBuilder                .setOldController(simpleDraweeView.getController())                .setLowResImageRequest(ImageRequest.fromUri(ImageUri.getLowResImage()))  // 设置低分辨率                .setUri(ImageUri.getHighResImage()) // 设置高分辨率                .setTapToRetryEnabled(true)                .build();        simpleDraweeView.setController(controller);

分别设置低分辨率和高分辨率图片，为了方便大家理解，我在这里就把低分辨的图片使用的是个人物的图片，但是一般情况下，我们都会在加载的时候的显示的低分辨率图片是和高分辨率图片相同的图，来使衔接好一些。

加载gif图

在加载gif这边，Fresco做的比较不错了，不会出现卡顿得问题。
XML，因为gif图比较大，所以我们在加载gif图之前添加了progressBarImage，不至于是等待太枯燥。

    <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/simpleView_gif"        android:layout_width="match_parent"        android:layout_height="match_parent"        fresco:placeholderImage="@color/placeHolder"        fresco:progressBarAutoRotateInterval="1000"        fresco:progressBarImage="@mipmap/ic_launcher"        fresco:progressBarImageScaleType="centerInside"        />

代码中：

        PipelineDraweeControllerBuilder pipelineDraweeControllerBuilder = Fresco.newDraweeControllerBuilder();        AbstractDraweeController controller = pipelineDraweeControllerBuilder                .setUri(ImageUri.getGifImage())                .setAutoPlayAnimations(true)  // 加载gif图一定要添加setAutoPlayAnimations为true                .build();        simpleDraweeViewgif.setController(controller);

注：加载gif图一定要添加setAutoPlayAnimations，否则下载下来的gif不会自动播放，如果我们不添加这个的话，也可以在图片下载监听的Listener里面调用anim.satrt手动开始动画，这里就不写了。

好了，基本的使用就写到这里吧，想要更加详细的代码，可以下载Demo:
https://github.com/gitjing/MyFrescoDemo