對於一個需要展示很多圖片或較多圖片的App來說,一個好的圖片載入框架是必不可少的。在我剛開始學習Android的時候,什麼都想自己寫,我以前做過一個看漫畫的App,裡面的圖片載入,快取等都是自己寫的,但是效果並不理想,當時利用了LruCache
來做圖片的記憶體快取,用DiskLruCache
做磁碟快取,載入圖片根據Key先在記憶體中查詢,如果沒有就再去磁碟中查詢,若果再沒有在去網路上載入。雖然是個邏輯上非常清楚的事,但是要真的做好還是有一定的難度的。後來我認識到了Picasso,一個優雅、強大的圖片載入框架,我使用它製作了許多的專案。雖然Picasso不是最強大的,現在有Glide、Fresco這些更強大的圖片載入庫,但在我眼裡Picasso絕對是最優雅的,從它的API,設計方法,原始碼看,Picasso集輕量、實用於一身。
第一眼
認識它的第一眼肯定是它超級簡短的使用方法,只需要一行程式碼,鏈式配置我們要載入的圖片和一些載入配置和指定的載入Target,我們的圖片就正確的載入並顯示在了介面上,不可謂不優雅。
Picasso.with(context).load(url).into(imageView);複製程式碼
我們還可以很方便的配置各種載入選項,比如設定佔點陣圖,設定錯誤圖,設定是否需要對圖片進行變換,圖片顯示是否需要淡入效果,對圖片的大小進行調整等常用的配置,這些都只需要一行程式碼就可以解決。
那麼它是怎麼做到的呢?作為一個開發者,首先要學會使用一個庫,在學會了使用後,我們要去了解它,瞭解它的設計,瞭解它的實現,從中學習優秀的設計思想和編碼技巧。
掌握一切的男人——Picasso(畢加索)
從使用上看,Picasso
類無疑是掌握著一切的類,作為一個全域性單例類,它掌握著各種配置(記憶體、磁碟、BitmapConfig、執行緒池等),提供各種簡單有用的方法並隱藏了內部的各種實現,是我們使用上的超級核心類。Picasso的構造方法提供包級別的訪問許可權,我們不能直接new出來,但我們可以很簡單的通過
Picasso.with(context)複製程式碼
來獲取這個全域性單例物件,來看一下with()
方法
public static Picasso with(@NonNull Context context) {
if (context == null) {
throw new IllegalArgumentException("context == null");
}
if (singleton == null) {
synchronized (Picasso.class) {
if (singleton == null) {
singleton = new Builder(context).build();
}
}
}
return singleton;
}複製程式碼
一個很經典的單例實現,內部使用建造者模式對Picasso物件進行構造。對於大多數簡單的應用,只需要使用預設的配置就好了。但是對於一些應用,我們也可以通過Picasso.Builder來進行自定義的配置。我們可以根據類似下面的程式碼進行Picasso的配置
Picasso picasso = new Picasso.Builder(this)
.loggingEnabled(true)
.defaultBitmapConfig(Bitmap.Config.RGB_565)
.build();
Picasso.setSingletonInstance(picasso);複製程式碼
由於Picasso是一個非常複雜的物件,根據不同的配置會產生不同的表現,這裡通過建造者模式來構建物件很好的將構建和其表現分離。
RequestCreator
通過Picasso物件,我們可以load各種圖片資源,這個資源可以字元路徑、Uri、資源路徑,檔案等形式提供,之後Picasso會發揮一個RequestCreator
物件,它可以根據我們需求以及圖片資源生成相應的Request
物件。之後Request
會生成Action*
物件,之後會分析這一系列的過程。由於RequestCreator
的配置方法都返回自身,於是我們可以很方便的鏈式呼叫。
RequestCreator requestCreator = Picasso.with(this)
.load("http://image.com")
.config(Bitmap.Config.RGB_565)
.centerInside()
.fit()
.memoryPolicy(MemoryPolicy.NO_CACHE)
.noPlaceholder()
.noFade();複製程式碼
into target——談載入過程
requestCreator.into(new ImageView(this));複製程式碼
生成了RequestCreator
後,我們可以呼叫其into()方法,該方法接受可以接收一個ImageView
或者RemoteView
或者Target
物件,當然最後他們都會變為相應的Target
物件來進行內部的圖片載入。
接下來我們就來分析一下這被隱藏起來的載入過程。這裡以最常用的into(imageView)
進行分析。
public void into(ImageView target, Callback callback) {
long started = System.nanoTime();
checkMain();
if (target == null) {
throw new IllegalArgumentException("Target must not be null.");
}
if (!data.hasImage()) {
picasso.cancelRequest(target);
if (setPlaceholder) {
setPlaceholder(target, getPlaceholderDrawable());
}
return;
}
if (deferred) {
if (data.hasSize()) {
throw new IllegalStateException("Fit cannot be used with resize.");
}
int width = target.getWidth();
int height = target.getHeight();
if (width == 0 || height == 0) {
if (setPlaceholder) {
setPlaceholder(target, getPlaceholderDrawable());
}
picasso.defer(target, new DeferredRequestCreator(this, target, callback));
return;
}
data.resize(width, height);
}
Request request = createRequest(started);
String requestKey = createKey(request);
if (shouldReadFromMemoryCache(memoryPolicy)) {
Bitmap bitmap = picasso.quickMemoryCacheCheck(requestKey);
if (bitmap != null) {
picasso.cancelRequest(target);
setBitmap(target, picasso.context, bitmap, MEMORY, noFade, picasso.indicatorsEnabled);
if (picasso.loggingEnabled) {
log(OWNER_MAIN, VERB_COMPLETED, request.plainId(), "from " + MEMORY);
}
if (callback != null) {
callback.onSuccess();
}
return;
}
}
if (setPlaceholder) {
setPlaceholder(target, getPlaceholderDrawable());
}
Action action =
new ImageViewAction(picasso, target, request, memoryPolicy, networkPolicy, errorResId,
errorDrawable, requestKey, tag, callback, noFade);
picasso.enqueueAndSubmit(action);
}複製程式碼
這個方法有點長,我們一點一點看,首先它檢查了當前是否為主執行緒,若為主執行緒就丟擲異常。
static void checkMain() {
if (!isMain()) {
throw new IllegalStateException("Method call should happen from the main thread.");
}
}複製程式碼
之後判斷我們給的圖片的資源路徑是否合法,如果不合法會取消生成請求,並直接顯示佔點陣圖
if (!data.hasImage()) {
picasso.cancelRequest(target);
if (setPlaceholder) {
setPlaceholder(target, getPlaceholderDrawable());
}
return;
}複製程式碼
若給的圖片資源路徑不為空,會檢查一個defer
欄位的真假,只有當我們設定fit()
時,defer才為true
,因為fit()
方法會讓載入的圖片以適應我們ImageView
,所以只有當我們的ImageView
laid out後才會去進行圖片的獲取並剪裁以適應。這裡就不具體分析了,接下來往下看。
Request request = createRequest(started);
private Request createRequest(long started) {
int id = nextId.getAndIncrement();
Request request = data.build();
request.id = id;
request.started = started;
boolean loggingEnabled = picasso.loggingEnabled;
if (loggingEnabled) {
log(OWNER_MAIN, VERB_CREATED, request.plainId(), request.toString());
}
Request transformed = picasso.transformRequest(request);
if (transformed != request) {
// If the request was changed, copy over the id and timestamp from the original.
transformed.id = id;
transformed.started = started;
if (loggingEnabled) {
log(OWNER_MAIN, VERB_CHANGED, transformed.logId(), "into " + transformed);
}
}
return transformed;
}複製程式碼
接下來,終於生成了我們的Request
物件,同Http請求的Request物件相同,這個Request
物件包含了許多我們需要的資訊已獲得準確的回應。這裡注意,我們的Request
物件是可以通過RequestTransformer
經過變換的,預設Picasso中內建的是一個什麼也不變的RequestTransformer
。
預設的RequestTransformer
RequestTransformer IDENTITY = new RequestTransformer() {
@Override public Request transformRequest(Request request) {
return request;
}
};複製程式碼
生成了Request
物件後,這裡來到了我們熟悉的一個步驟,就是檢查記憶體中是否已經有圖片的快取了,當然它還更具我們設定的記憶體策略進行了是否需要進行記憶體檢查。比如我們在檢視大圖的時候,一般會選擇不讓大圖在記憶體快取中存在,而是每次都去請求。
if (shouldReadFromMemoryCache(memoryPolicy)) {
Bitmap bitmap = picasso.quickMemoryCacheCheck(requestKey);
if (bitmap != null) {
picasso.cancelRequest(target);
setBitmap(target, picasso.context, bitmap, MEMORY, noFade, picasso.indicatorsEnabled);
if (picasso.loggingEnabled) {
log(OWNER_MAIN, VERB_COMPLETED, request.plainId(), "from " + MEMORY);
}
if (callback != null) {
callback.onSuccess();
}
return;
}
}複製程式碼
找到的話就取消請求。否則會更具是否需要設定佔位設定一下展點陣圖,然後生成一個Action
物件並使其加入佇列發出。
if (setPlaceholder) {
setPlaceholder(target, getPlaceholderDrawable());
}
Action action =
new ImageViewAction(picasso, target, request, memoryPolicy, networkPolicy, errorResId,
errorDrawable, requestKey, tag, callback, noFade);
picasso.enqueueAndSubmit(action);複製程式碼
這個Action
物件包含了我們的目標Target
和請求資料Request
以及相應的回撥Callback等資訊。
到這裡我們還是沒有真正的進行載入,最多隻在記憶體中進行了快取查詢。
Go Action
通過上面的程式碼呼叫,我們瞭解到Picasso發出了一個Action
,就像一個導演一樣,說Action的時候就開始拍戲了,我們的Picasso在發出Action
後就開始正式載入圖片了。
Action
最終會被Dispatcher
給分發出去。
void submit(Action action) {
dispatcher.dispatchSubmit(action);
}複製程式碼
Dispatcher
隨著Picasso的初始化而生成,正如其名,它負責所有Action的分發並將收到的結果也進行分發,分發給Picasso物件。我們來分析一下Dispatcher的工作過程。
Dispatcher
內部是通過Handler
進行工作的,這裡插下嘴,Handler真是Android中超級強大的類,幫助我們輕鬆的實現執行緒之間的通訊、切換,有許多有名的開源庫都利用了Handler
來實現功能,比如Google自家的響應式框架Agera
,內部真是通過Handler
實現的。所以我們要好好的掌握這個強大的類。
不多說了,我們繼續看程式碼
void dispatchSubmit(Action action) {
handler.sendMessage(handler.obtainMessage(REQUEST_SUBMIT, action));
}複製程式碼
Dispatcher
通過內部的Handler
傳送了一個訊息,並將Action
物件傳遞了出去,那麼我們就要找到這個Handler
物件的具體實現,根據收到的訊息型別它做了哪些事情。
private static class DispatcherHandler extends Handler {
private final Dispatcher dispatcher;
public DispatcherHandler(Looper looper, Dispatcher dispatcher) {
super(looper);
this.dispatcher = dispatcher;
}
@Override public void handleMessage(final Message msg) {
switch (msg.what) {
case REQUEST_SUBMIT: {
Action action = (Action) msg.obj;
dispatcher.performSubmit(action);
break;
}
……
}
}
}複製程式碼
很容易找到了,就是執行了performSubmit(action)
方法,繼續來看下去,這裡還沒有具體的載入動作。
void performSubmit(Action action, boolean dismissFailed) {
if (pausedTags.contains(action.getTag())) {
pausedActions.put(action.getTarget(), action);
if (action.getPicasso().loggingEnabled) {
log(OWNER_DISPATCHER, VERB_PAUSED, action.request.logId(),
"because tag '" + action.getTag() + "' is paused");
}
return;
}
BitmapHunter hunter = hunterMap.get(action.getKey());
if (hunter != null) {
hunter.attach(action);
return;
}
if (service.isShutdown()) {
if (action.getPicasso().loggingEnabled) {
log(OWNER_DISPATCHER, VERB_IGNORED, action.request.logId(), "because shut down");
}
return;
}
hunter = forRequest(action.getPicasso(), this, cache, stats, action);
hunter.future = service.submit(hunter);
hunterMap.put(action.getKey(), hunter);
if (dismissFailed) {
failedActions.remove(action.getTarget());
}
if (action.getPicasso().loggingEnabled) {
log(OWNER_DISPATCHER, VERB_ENQUEUED, action.request.logId());
}
}複製程式碼
又是一段比較長的程式碼,但是還是很容易看懂的。主要就是生成了BitmapHunter
物件,並將其發出。
hunter = forRequest(action.getPicasso(), this, cache, stats, action);
hunter.future = service.submit(hunter);複製程式碼
通過檢視程式碼,我們知道這個service
物件是一個ExecutorService
,也就我們常用的執行緒池,這裡Picasso預設使用的是PicassoExecutorService
,在Dispatcher內部有一個監聽網路變化廣播的Receiver,Picasso會根據我們不同的網路變化(Wifi,4G,3G,2G)智慧的切換執行緒池中該執行緒的數量,以幫助我們更好的節省流量。
既然執行緒池將BitmapHunter
物件發出了,說明這個BitmapHunter
物件一定是Runable
的子類,從名字上來分析,我們也可以知道它肯定承擔了Bitmap的獲取生成。點進去一看原始碼,果然是這樣的。哈哈。
執行緒池submit了一個Runable
物件後,一定會呼叫其run()
方法,我們就來看看它是不是載入了Bitmap
吧~
@Override public void run() {
try {
updateThreadName(data);
if (picasso.loggingEnabled) {
log(OWNER_HUNTER, VERB_EXECUTING, getLogIdsForHunter(this));
}
result = hunt();
if (result == null) {
dispatcher.dispatchFailed(this);
} else {
dispatcher.dispatchComplete(this);
}
} catch (Downloader.ResponseException e) {
if (!e.localCacheOnly || e.responseCode != 504) {
exception = e;
}
dispatcher.dispatchFailed(this);
} catch (NetworkRequestHandler.ContentLengthException e) {
exception = e;
dispatcher.dispatchRetry(this);
} catch (IOException e) {
exception = e;
dispatcher.dispatchRetry(this);
} catch (OutOfMemoryError e) {
StringWriter writer = new StringWriter();
stats.createSnapshot().dump(new PrintWriter(writer));
exception = new RuntimeException(writer.toString(), e);
dispatcher.dispatchFailed(this);
} catch (Exception e) {
exception = e;
dispatcher.dispatchFailed(this);
} finally {
Thread.currentThread().setName(Utils.THREAD_IDLE_NAME);
}
}複製程式碼
程式碼雖長,核心只有hunt()
一句,捕獵開始!BitmapHunter
這個獵人開始狩獵Bitmap
了。
Bitmap hunt() throws IOException {
Bitmap bitmap = null;
if (shouldReadFromMemoryCache(memoryPolicy)) {
bitmap = cache.get(key);
if (bitmap != null) {
stats.dispatchCacheHit();
loadedFrom = MEMORY;
if (picasso.loggingEnabled) {
log(OWNER_HUNTER, VERB_DECODED, data.logId(), "from cache");
}
return bitmap;
}
}
data.networkPolicy = retryCount == 0 ? NetworkPolicy.OFFLINE.index : networkPolicy;
RequestHandler.Result result = requestHandler.load(data, networkPolicy);
if (result != null) {
loadedFrom = result.getLoadedFrom();
exifRotation = result.getExifOrientation();
bitmap = result.getBitmap();
// If there was no Bitmap then we need to decode it from the stream.
if (bitmap == null) {
InputStream is = result.getStream();
try {
bitmap = decodeStream(is, data);
} finally {
Utils.closeQuietly(is);
}
}
}
if (bitmap != null) {
if (picasso.loggingEnabled) {
log(OWNER_HUNTER, VERB_DECODED, data.logId());
}
stats.dispatchBitmapDecoded(bitmap);
if (data.needsTransformation() || exifRotation != 0) {
synchronized (DECODE_LOCK) {
if (data.needsMatrixTransform() || exifRotation != 0) {
bitmap = transformResult(data, bitmap, exifRotation);
if (picasso.loggingEnabled) {
log(OWNER_HUNTER, VERB_TRANSFORMED, data.logId());
}
}
if (data.hasCustomTransformations()) {
bitmap = applyCustomTransformations(data.transformations, bitmap);
if (picasso.loggingEnabled) {
log(OWNER_HUNTER, VERB_TRANSFORMED, data.logId(), "from custom transformations");
}
}
}
if (bitmap != null) {
stats.dispatchBitmapTransformed(bitmap);
}
}
}
return bitmap;
}複製程式碼
這個方法很長,最終返回我們所期望的Bitmap
物件,說明這一個方法正是真正從各個渠道獲取Bitmap
物件的方法。我們看到,這裡又進行了一次記憶體快取的檢查,避免兩次請求相同圖片的重複載入,沒有的話,利用RequestHandler
物件進行載入。RequestHandler
是一個抽象類,load()
方法抽象,因為根據不同圖片的載入要執行不同的操作,比如從網路中獲取,從resource中獲取,從聯絡人中獲取,從MediaStore獲取等,這裡運用了模板方法的模式,將一些方法將邏輯相同的方法公用,具體的載入細節子類決定,最終都返回Result
物件。
根據不同的RequestHandler
例項,我們可能可以直接獲取一個Bitmap物件,也可能只獲取一段流InputStream,比如網路載入圖片時。如果結果以流的形式提供,那麼Picasso會自動幫我們將流解析成Bitmap物件。之後根據我們之前通過RequestCreator
對Request
的配置,決定是否對Bitmap物件進行變換,具體實現都大同小異,利用強大的Matrix,最後返回Bitmap。
之後我們再回到run()
方法,假設這裡我們成功獲取到了Bitmap
,那麼是怎麼傳遞的呢?這裡還是利用了Dispatcher
if (result == null) {
dispatcher.dispatchFailed(this);
} else {
dispatcher.dispatchComplete(this);
}複製程式碼
和之前一樣,Dispatcher
內部通過Handler傳送了一個特定的訊息,然後執行。
void performComplete(BitmapHunter hunter) {
if (shouldWriteToMemoryCache(hunter.getMemoryPolicy())) {
cache.set(hunter.getKey(), hunter.getResult());
}
hunterMap.remove(hunter.getKey());
batch(hunter);
if (hunter.getPicasso().loggingEnabled) {
log(OWNER_DISPATCHER, VERB_BATCHED, getLogIdsForHunter(hunter), "for completion");
}
}複製程式碼
上面就是它具體做的事,這裡著重看batch()
方法,相信這個方法一定是通過某種方式將獵人狩獵的Bitmap給上交給國家了。
private void batch(BitmapHunter hunter) {
if (hunter.isCancelled()) {
return;
}
batch.add(hunter);
if (!handler.hasMessages(HUNTER_DELAY_NEXT_BATCH)) {
handler.sendEmptyMessageDelayed(HUNTER_DELAY_NEXT_BATCH, BATCH_DELAY);
}
}複製程式碼
咦?這裡還是沒有將Bitmap
發出,但是通過handler發出了一個訊息,恩恩,這都是套路了。這裡有個設計很棒的地方,這裡傳送訊息用了延時,為什麼呢?為什麼不馬上傳送呢?Picasso是將圖片一批批的送出去的,每次傳送的間隔為200ms,間隔不長也不短,這樣有什麼好處呢,好處就是如果我們看到一部分圖片是一起載入出來的,而不是一張一張載入出來的。這個設計好貼心。前面根據網路情況決定執行緒池大小的做法也好貼心,Jake大大真是超棒!
找到了這個訊息收到後具體執行的方法了
void performBatchComplete() {
List<BitmapHunter> copy = new ArrayList<BitmapHunter>(batch);
batch.clear();
mainThreadHandler.sendMessage(mainThreadHandler.obtainMessage(HUNTER_BATCH_COMPLETE, copy));
logBatch(copy);
}複製程式碼
這裡就體現了Handler執行緒通訊與切換的強大之處了,這裡通過將一批Bitmap物件交給了處理主執行緒訊息的Handler處理,這樣我們獲取到Bitmap並載入到ImageView上就是在主執行緒了操作的了,我們去看看這個Handler做了什麼。這個Handler是在Dispatcher構造時傳進來的,在Picasso類中定義。哈哈,正不虧是掌握一切權與利的物件,最苦最累的活讓別人去做,自己做最風光體面的事。
static final Handler HANDLER = new Handler(Looper.getMainLooper()) {
@Override public void handleMessage(Message msg) {
switch (msg.what) {
case HUNTER_BATCH_COMPLETE: {
@SuppressWarnings("unchecked") List<BitmapHunter> batch = (List<BitmapHunter>) msg.obj;
//noinspection ForLoopReplaceableByForEach
for (int i = 0, n = batch.size(); i < n; i++) {
BitmapHunter hunter = batch.get(i);
hunter.picasso.complete(hunter);
}
break;
}
……
}
};複製程式碼
不多說了,我們來看看程式碼,恩,很清楚的針對每個BitmapHunter執行了complete()
方法,那就去看看嘍。
void complete(BitmapHunter hunter) {
Action single = hunter.getAction();
List<Action> joined = hunter.getActions();
boolean hasMultiple = joined != null && !joined.isEmpty();
boolean shouldDeliver = single != null || hasMultiple;
if (!shouldDeliver) {
return;
}
Uri uri = hunter.getData().uri;
Exception exception = hunter.getException();
Bitmap result = hunter.getResult();
LoadedFrom from = hunter.getLoadedFrom();
if (single != null) {
deliverAction(result, from, single);
}
if (hasMultiple) {
//noinspection ForLoopReplaceableByForEach
for (int i = 0, n = joined.size(); i < n; i++) {
Action join = joined.get(i);
deliverAction(result, from, join);
}
}
if (listener != null && exception != null) {
listener.onImageLoadFailed(this, uri, exception);
}
}複製程式碼
這個方法從BitmapHunter
中獲取Action
物件,若這個Action
成功完成,會執行Action的complete()
方法,並將結果傳入,很明顯這是一個回撥方法。Action也是一個抽象類,根據我們的Target
不同會生成不同的Action物件,比如into(target)
方法會生成TargetAction
物件,into(imageView)
會生成ImageViewAction
物件,呼叫fetch()方法會產生FetchAction
物件。這裡由於我們是以將圖片載入到ImageView中來分析的,所以我們只分析一下ImageViewAction
的程式碼。
每個Action
的子類要實現兩個回撥方法,一個error()
,在圖片載入失敗時觸發,一個complete()
,在圖片成功載入時呼叫。
@Override public void complete(Bitmap result, Picasso.LoadedFrom from) {
if (result == null) {
throw new AssertionError(
String.format("Attempted to complete action with no result!\n%s", this));
}
ImageView target = this.target.get();
if (target == null) {
return;
}
Context context = picasso.context;
boolean indicatorsEnabled = picasso.indicatorsEnabled;
PicassoDrawable.setBitmap(target, context, result, from, noFade, indicatorsEnabled);
if (callback != null) {
callback.onSuccess();
}
}
@Override public void error() {
ImageView target = this.target.get();
if (target == null) {
return;
}
Drawable placeholder = target.getDrawable();
if (placeholder instanceof AnimationDrawable) {
((AnimationDrawable) placeholder).stop();
}
if (errorResId != 0) {
target.setImageResource(errorResId);
} else if (errorDrawable != null) {
target.setImageDrawable(errorDrawable);
}
if (callback != null) {
callback.onError();
}
}複製程式碼
恩,很清楚的看到成功時就正確顯示圖片,失敗時則根據是否設定了錯誤圖來選擇是否載入錯誤圖。這裡用到了一個PicassoDrawable
的類,這個類繼承自BitmapDrawable
類,通過它,可以很方便的實現淡入淡出效果。
總結
到這裡,我們分析完了一次成功的Picasso圖片載入過程,當然我們不可能每次都成功,也會發生各種錯誤,或者我們暫停了載入又繼續載入等,這些Picasso都作出了不同的處理,執行緒之間通過Handler進行通訊。這裡就不一一詳述了。相信大家自己會去看的。
不得不說,Picasso真是一個優雅的圖片載入庫,用極少的程式碼完成了了不起的事,從API的設計到程式碼的編寫,無不體現了作者的深思熟慮和貼心,運用多用設計模式巧妙地提供極其簡單的呼叫介面,隱藏背後複雜的實現。通過對Picasso的使用與原始碼分析,我學到了很多,希望我以後也可以設計出這麼優雅實用的庫或框架。
天道酬勤,我要加油!