Fresco简单的使用—SimpleDraweeView
在我们平时加载图片(不管是下载还是加载本地图片…..)的时候，我们经常会遇到这样一个需求，那就是当图片正在加载时应该呈现正在加载时的图像，当图片加载失败时应该呈现图片加载时的图像，当我们重新加载这张图片时，应该呈现重试时图像，直到这张图片加载完成。这些繁琐并且重复的如果得不到简化的话，那将是一个开发人员的噩梦，现在好了，我们用Facebook出品的一个强大的图片加载组件Fresco几行代码就可以搞定以上问题了。
1、SimpleDraweeView最基本的使用
2、SimpleDraweeView的圆形图
3、SimpleDraweeView的圆角图
4、SimpleDraweeView的缩放类型
Fresco中文说明：http://www.fresco-cn.org/
Fresco项目GitHub地址：https://github.com/facebook/fresco
第一步进入Fresco项目GitHub地址：
第二步添加Fresco到项目工程：
第三步服务及权限：
<uses-permission android:name="android.permission.INTERNET"/>
初次使用，我们就先简单书写我们的activity_main.xml：
"http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_adv" android:layout_width="300dp" android:layout_height="300dp" android:layout_centerInParent="true" >com.facebook.drawee.view.SimpleDraweeView>
代码分析：
MainActivity实现代码：
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }
简单的书写完布局和实现代码之后我们来运行一下。
java.lang.RuntimeException: Unable to start activity ComponentInfo{scp.com.frescodemo/scp.com.frescodemo.MainActivity}: android.view.InflateException: Binary XML file line #5: Error inflating class com.facebook.drawee.view.SimpleDraweeView at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2264) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2313) at android.app.ActivityThread.access$1100(ActivityThread.java:141) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1238) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:136) at android.app.ActivityThread.main(ActivityThread.java:5336) at java.lang.reflect.Method.invokeNative(Native Method) at java.lang.reflect.Method.invoke(Method.java:515) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:871) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:687) at dalvik.system.NativeStart.main(Native Method) Caused by: android.view.InflateException: Binary XML file line #5: Error inflating class com.facebook.drawee.view.SimpleDraweeView
运行报错了！怎么回事呢？这里啊，是因为我们没有在应用调用 setContentView() 之前进行初始化Fresco造成的；解决办法：
修改我们的MainActivity里代码：
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Fresco.initialize(this); setContentView(R.layout.activity_main); } }
再运行就没有错误发生了。
在此之前我们需要一张占位图icon_placeholder.png大家右键另存为即可：
修改我们的activity_main.xml：
"http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_adv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" >com.facebook.drawee.view.SimpleDraweeView>
代码说明：
MainActivity无需修改，运行一下：
在此之前我们需要一张正在加载图icon_progress_bar.png大家右键另存为即可：
修改我们刚刚书写的activity_main.xml：
"http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" >com.facebook.drawee.view.SimpleDraweeView>
代码说明：
更改我们的MainActivity里代码：
public class MainActivity extends AppCompatActivity { 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://my.csdn.net/uploads/avatar/4/E/8/1_y1scp.jpg"); //开始下载 simpleDraweeView.setImageURI(imageUri); } }
代码分析：
运行效果图：
正在加载图本身是不可以转的，但是呢，加上了fresco:progressBarAutoRotateInterval="5000"属性，那么它就可以旋转了；可以看到，正在加载图一闪而过，这是因为我们加载的图片很小，网络也很好。
在此之前我们需要一张正在加载图icon_failure.png大家右键另存为即可：
修改我们刚刚书写的activity_main.xml：
"http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" >com.facebook.drawee.view.SimpleDraweeView>
代码分析：
修改我们的MainActivity里代码：
public class MainActivity extends AppCompatActivity { 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://my.csdn.net/uploads/avatar_y1scp.jpg"); //开始下载 simpleDraweeView.setImageURI(imageUri); } }
代码说明：
运行效果：
在此之前我们需要一张正在加载图icon_retry.png大家右键另存为即可：
修改我们刚刚书写的activity_main.xml：
"http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="centerCrop" >com.facebook.drawee.view.SimpleDraweeView>
代码分析：
修改我们的MainActivity里代码：
public class MainActivity extends AppCompatActivity { 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://my.csdn.net/uploads/avatar_y1scp.jpg"); //开始下载 simpleDraweeView.setImageURI(imageUri); //创建DraweeController DraweeController controller = Fresco.newDraweeControllerBuilder() //加载的图片URI地址 .setUri(imageUri) //设置点击重试是否开启 .setTapToRetryEnabled(true) //设置旧的Controller .setOldController(simpleDraweeView.getController()) //构建 .build(); //设置DraweeController simpleDraweeView.setController(controller); } }
代码说明：
运行效果：
注意：
重复加载4次还是没有加载出来的时候才会显示failureImage(失败图)的图片
修改我们刚刚书写的activity_main.xml：
"http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="centerCrop" fresco:fadeDuration="5000" >com.facebook.drawee.view.SimpleDraweeView>
代码说明：
MainActivity中的代码无需修改。
运行效果：
重试+进度图+失败图进度图+正确图
这里呢，我们的背景图采用的是一个系统所提供的颜色中的一种。
修改我们刚刚书写的activity_main.xml：
"http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:fadeDuration="5000" fresco:backgroundImage="@android:color/holo_orange_light" >com.facebook.drawee.view.SimpleDraweeView>
代码说明：
MainActivity中的代码无需修改，运行效果：
这里呢，我们的背景图采用的是一个系统所提供的颜色中的一种。
修改我们刚刚书写的activity_main.xml：
"http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="centerCrop" fresco:fadeDuration="5000" fresco:backgroundImage="@android:color/holo_orange_light" fresco:pressedStateOverlayImage="@android:color/holo_green_dark" fresco:overlayImage="@android:color/black" >com.facebook.drawee.view.SimpleDraweeView>
代码说明：
MainActivity中的代码无需修改。
运行效果：
从运行效果来看，叠加图在最上面，覆盖了下面的图。
一行代码搞定圆形图：设置roundAsCircle为true；
修改我们刚刚书写的activity_main.xml：
"http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="centerCrop" fresco:fadeDuration="5000" fresco:backgroundImage="@android:color/holo_orange_light" fresco:roundAsCircle="true" >com.facebook.drawee.view.SimpleDraweeView>
代码说明：
MainActivity中的代码无需修改。
运行效果：
可以看到，从图片开始加载一直到图片下载完毕，整个图像都是圆形的。
修改我们刚刚书写的activity_main.xml：
"http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@mipmap/icon_progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@mipmap/icon_failure" fresco:failureImageScaleType="centerInside" fresco:retryImage="@mipmap/icon_retry" fresco:retryImageScaleType="centerCrop" fresco:fadeDuration="5000" fresco:backgroundImage="@android:color/holo_orange_light" fresco:roundedCornerRadius="30dp" >com.facebook.drawee.view.SimpleDraweeView>
代码说明：
MainActivity中的代码无需修改。
运行效果：
可以看到，从图片开始加载一直到图片下载完毕，整个图像都是圆角的。
圆角属性圆角属性
左上角是否为圆角fresco:roundTopLeft="false"右上角是否为圆角fresco:roundTopRight="false"
左下角是否为圆角fresco:roundBottomLeft="false"右下角是否为圆角fresco:roundBottomRight="false"
注意：
当我们同时设置图像显示为圆形图像和圆角图像时，只会显示为圆形图像。
修改我们刚刚书写的activity_main.xml：
"http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" 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="@android:color/black" >com.facebook.drawee.view.SimpleDraweeView>
代码说明：
MainActivity中的代码无需修改。
运行效果(左边显示的是带边框的圆形图像，右边显示的是带边框的圆角图像)：
圆形或圆角图像底下的叠加颜色—roundWithOverlayColor：
修改我们刚刚书写的activity_main.xml：
"http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/main_sdv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@mipmap/icon_placeholder" 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:roundWithOverlayColor="@android:color/darker_gray" fresco:roundAsCircle="true" >com.facebook.drawee.view.SimpleDraweeView>
代码说明：
MainActivity中的代码无需修改。
运行效果(左边为圆形效果，右边为圆角效果)：
类型描述
center居中，无缩放
centerCrop保持宽高比缩小或放大，使得两边都大于或等于显示边界。居中显示。
focusCrop同centerCrop, 但居中点不是中点，而是指定的某个点
centerInside使两边都在显示边界内，居中显示。如果图尺寸大于显示边界，则保持长宽比缩小图片。
fitCenter保持宽高比，缩小或者放大，使得图片完全显示在显示边界内。居中显示
fitStart同上。但不居中，和显示边界左上对齐
fitEnd同fitCenter， 但不居中，和显示边界右下对齐
fitXY不保存宽高比，填充满显示边界
none如要使用tile mode显示, 需要设置为none
推荐使用：focusCrop 类型
Fresco中文说明对这一点也有详情的说明：缩放
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控件纵横比
本教程最终项目GitHub地址：https://github.com/scp504677840/Fresco
