商城項目實戰(zhàn) | 7.1 強大的 Fresco 專為 Android 加載圖片

本文為菜鳥窩作者劉婷的連載?!鄙坛琼椖繉崙?zhàn)”系列來聊聊仿”京東淘寶的購物商城”如何實現(xiàn)。
140套Android優(yōu)秀開源項目源碼,領取地址:http://mp.weixin.qq.com/s/afPGHqfdiApALZqHsXbw-A
或勾搭運營小姐姐(微xin:BT474849)免費領

Fresco 是由 Facebook 開源的一款專門為 Android 圖片加載的組件,圖片加載的開源框架有不少,比如大家所熟悉的 Android-Universal-Image-Loader 、Picasso 等等,但是 Fresco 因其有著獨特的優(yōu)勢而受到廣大開發(fā)者的喜愛,本篇文章就一起來學習強大的 Fresco 到底有哪些迷人之處,同時又是如何使用的。

Fresco 的詳細介紹

1. Fresco 是什么

首先,F(xiàn)resco 是一款開源的圖片加載組件,也是目前最強大的圖片加載組件。
其次,F(xiàn)resco 中設計有一個叫做 image pipeline 的模塊。它負責從網絡,從本地文件系統(tǒng),本地資源加載圖片。 為了最大限度節(jié)省空間和CPU時間,它含有3級緩存設計(2級內存,1級文件)。
另外,還有一個特別的地方,F(xiàn)resco 中設計有一個叫做 Drawees 模塊, 方便地顯示 loading 圖,當圖片不再顯示在屏幕上時,及時地釋放內存和空間占用。
同時,F(xiàn)resco 支持 Android 2.3(API level 9)及其以上版本。

2. Fresco 的獨特之處

Fresco 作為眾多開源圖片加載組件之一,可以受到廣大開發(fā)者的喜愛,自然有著它的獨特之處。

2.1 內存管理

一個沒有未壓縮的圖片,即 Android 中的 Bitmap,占用大量的內存。大的內存占用勢必引發(fā)更加頻繁的GC。 在5.0以下,GC 將會顯著地引發(fā)界面卡頓。
在5.0以下系統(tǒng),F(xiàn)resco 將圖片放到一個特別的內存區(qū)域,也就是 Ashmem (系統(tǒng)匿名共享內存)。當然,在圖片不顯示的時候,占用的內存會自動被釋放。 這會使得 APP 更加流暢,減少因圖片內存占用而引發(fā)的 OOM。

2.2 漸進式呈現(xiàn)圖片

Fresco 加載圖片時,可以實現(xiàn)漸進式呈現(xiàn)圖片,漸進式的 JPEG 圖片格式已經流行數(shù)年了,漸進式圖片格式先呈現(xiàn)大致的圖片輪廓,然后隨著圖片下載的繼續(xù), 呈現(xiàn)逐漸清晰的圖片,這對于移動設備,尤其是慢網絡有極大的利好,可帶來更好的用戶體驗。

2.3 支持Gif圖和WebP格式

作為加載組件,F(xiàn)resco 不僅支持簡單的 JPG、PNG 格式的圖片加載,還同時支持 Gif 和 WebP 格式的圖片加載,非常強大。

2.4 圖像的呈現(xiàn)方式

Fresco 的圖像呈現(xiàn)方式也很特別,可以自定義居中焦點(對人臉等圖片顯示非常有幫助),支持圓角圖,當然圓圈也行,并且下載失敗之后,點擊可以重新下載,特別是可以自定義占位圖,自定義 overlay, 或者進度條,同時可以指定用戶按壓時的 overlay。

2.5 圖像的加載

圖像的加載時很重要的一部分,F(xiàn)resco 可以為同一個圖片指定不同的遠程路徑,或者使用已經存在本地緩存中的圖片,加載時先顯示一個低解析度的圖片,等高清圖下載完之后再顯示高清圖,等到加載完成時回調通知,并且對于本地圖,如有 EXIF 縮略圖,在大圖加載完成之前,可先顯示縮略圖。至于縮放或者旋轉圖片和處理已下載的圖片,F(xiàn)resco 都是可以做到的。

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 官網

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容