Android强大的图片加载框架Fresco简单用法

来源:互联网 发布:常见的网络拓扑结构有 编辑:程序博客网 时间:2024/05/04 04:31

Android关于加载图片的框架有Universal-Image-Loader、Picasso、Volley、Fresco,这篇文章主要简单的分析一下Fresco的用法,Fresco是Facebook发布的一款开源框架,在内存方面的表现极为优秀。

Fresco中文说明:http://www.fresco-cn.org/

Fresco项目GitHub地址:https://github.com/facebook/fresco

假如有这样的一个需求当图片正在加载时应该呈现正在加载时的图像,当图片加载失败时应该呈现图片加载时的图像,当重新加载图片时,应该呈现重试时图像,直到这张图片加载完成。这时建议推荐用Fresco。

本例子请求的图片地址是存在的,如果想查看重新加载

Fresco用法及其简单:
在项目中引入Fresco,只需要在Module的build.gradle文件的dependencies中添加一句话:
compile 'com.facebook.fresco:fresco:0.7.0+'

效果


 activity_main.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:fresco="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_margin="20dp"    android:layout_height="match_parent">    <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/main_sdv1"        android:layout_width="100dp"        android:layout_height="100dp"        fresco:actualImageScaleType="focusCrop"        fresco:placeholderImage="@mipmap/default_error"        fresco:placeholderImageScaleType="focusCrop"        fresco:progressBarImage="@mipmap/icon_progress_bar"        fresco:progressBarImageScaleType="focusCrop"        fresco:progressBarAutoRotateInterval="5000"        fresco:failureImage="@mipmap/icon_failure"        fresco:failureImageScaleType="focusCrop"        fresco:retryImageScaleType="focusCrop"        fresco:fadeDuration="5000"        ></com.facebook.drawee.view.SimpleDraweeView>    <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/main_sdv2"        android:layout_marginTop="20dp"        android:layout_below="@+id/main_sdv1"        android:layout_width="100dp"        android:layout_height="100dp"        fresco:actualImageScaleType="focusCrop"        fresco:placeholderImage="@mipmap/default_error"        fresco:placeholderImageScaleType="focusCrop"        fresco:progressBarImage="@mipmap/icon_progress_bar"        fresco:progressBarImageScaleType="focusCrop"        fresco:progressBarAutoRotateInterval="5000"        fresco:failureImage="@mipmap/icon_failure"        fresco:failureImageScaleType="focusCrop"        fresco:retryImage="@mipmap/icon_retry"        fresco:retryImageScaleType="focusCrop"        fresco:fadeDuration="5000"        fresco:backgroundImage="@android:color/holo_orange_light"        fresco:roundAsCircle="true"        fresco:roundedCornerRadius="30dp"        fresco:roundTopLeft="true"        fresco:roundTopRight="true"        fresco:roundBottomLeft="true"        fresco:roundBottomRight="true"        fresco:roundingBorderWidth="10dp"        fresco:roundingBorderColor="#008dd7"        ></com.facebook.drawee.view.SimpleDraweeView>    <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/main_sdv3"        android:layout_marginTop="20dp"        android:layout_below="@+id/main_sdv2"        android:layout_width="100dp"        android:layout_height="100dp"        fresco:actualImageScaleType="focusCrop"        fresco:placeholderImage="@mipmap/default_error"        fresco:placeholderImageScaleType="focusCrop"        fresco:progressBarImage="@mipmap/icon_progress_bar"        fresco:progressBarImageScaleType="focusCrop"        fresco:progressBarAutoRotateInterval="5000"        fresco:failureImage="@mipmap/icon_failure"        fresco:failureImageScaleType="focusCrop"        fresco:retryImage="@mipmap/icon_retry"        fresco:retryImageScaleType="focusCrop"        fresco:fadeDuration="5000"        fresco:backgroundImage="@android:color/holo_orange_light"        fresco:roundAsCircle="true"        fresco:roundedCornerRadius="30dp"        fresco:roundTopLeft="true"        fresco:roundTopRight="true"        fresco:roundBottomLeft="true"        fresco:roundBottomRight="true"        fresco:roundingBorderWidth="10dp"        fresco:roundingBorderColor="#008dd7"        ></com.facebook.drawee.view.SimpleDraweeView></RelativeLayout>

MainActivity文件

import android.app.Activity;import android.net.Uri;import android.os.Bundle;import com.facebook.drawee.backends.pipeline.Fresco;import com.facebook.drawee.interfaces.DraweeController;import com.facebook.drawee.view.SimpleDraweeView;public class MainActivity extends Activity {    private SimpleDraweeView simpleDraweeView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        Fresco.initialize(this);        setContentView(R.layout.activity_main);        initView();    }    private void initView() {        //创建SimpleDraweeView对象        simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);        //创建将要下载的图片的URI        Uri imageUri = Uri.parse("http://avatar.csdn.net/5/D/9/1_vatty748895431.jpg");        //开始下载        simpleDraweeView.setImageURI(imageUri);        //创建DraweeController        DraweeController controller = Fresco.newDraweeControllerBuilder()                //重试之后要加载的图片URI地址                .setUri(imageUri)                        //设置点击重试是否开启                .setTapToRetryEnabled(true)                        //设置旧的Controller                .setOldController(simpleDraweeView.getController())                        //构建                .build();        //设置DraweeController        simpleDraweeView.setController(controller);    }}

从上面可以看出来,Fresco的一个很大的特点在于,它自定义了一个SimpleDraweeView,而不是直接在ImageView上进行操作。目前SimpleDraweeView是继承自ImageView的,然而很多ImageView的方法已经被@Deprecated掉了,不建议使用

使用Fresco有一些需要注意的地方:
1、一定不要忘了Fresco库的初始化:

Fresco.initialize(this);
通常这一句将在Application的onCreate中是比较合适的,如果只有一个Activity,那么加在Activity里也可以,但要在setContentView之前,也就是要先初始化库,才能完成布局文件的加载。
SimpleDraweeView的width和height属性必须是明确值,而不能直接用wrap_content这种内容填充的数值,当然有一种情况例外,就是宽度和高度有一个是固定的,然后设置了二者的比例,则

另一个可以用wrap_content,其实相当于二者都是固定的。

mSimpleDraweeView.setAspectRatio(1.33f); // 设置宽高比为4:3

总结:

XML属性意义fadeDuration淡入淡出动画持续时间(单位:毫秒ms)actualImageScaleType实际图像的缩放类型placeholderImage占位图placeholderImageScaleType占位图的缩放类型progressBarImage进度图progressBarImageScaleType进度图的缩放类型progressBarAutoRotateInterval进度图自动旋转间隔时间(单位:毫秒ms)failureImage失败图failureImageScaleType失败图的缩放类型retryImage重试图retryImageScaleType重试图的缩放类型backgroundImage背景图overlayImage叠加图pressedStateOverlayImage按压状态下所显示的叠加图roundAsCircle设置为圆形图roundedCornerRadius圆角半径roundTopLeft左上角是否为圆角roundTopRight右上角是否为圆角roundBottomLeft左下角是否为圆角roundBottomRight右下角是否为圆角roundingBorderWidth圆形或者圆角图边框的宽度roundingBorderColor圆形或者圆角图边框的颜色roundWithOverlayColor圆形或者圆角图底下的叠加颜色(只能设置颜色)viewAspectRatio控件纵横比

更多源码请关注微信公众号:aikaifa ,第一时间推送博文源码


0 0
原创粉丝点击