商城项目实战 | 7.1 强大的 Fresco 专为 Android 加载图片

本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
140套Android优秀开源项目源码,领取地址:http://mp.weixin.qq.com/s/afPGHqfdiApALZqHsXbw-A
或勾搭运营小姐姐(微xin:BT474849)免费领

Fresco 是由 Facebook 开源的一款专门为 Android 图片加载的组件,图片加载的开源框架有不少,比如大家所熟悉的 Android-Universal-Image-Loader 、Picasso 等等,但是 Fresco 因其有着独特的优势而受到广大开发者的喜爱,本篇文章就一起来学习强大的 Fresco 到底有哪些迷人之处,同时又是如何使用的。

Fresco 的详细介绍

1. Fresco 是什么

首先,Fresco 是一款开源的图片加载组件,也是目前最强大的图片加载组件。
其次,Fresco 中设计有一个叫做 image pipeline 的模块。它负责从网络,从本地文件系统,本地资源加载图片。 为了最大限度节省空间和CPU时间,它含有3级缓存设计(2级内存,1级文件)。
另外,还有一个特别的地方,Fresco 中设计有一个叫做 Drawees 模块, 方便地显示 loading 图,当图片不再显示在屏幕上时,及时地释放内存和空间占用。
同时,Fresco 支持 Android 2.3(API level 9)及其以上版本。

2. Fresco 的独特之处

Fresco 作为众多开源图片加载组件之一,可以受到广大开发者的喜爱,自然有着它的独特之处。

2.1 内存管理

一个没有未压缩的图片,即 Android 中的 Bitmap,占用大量的内存。大的内存占用势必引发更加频繁的GC。 在5.0以下,GC 将会显著地引发界面卡顿。
在5.0以下系统,Fresco 将图片放到一个特别的内存区域,也就是 Ashmem (系统匿名共享内存)。当然,在图片不显示的时候,占用的内存会自动被释放。 这会使得 APP 更加流畅,减少因图片内存占用而引发的 OOM。

2.2 渐进式呈现图片

Fresco 加载图片时,可以实现渐进式呈现图片,渐进式的 JPEG 图片格式已经流行数年了,渐进式图片格式先呈现大致的图片轮廓,然后随着图片下载的继续, 呈现逐渐清晰的图片,这对于移动设备,尤其是慢网络有极大的利好,可带来更好的用户体验。

2.3 支持Gif图和WebP格式

作为加载组件,Fresco 不仅支持简单的 JPG、PNG 格式的图片加载,还同时支持 Gif 和 WebP 格式的图片加载,非常强大。

2.4 图像的呈现方式

Fresco 的图像呈现方式也很特别,可以自定义居中焦点(对人脸等图片显示非常有帮助),支持圆角图,当然圆圈也行,并且下载失败之后,点击可以重新下载,特别是可以自定义占位图,自定义 overlay, 或者进度条,同时可以指定用户按压时的 overlay。

2.5 图像的加载

图像的加载时很重要的一部分,Fresco 可以为同一个图片指定不同的远程路径,或者使用已经存在本地缓存中的图片,加载时先显示一个低解析度的图片,等高清图下载完之后再显示高清图,等到加载完成时回调通知,并且对于本地图,如有 EXIF 缩略图,在大图加载完成之前,可先显示缩略图。至于缩放或者旋转图片和处理已下载的图片,Fresco 都是可以做到的。

Fresco 的基本使用

前面已经对 Fresco 做了非常详细的介绍了,对于 Fresco 一定很感兴趣吧,下面就开始使用它吧。

1. 添加 Gradle 依赖

在使用 Fresco 之前,一定要记得先使用 Gradle 添加对 Fresco 的依赖,代码如下。、

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.facebook.fresco:fresco:0.12.0'
}

2. 添加权限

加载网络图片时,需要一定的网络权限,所以必须添加网络权限。

<uses-permission android:name="android.permission.INTERNET"/>

3. 初始化 Fresco

在加载图片之前,你必须初始化 Fresco 类。你只需要调用 Fresco.initialize() 一次即可完成初始化,在 Application 里面做这件事再适合不过了(如下面的代码),注意多次的调用初始化是无意义的。

public class CniaoApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this,config);
    }
}

下面就是需要在 AndroidManifest.xml 中指定相应的 Application 类。

<application
        android:name=".CniaoApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
     .......
</application>

4. 添加 SimpleDraweeView

首先,在 xml 布局文件 Layout 中, 加入命名空间。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
   ......
</LinearLayout>

然后在布局中加入 SimpleDraweeView。

<com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/image_view"
        android:layout_width="500dp"
        android:layout_height="300dp"
        fresco:placeholderImage="@drawable/default_loading"
/>

5. 加载图片

在 Activity/Fragment 中写入图片加载即可。

public class MainActivity extends AppCompatActivity {
    private  String img_url="http://img4q.duitang.com/uploads/item/201411/20/20141120132318_3eAuc.thumb.700_0.jpeg";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Uri uri = Uri.parse(img_url);
        SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.image_view);
        draweeView.setImageURI(uri);
     }
}

6. 效果图

运行代码获取效果图,如下图所示。

[图片上传失败...(image-29edc4-1565145188330)]

Fresco 的基本使用就是这些了,功能很强大,使用很简单,更多的使用可以参考 Fresco 官网

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容