1. 程式人生 > >圖片載入利器之Picasso(二)基本用法

圖片載入利器之Picasso(二)基本用法

測試圖片,僅供測試所用

在上篇文章中我們提到了Picasso的諸多功能,下面我們來分別演示一下這些功能

配置:

在build.gradle中新增引用

dependencies {
    ...
    compile 'com.squareup.picasso:picasso:2.5.2'
    ...
}

1 載入圖片

通過原始碼可以發現load方法主要要以下幾種過載

load(Uri uri)
load(String path)
load(File file)
load(int resourceId)
//定義一張網路圖片的uri,其實就是上面的測試圖片
private static final String imageUrl = "http://upload-images.jianshu.io/upload_images/589909-e339eb2763fa172c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
; ImageView imageView = (ImageView) findViewById(R.id.imageView); //從網路載入圖片 Picasso.with(this).load(Uri.parse(imageUrl)).into(imageView); Picasso.with(this).load(imageUrl).into(imageView); //從res資原始檔中載入圖片 Picasso.with(this).load(R.mipmap.default_image).into(imageView);

超級簡單有木有,這裡面只演示了兩種方式。

2 載入過程中顯示預設圖片placeholder

Picasso.with(this).load(imageUrl).placeholder(R.mipmap.default_image).into(imageView);

一般網路載入圖片耗時比較長,所以會先預設顯示一張替代的圖片,只支援resId和Drawable本地圖片。

3 載入失敗後顯示錯誤的圖片

Picasso.with(this).load(imageUrl+"landptf").error(R.mipmap.default_image).into(imageView);

為了顯示錯誤圖片,這裡面我在正確的地址後面拼了字串構造了一個錯誤的地址,同樣只支援本地的圖片

4 圖片填充方式

4.1 fit()

Picasso.with(this).load(imageUrl).fit().into(imageView);

該屬性會根據Image View的大小充滿整個View,不考慮比例,可能造成圖片的拉伸或者縮小

4.2 centerCrop()

Picasso.with(this).load(imageUrl).resize(320, 640).centerCrop().into(imageView);

按比例裁減圖片,使其居中顯示,充滿View,會造成圖片顯示不全,必須與resize方法同時使用

4.3 centerInside()

Picasso.with(this).load(imageUrl).resize(320, 640).centerInside().into(imageView);

按比例裁減圖片,圖片可以完全顯示,但如果圖片比View小,則無法充滿整個View,必須與resize方法同時使用

4.4 onlyScaleDown()

Picasso.with(this).load(imageUrl).resize(1240, 1563).onlyScaleDown().into(imageView);

這裡面使用的測試圖片的大小是1240*1563,如果resize的寬高大於圖片的原始寬高,則resize不起作用,採用圖片原始寬高顯示。

5 取消圖片的過渡顯示效果noFade()

Picasso.with(this).load(imageUrl).noFade().into(imageView);

預設情況下圖片顯示出來都會有一個過渡的效果,新增.noFade方法後,可以使該取消該效果,基本上很少使用

6 圖片旋轉rotate()

//以(0,0)為中心順時針旋轉45度
Picasso.with(this).load(imageUrl).rotate(45).into(imageView);
//以(64,64)為中心順時針旋轉45度
Picasso.with(this).load(imageUrl).rotate(45, 64, 64).into(imageView);

7 快取策略

Picasso提供快取的除錯方法,通過如下程式碼可設定

Picasso.with(this).setIndicatorsEnabled(true);

效果圖如下

磁碟快取

可以看到圖片的左上角有個藍色的三角形,表示該圖片是從磁碟載入的,另外如果為紅色則表示從網路載入,如果為綠色表示從記憶體載入。

Picasso的快取流程是先檢查記憶體是否有儲存該圖片,如果沒有則檢查磁碟是否有儲存該圖片,如果沒有則從網路下載,下載成功之後分別儲存到記憶體和磁碟上各一份,如果我們有時候不想快取該圖片或者不想從快取獲取圖片,該如何呢?Picasso也給我買提供了相應的控制方法。

Picasso.with(this)
        .load(imageUrl)
        .skipMemoryCache()
        .into(imageView);

Picasso.with(this)
        .load(imageUrl)
        .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
        .into(imageView);

上面兩個方法完全等價,但是第一種寫法官方已經不推薦使用了,這裡面列出來只是讓大家瞭解一下。
這個表示什麼意思呢?跳過從記憶體載入圖片,並且圖片下載之後也不在記憶體中進行快取。
也就是圖片的左上角的標識永遠不可能為綠色。
MemoryPolicy.NO_CACHE:直接跳過檢查記憶體是否有快取該圖片
MemoryPolicy.NO_STORE:圖片下載之後不在記憶體中進行快取

Picasso.with(this)
        .load(imageUrl)
        .networkPolicy(NetworkPolicy.NO_CACHE, NetworkPolicy.NO_STORE)
        .into(imageView);

同理該方法表示跳過從磁碟載入圖片,並且圖片下載之後也不在磁碟中進行快取。
這裡注意只是不在磁碟中快取,但是會在記憶體中快取,因此若記憶體和磁碟中都不想快取則需要和兩個方法共同使用,如下:

Picasso.with(this)
        .load(imageUrl)
        .networkPolicy(NetworkPolicy.NO_CACHE, NetworkPolicy.NO_STORE)
        .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
        .into(imageView);

NetworkPolicy列舉中還有一個值OFFLINE,這個表示強制從快取中取,不會發起網路請求,如果快取中沒有也不會從網路中請求。

8 優先順序priority

設想一種場景,當我們開啟一個介面的時候,介面上有列表,每個列表項都有圖片需要載入,列表上面還有一張圖片需要提前載入,那麼怎樣來排程每個請求的優先順序呢?
Picasso給我們提供了priority方法來管理請求的優先順序

public enum Priority {
    LOW,
    NORMAL,
    HIGH
}

通過priority方法的註釋中可以知道預設的優先順序是NORMAL,因此我們可以如下實現高優先順序載入:

Picasso.with(this)
        .load(imageUrl)
        .priority(Picasso.Priority.HIGH)
        .into(imageView);

9 tag標籤管理

使用過list載入圖片的童鞋都知道在列表滾動過程中停止載入圖片,停止滾動時恢復圖片載入,那麼這樣的功能在Picasso中時如何實現的呢?
這就用到了tag標籤的功能
通過如下程式碼設定tag:

Picasso.with(this).load(imageUrl).tag("landptf").into(imageView);

在Picasso類中提供瞭如下幾個方法來控制tag

cancelTag(Object tag)
pauseTag(Object tag)
resumeTag(Object tag)

通過名字可以很好理解了,我們在列表滾動的時候呼叫

Picasso.with(this).pauseTag("landptf");

在停止滾動的時候呼叫

Picasso.with(this).resumeTag("landptf");

至於cancelTag用於取消下載,一般我們在Activity銷燬的時候將未完成的請求取消。

Picasso.with(this).cancelTag("landptf");

10 手動指定key值stableKey

Picasso.with(this).load(imageUrl).stableKey("landptf").into(imageView);

我們猜想一個問題,Picasso是如何知道是否有快取圖片的,一般根據key值來判斷,那麼這個key值又是如何生成的呢?通過閱讀原始碼可以知道,根據傳入的uri或者resourceId,是否設定了旋轉角度,是否設定了resize,或者是centerCrop還是centerInside等拼接出來的字串,這裡面我們可以通過stableKey方法來替換傳入的uri或者resourceId生成key值。

好了,這篇文章就講到這裡了,在下一篇文章中我們將會繼續學習Picasso的更高階的用法,通過擴充套件實現更加豐富的功能。