Facebook 出品的一个强大的图片加载组件 Fresco ,这篇文章将只介绍Fresco的基本使用。
引入Fresco
使用 Android Studio添加依赖：
dependencies {
// 其他依赖
compile 'com.facebook.fresco:fresco:1.5.0'
}
开始使用 Fresco
在加载图片之前，你必须初始化Fresco类。你只需要调用Fresco.initialize一次即可完成初始化，在 Application 里面做这件事再适合不过了
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
Fresco.initialize(this);
}
}
在XML中加入加入SimpleDraweeView:
RelativeLayout xmlns:android="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>
</RelativeLayout>
-
必须设置Drawee的宽高属性或者设置一个宽/高，再设置
fresco的图片来源有很多方式，支持的Uri如下：
Fresco 不支持 相对路径的URI. 所有的 URI 都必须是绝对路径，并且带上该 URI 的 scheme。
URI.png
//自定义封装了加载图片的工具类
public final class ImageLoadUtil {
private static int OPENGL_MAX_SIZE = 0;
/**
* 最基础的图片加载方法
*
* @param imageView 需要加载图片的控件
* @param uri 图片的路径
*
* @link 支持的Uri{https://www.fresco-cn.org/docs/supported-uris.html}
*/
public static void loadImgByUri(SimpleDraweeView imageView, String uri) {
if (imageView != null && !TextUtils.isEmpty(uri)) {
if (uri.startsWith("file://")) {
loadImgByFile(imageView, uri.substring("file://".length()));
} else {
imageView.setImageURI(uri);
}
}
}
public static void loadImgByFile(SimpleDraweeView imageView, String path) {
if (imageView != null && !TextUtils.isEmpty(path)) {
imageView.setImageURI(Uri.parse("file://" + path));
}
}
public static void loadImgByNet(SimpleDraweeView imageView, String url) {
if (imageView != null && !TextUtils.isEmpty(url)) {
imageView.setImageURI(Uri.parse(url));
}
}
public static void loadImgByContentProvider(SimpleDraweeView imageView, String path) {
if (imageView != null && !TextUtils.isEmpty(path)) {
imageView.setImageURI(Uri.parse("content://" + path));
}
}
public static void loadImgByAsset(SimpleDraweeView imageView, String path) {
if (imageView != null && !TextUtils.isEmpty(path)) {
imageView.setImageURI(Uri.parse("asset://" + path));
}
}
public static void loadImgByResources(SimpleDraweeView imageView, int resourcesId) {
if (imageView != null) {
imageView.setImageURI(Uri.parse("res://aaa/" + resourcesId));
}
}
public static void loadImgByBase64(SimpleDraweeView imageView, String base64, String mimeType) {
if (imageView != null && !TextUtils.isEmpty(mimeType) && !TextUtils.isEmpty(base64)) {
imageView.setImageURI(Uri.parse("data:" + mimeType + ";" + base64));
}
}
EG:使用Fresco加载网络图片，逐步说明XML属性的使用
在XML中使用Drawees
//父布局加入命名空间
xmlns:fresco="http://schemas.android.com/apk/res-auto"
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="20dp"
android:layout_height="20dp"
fresco:viewAspectRatio="1" //宽高比
fresco:fadeDuration="300" //渐变时间ms
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" //圆形边框颜色
/>
-
占位图—placeholderImage：
在此之前我们需要一张占位图 icon_placeholder.png 大家右键另存为即可：
image.png
修改我们的 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_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>
</RelativeLayout>
代码说明：
image.png
MainActivity 无需修改，运行一下：
image.png
-
正在加载图—progressBarImage：
在此之前我们需要一张正在加载图 icon_progress_bar.png 大家右键另存为即可：
image.png
修改我们刚刚书写的 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_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>
</RelativeLayout>
代码说明：
image.png
更改我们的 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);
}
}
代码分析：
image.png
运行效果图：
gif
正在加载图本身是不可以转的，但是呢,加上了fresco:progressBarAutoRotateInterval="5000",属性，那么它就可以旋转了；可以看到，正在加载图一闪而过，这是因为我们加载的图片很小，网络也很好。
-
失败图—failureImage：
在此之前我们需要一张正在加载图 icon_failure.png 大家右键另存为即可：
image.png
修改我们刚刚书写的 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_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>
</RelativeLayout>
代码分析：
image.png
修改我们的 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);
}
}
代码说明：
image.png
运行效果：
-
重试图—retryImage：
此之前我们需要一张正在加载图 icon_retry.png 大家右键另存为即可：
image.png
修改我们刚刚书写的 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_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>
</RelativeLayout>
代码分析：
image.png
修改我们的 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);
}
}
image.png
运行效果：
注意：
重复加载4次还是没有加载出来的时候才会显示 failureImage(失败图) 的图片
- 淡入淡出动画—fadeDuration：
修改我们刚刚书写的 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_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>
</RelativeLayout>
image.png
MainActivity 中的代码无需修改。
运行效果：
重试+进度图+失败图
重试+进度图+失败图.png
进度图+正确图
进度图+正确图.png
- 背景图—backgroundImage：
这里呢，我们的背景图采用的是一个系统所提供的颜色中的一种。
修改我们刚刚书写的 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_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>
</RelativeLayout>
代码说明：
image.png
MainActivity 中的代码无需修改，运行效果：
- 叠加图—overlayImage：
这里呢，我们的背景图采用的是一个系统所提供的颜色中的一种。
修改我们刚刚书写的 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_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>
</RelativeLayout>
image.png
MainActivity 中的代码无需修改。
运行效果：
从运行效果来看，叠加图在最上面，覆盖了下面的图。
- 圆形图—roundAsCircle：
一行代码搞定圆形图：设置roundAsCircle为true；
修改我们刚刚书写的 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_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>
</RelativeLayout>
代码说明：
image.png
运行效果：
可以看到，从图片开始加载一直到图片下载完毕，整个图像都是圆形的。
- 圆角图—roundedCornerRadius：
修改我们刚刚书写的 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_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>
</RelativeLayout>
| 左上角是否为圆角fresco:roundTopLeft="false" | 右上角是否为圆角fresco:roundTopRight="false" |
|---|---|
|
|
| 左下角是否为圆角fresco:roundBottomLeft="false" | 右下角是否为圆角fresco:roundBottomRight="false" |
|
|
代码说明：
image.png
运行效果：
可以看到，从图片开始加载一直到图片下载完毕，整个图像都是圆角的。
| 左上角是否为圆角fresco:roundTopLeft="false" | 右上角是否为圆角fresco:roundTopRight="false" |
|---|---|
|
|
|
| 左下角是否为圆角fresco:roundBottomLeft="false" | 右下角是否为圆角fresco:roundBottomRight="false" |
|
|
|
当我们同时设置图像显示为圆形图像和圆角图像时，只会显示为圆形图像。
image.png
- 圆形圆角边框宽度及颜色—roundingBorder：
修改我们刚刚书写的 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_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>
</RelativeLayout>
|
|
代码说明：
image.png
MainActivity 中的代码无需修改。运行效果(左边显示的是带边框的圆形图像，右边显示的是带边框的圆角图像)：
|
|
|
- 圆形或圆角图像底下的叠加颜色—roundWithOverlayColor：
修改我们刚刚书写的 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_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>
</RelativeLayout>
代码说明：
image.png
运行效果(左边为圆形效果，右边为圆角效果)：
- 缩放类型—ScaleType：
| 类型 | 描述 |
|---|---|
| center | 居中，无缩放 |
| centerCrop | 保持宽高比缩小或放大，使得两边都大于或等于显示边界。居中显示 |
| focusCrop | 同centerCrop, 但居中点不是中点，而是指定的某个点 |
| centerInside | 使两边都在显示边界内，居中显示。如果图尺寸大于显示边界，则保持长宽比缩小图片。 |
| fitCenter | 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内。居中显示 |
| fitStart | 同上。但不居中，和显示边界左上对齐 |
| fitEnd | 同fitCenter， 但不居中，和显示边界右下对齐 |
| fitXY | 不保存宽高比，填充满显示边界 |
| none | 如要使用tile mode显示, 需要设置为none |
