本文详细介绍Facebook开源的Fresco图片加载库，该库专注于优化Java堆内存，减少OOM问题，尤其适用于Android 4.4及以下版本。文章涵盖Fresco的特性，如GIF和WebP格式支持、图片存储优化，以及如何在项目中集成和使用Fresco，包括自定义控件参数设置和实际应用案例。
1，介绍
-
GitHub地址：https://github.com/facebook/fresco
-
建议使用（Fresco）
-
Facebook开源的专注于优化java堆内存，最大程度减少OOM
-
在Android4.4以及以下，将图片存储在Android的一块特殊的内存区域，这会让图片处理更加快速
-
支持Gif和WebP格式的图片
-
webP 比jpg 小。但更高的 质量，谷歌发明。 图片比jpg
2，简单使用
【1】添加依赖
compile 'com.facebook.fresco:fresco:0.11.0'【2】首先初始化Fresco，一般在Application的onCreate中初始化
//先初始化Fresco
Fresco.initialize(this);【3】使用Fresco提供的SimpleDraweeView显示图片
draweeView.setImageURI("url");【4】由于使用的是自定义控件加载图片，那么通过定义属性来进行设置：
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/image_view"
android:layout_width="300dp"
android:layout_height="300dp"
fresco:fadeDuration="300"
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:roundedCorner Radius="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就是所谓的展位图啦，在图片没有加载出来之前你看到的就是它
failureIamge看到名字就知道是什么了，图片加载失败时显示的图片就是它了
retryImage图片加载失败时显示，提示用户点击重新加载，重复加载4次还是没有加载出来的时候才会显示failureImage的图片
progressBarImage进度条图片
backgroundImage背景图片，这里的背景图片首先被绘制
overlayImage设置叠加图，在xml中只能设置一张叠加图片，如果需要多张图片的话，需要在java代码中设置哦
pressedStateOverlayImage设置点击状态下的叠加图，此叠加图不能缩放
ImageScaleType这个就是各种各样的图片缩放样式了，center，centerCrop，fouseCrop，centerInside，fitCenter，fitStart，fitEnd，fitXY
3，案例
【1】实现效果
【2】实习逻辑
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.android.support:recyclerview-v7:25.1.0'-
添加依赖
-
创建Application进行初始化，记住清单文件配置
public class MyApp extends Application {
/**
* Android应用程序的入口函数，最先执行的函数
*/
@Override
public void onCreate() {
super.onCreate();
//先初始化Fresco
Fresco.initialize(this);
}
}-
AndroidManifest.xml
<application
android:name=".activity.MyApplication"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".activity.LoadImageActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>-
LoadImageActivity创建布局里面放置RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="@+id/recyclerView"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>-
RecyclerView获取控件设置竖直摆放效果
recyclerView.setLayoutManager(new LinearLayoutManager(this));-
设置adapter
class MyAdapter extends RecyclerView.Adapter<MyHolder> {
@Override
public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new MyHolder(View.inflate(parent.getContext(), R.layout.adapter_image, null));
}
@Override
public void onBindViewHolder(MyHolder holder, int position) {
//使用Fresco加载图片
holder.tvImage.setImageURI(Constants.IMAGES[position]);
@Override
public int getItemCount() {
return Constants.IMAGES.length;
}
}
class MyHolder extends RecyclerView.ViewHolder {
@Bind(R.id.tv_image)
ImageViewtvImage;
MyHolder(View view) {
super(view);
ButterKnife.bind(this, view);
}
}
-
adapter_image 布局文件
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:minWidth="2000dp" //不设置值，布局无法居中
android:padding="10dp"
android:layout_height="match_parent">
<com.facebook.drawee.view.SimpleDraweeView
android:clickable="true"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
fresco:fadeDuration="1000" 设置显示时间
fresco:actualImageScaleType="centerCrop" 设置居中
fresco:placeholderImage="@mipmap/ic_launcher" 设置初始化图片
fresco:placeholderImageScaleType="centerCrop" 设置初始化图片的位置
fresco:failureImage="@mipmap/error" 设置错误图片
fresco:roundAsCircle="true"
fresco:roundingBorderWidth="4dp"
fresco:roundingBorderColor="#0000ff"
android:layout_gravity="center"
android:id="@+id/tv_image"
android:layout_width="200dp"
android:layout_height="200dp" />
</FrameLayout>-
访问的图片Url路径
public interface Constants {
String[] IMAGES = new String[] {
// Heavy images
"http://a.hiphotos.baidu.com/image/w%3D310/sign=c21ca7270b24ab18e016e73605fbe69a/728da9773912b31b202b8f288418367adab4e168.jpg",
"http://e.hiphotos.baidu.com/image/pic/item/5243fbf2b2119313c4d3242166380cd790238d8b.jpg",
"http://f.hiphotos.baidu.com/image/pic/item/8b13632762d0f7035486c57d0bfa513d2697c55f.jpg",
"http://g.hiphotos.baidu.com/image/pic/item/c995d143ad4bd113050ef62059afa40f4afb05e4.jpg",
"http://b.hiphotos.baidu.com/image/pic/item/38dbb6fd5266d0169843e151952bd40735fa3574.jpg",
"http://tech.ccidnet.com/col/attachment/2014/1/2684431.jpg",
"http://ww1.sinaimg.cn/large/bc9f5ba3jw1dzaj6clv1nj.jpg",
"http://img1.soufun.com/album/2012_02/21/1329815025308_000.jpg",
"http://i3.tietuku.com/2ad60923cfbf20a9s.jpg",
"http://img5.imgtn.bdimg.com/it/u=4292479122,1538056941&fm=21&gp=0.jpg",
"http://img0.imgtn.bdimg.com/it/u=4220365430,137606180&fm=21&gp=0.jpg",
"http://f6.topit.me/6/a7/7f/11165554671437fa76o.jpg",
"http://f7.topit.me/7/46/f1/11908078649c6f1467o.jpg",
"http://img4.duitang.com/uploads/blog/201401/12/20140112183529_cVnxn.jpeg",
"http://img5.duitang.com/uploads/item/201402/28/20140228010352_t4vkJ.thumb.700_0.jpeg",
"http://cdnq.duitang.com/uploads/item/201401/24/20140124143540_te3Wx.jpeg",
"http://cdn.duitang.com/uploads/blog/201401/12/20140112173332_e5dPj.jpeg",
"http://img1.imgtn.bdimg.com/it/u=933619302,2099219215&fm=21&gp=0.jpg",
"http://img6.faloo.com/Picture/0x0/1/1462/1462375.jpg",
"http://i1.topit.me/1/6f/e2/1142027295f98e26f1o.jpg",
"http://p2.gexing.com/G1/M00/FA/49/rBACE1KjHSDQsqrOAACYniqRbZo130.jpg",
"http://img4.duitang.com/uploads/item/201208/13/20120813120105_R3SAz.thumb.600_0.jpeg",
"http://p4.gexing.com/qqpifu/20121006/0918/506f870311354.jpg",
"http://p2.gexing.com/qqpifu/20120906/0136/50478d8874c30.jpg",
"http://dota2.yzz.cn/pc/img/dota/11.jpg",
"http://img.wy.073img.com/uploads/allimg/130708/27_130708101847_1.jpg",
"http://images.17173.com/2013/news/2013/06/13/mj0613co12s.jpg",
"http://img4.imgtn.bdimg.com/it/u=427763304,3519674062&fm=21&gp=0.jpg",
"http://img5.imgtn.bdimg.com/it/u=2997221812,1149745093&fm=21&gp=0.jpg",
"http://img1.imgtn.bdimg.com/it/u=2550640260,3138080897&fm=21&gp=0.jpg",
"http://images.17173.com/2013/news/2013/01/14/hy0114ai07s.jpg",
"http://pic5.duowan.com/aion/0908/113237346239/113237846350.jpg",
"http://img3.178.com/aion/201102/92705832634/92706128419.jpg",
"http://pic5.duowan.com/aion/1008/145811079570/145811886489.jpg",
"http://img5.imgtn.bdimg.com/it/u=609909125,3962392516&fm=21&gp=0.jpg",
"http://e.hiphotos.baidu.com/image/h%3D200/sign=56f6f02b2b738bd4db21b531918a876c/6a600c338744ebf8960eebc9dcf9d72a6159a7cd.jpg",
"http://g.hiphotos.baidu.com/image/pic/item/50da81cb39dbb6fd9caad8ba0c24ab18962b37bc.jpg",
"http://img3.imgtn.bdimg.com/it/u=799759480,1513466093&fm=21&gp=0.jpg",
"http://www.cgrealm.org/u/upload/2007/12/27/27644.jpg",
"http://img1.cache.netease.com/catchpic/2/24/2414155BD7E04FFA4628E39DF11B21F1.jpg",
"http://img.taopic.com/uploads/allimg/121212/267865-12121222403949.jpg",
"http://s1.it.itc.cn/z/forum_attachment/day_110522/1105221941f496ba48e003c9bc.jpg",
"http://img1.cache.netease.com/catchpic/2/24/2414155BD7E04FFA4628E39DF11B21F1.jpg"
};
}
扫一扫
9852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
