Fresco使用教程(一)：加载图片基础
2018-01-29 本文已影响10人
木有粗面_9602
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
运行效果图：
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
运行效果：
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
运行效果：
image.png
MainActivity 中的代码无需修改。
运行效果：
重试+进度图+失败图
image.png
MainActivity 中的代码无需修改，运行效果：
image.png
MainActivity 中的代码无需修改。
运行效果：
image.png
运行效果：
image.png
运行效果：
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 中的代码无需修改。运行效果(左边显示的是带边框的圆形图像，右边显示的是带边框的圆角图像)：
|
image.png
