本文為菜鳥窩作者劉婷的連載实昨。”商城項(xiàng)目實(shí)戰(zhàn)”系列來(lái)聊聊仿”京東淘寶的購(gòu)物商城”如何實(shí)現(xiàn)焕毫。
140套Android優(yōu)秀開源項(xiàng)目源碼惠桃，領(lǐng)取地址：http://mp.weixin.qq.com/s/afPGHqfdiApALZqHsXbw-A
或勾搭運(yùn)營(yíng)小姐姐（微xin：BT474849）免費(fèi)領(lǐng)
Fresco 是由 Facebook 開源的一款專門為 Android 圖片加載的組件，圖片加載的開源框架有不少惰爬，比如大家所熟悉的 Android-Universal-Image-Loader 喊暖、Picasso 等等，但是 Fresco 因其有著獨(dú)特的優(yōu)勢(shì)而受到廣大開發(fā)者的喜愛撕瞧，本篇文章就一起來(lái)學(xué)習(xí)強(qiáng)大的 Fresco 到底有哪些迷人之處陵叽，同時(shí)又是如何使用的。
Fresco 的詳細(xì)介紹
1. Fresco 是什么
首先丛版，F(xiàn)resco 是一款開源的圖片加載組件巩掺，也是目前最強(qiáng)大的圖片加載組件。
其次页畦，F(xiàn)resco 中設(shè)計(jì)有一個(gè)叫做 image pipeline 的模塊胖替。它負(fù)責(zé)從網(wǎng)絡(luò)，從本地文件系統(tǒng)豫缨，本地資源加載圖片独令。 為了最大限度節(jié)省空間和CPU時(shí)間，它含有3級(jí)緩存設(shè)計(jì)（2級(jí)內(nèi)存好芭，1級(jí)文件）燃箭。
另外，還有一個(gè)特別的地方栓撞，F(xiàn)resco 中設(shè)計(jì)有一個(gè)叫做 Drawees 模塊遍膜， 方便地顯示 loading 圖碗硬，當(dāng)圖片不再顯示在屏幕上時(shí)瓤湘，及時(shí)地釋放內(nèi)存和空間占用春感。
同時(shí)濒憋，F(xiàn)resco 支持 Android 2.3(API level 9)及其以上版本。
2. Fresco 的獨(dú)特之處
Fresco 作為眾多開源圖片加載組件之一艾恼，可以受到廣大開發(fā)者的喜愛翰意，自然有著它的獨(dú)特之處木人。
2.1 內(nèi)存管理
一個(gè)沒(méi)有未壓縮的圖片，即 Android 中的 Bitmap冀偶，占用大量的內(nèi)存醒第。大的內(nèi)存占用勢(shì)必引發(fā)更加頻繁的GC。 在5.0以下进鸠，GC 將會(huì)顯著地引發(fā)界面卡頓稠曼。
在5.0以下系統(tǒng)，F(xiàn)resco 將圖片放到一個(gè)特別的內(nèi)存區(qū)域客年，也就是 Ashmem (系統(tǒng)匿名共享內(nèi)存)霞幅。當(dāng)然漠吻，在圖片不顯示的時(shí)候，占用的內(nèi)存會(huì)自動(dòng)被釋放司恳。 這會(huì)使得 APP 更加流暢途乃，減少因圖片內(nèi)存占用而引發(fā)的 OOM。
2.2 漸進(jìn)式呈現(xiàn)圖片
Fresco 加載圖片時(shí)扔傅，可以實(shí)現(xiàn)漸進(jìn)式呈現(xiàn)圖片耍共，漸進(jìn)式的 JPEG 圖片格式已經(jīng)流行數(shù)年了，漸進(jìn)式圖片格式先呈現(xiàn)大致的圖片輪廓铅鲤，然后隨著圖片下載的繼續(xù)划提， 呈現(xiàn)逐漸清晰的圖片，這對(duì)于移動(dòng)設(shè)備邢享，尤其是慢網(wǎng)絡(luò)有極大的利好鹏往，可帶來(lái)更好的用戶體驗(yàn)。
2.3 支持Gif圖和WebP格式
作為加載組件骇塘，F(xiàn)resco 不僅支持簡(jiǎn)單的 JPG伊履、PNG 格式的圖片加載，還同時(shí)支持 Gif 和 WebP 格式的圖片加載款违，非常強(qiáng)大唐瀑。
2.4 圖像的呈現(xiàn)方式
Fresco 的圖像呈現(xiàn)方式也很特別，可以自定義居中焦點(diǎn)(對(duì)人臉等圖片顯示非常有幫助)插爹，支持圓角圖哄辣，當(dāng)然圓圈也行，并且下載失敗之后赠尾，點(diǎn)擊可以重新下載力穗，特別是可以自定義占位圖，自定義 overlay, 或者進(jìn)度條气嫁，同時(shí)可以指定用戶按壓時(shí)的 overlay当窗。
2.5 圖像的加載
圖像的加載時(shí)很重要的一部分，F(xiàn)resco 可以為同一個(gè)圖片指定不同的遠(yuǎn)程路徑寸宵，或者使用已經(jīng)存在本地緩存中的圖片崖面，加載時(shí)先顯示一個(gè)低解析度的圖片，等高清圖下載完之后再顯示高清圖梯影，等到加載完成時(shí)回調(diào)通知巫员，并且對(duì)于本地圖，如有 EXIF 縮略圖甲棍，在大圖加載完成之前简识，可先顯示縮略圖。至于縮放或者旋轉(zhuǎn)圖片和處理已下載的圖片，F(xiàn)resco 都是可以做到的财异。
Fresco 的基本使用
前面已經(jīng)對(duì) Fresco 做了非常詳細(xì)的介紹了倘零，對(duì)于 Fresco 一定很感興趣吧，下面就開始使用它吧戳寸。
1. 添加 Gradle 依賴
在使用 Fresco 之前呈驶，一定要記得先使用 Gradle 添加對(duì) 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. 添加權(quán)限
加載網(wǎng)絡(luò)圖片時(shí)，需要一定的網(wǎng)絡(luò)權(quán)限拆吆，所以必須添加網(wǎng)絡(luò)權(quán)限聋迎。
<uses-permission android:name="android.permission.INTERNET"/>
3. 初始化 Fresco
在加載圖片之前，你必須初始化 Fresco 類枣耀。你只需要調(diào)用 Fresco.initialize() 一次即可完成初始化霉晕，在 Application 里面做這件事再適合不過(guò)了（如下面的代碼），注意多次的調(diào)用初始化是無(wú)意義的捞奕。
public class CniaoApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
Fresco.initialize(this,config);
}
}
下面就是需要在 AndroidManifest.xml 中指定相應(yīng)的 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. 效果圖
運(yùn)行代碼獲取效果圖院促，如下圖所示筏养。
[圖片上傳失敗...(image-29edc4-1565145188330)]
Fresco 的基本使用就是這些了，功能很強(qiáng)大常拓，使用很簡(jiǎn)單渐溶，更多的使用可以參考 Fresco 官網(wǎng)
