7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Android SDK

在安卓APP中使用Glide編寫圖片相冊

Scroll to top
Read Time: 4 mins

Chinese (Traditional) (中文(繁體)) translation by xingshi (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

1.什麼是Glide?

Glide是一款流行的Android開源庫,用於載入圖片、視頻和GIF動畫。使用Glide可以從許多不同的地方(如遠端伺服器或本地檔案系統)載入和顯示media檔。

預設情況下,Glide使用自訂實現的HttpURLConnection來通過網路載入圖片。但是,Glide還向其他流行的網路庫(如VolleyOkHttp)一樣提供了外掛程式。

2.為什麼要使用Glide?

在Java中開發自己的media載入和顯示功能很痛苦:你必須關心緩存,解碼,管理網路連接,執行緒和異常處理等。而Glide是一個易於使用,很好計畫過的,文檔化和經過徹底測試的庫,可以為你節省大量寶貴的時間,並避免你頭痛。

在本教程中,我們將通過構建一個簡單的圖片相冊APP來瞭解Glide 3。它將通過互聯網載入圖像,並將它們作為縮略圖顯示在RecyclerView中,當使用者點擊任何圖片時,它將打開大圖片的詳細activity。

3.  創建一個Android Studio項目

啟動Android Studio並創建一個名為MainActivity的空項目  。

Android Studio new project screenshotAndroid Studio new project screenshotAndroid Studio new project screenshot

2.聲明依賴

創建新項目後,在build.gradle中指定以下依賴關係。

或使用Maven:

確保添加Glide依賴關係後同步專案。

集成庫

如果要在專案中使用網路庫(如OkHttp或Volley)進行網路操作,建議你為所使用的庫(而不是默認捆綁HttpURLConnection)集成Glide。

Volley

OkHttp

可以訪問官方的Glide集成指南瞭解更多資訊。

3.  添加Internet許可權

由於Glide將通過互聯網執行載入圖片的網路請求,因此我們需要在AndroidManifest.xml中申請INTERNET許可權  。

4.創建佈局

我們開始創建RecyclerView。   

創建自訂item佈局 

接下來,我們來創建用於RecyclerView每個item的XML佈局(ImageView)。

現在我們已經創建了佈局,下一步是創建用於填充資料的RecyclerView適配器。在此之前,我們來創建一個簡單的資料模型。

5.創建資料模型

我們為RecyclerView定義一個簡單的資料模型。該模型實現了Parcelable,Parcelable用來從一個元件傳輸高性能資料到另一個元件。 在這裡,將資料從SpaceGalleryActivity傳送到到SpacePhotoActivity

6.  創建適配器

我們將創建一個適配器來填充RecyclerView。我們還將實現一個點擊監聽事件來打開詳細的Activity (即SpacePhotoActivity),並把SpacePhoto實例作為extra傳過去。 SpacePhotoActivity將顯示圖像的詳細資訊。我們將在後面創建它。

7.  從網址載入圖片

從互聯網獲取圖片就是我們需要Glide來完成的工作,當用戶滑動APP時使用RecyclerView的onBindViewHolder()方法將圖片顯示在單獨的ImageView中。

一步一步來,以下是Glide調用的方法:

  • with(Context context):我們首先將上下文傳遞給with() 方法,開始載入過程。
  • load(String string):將圖片源要麼是目錄路徑,URI或者是URL。
  • placeholder(int resourceId):一個本地APP資源id,在圖片被載入前作為占位元的圖片。
  • into(ImageView imageView):要放置圖片的目標imageView控制項。

請注意,Glide還可以載入本地圖像。只需將Android資源ID,檔路徑或URI作為參數傳遞給load()方法。

圖片調整和轉換

你可以在ImageView顯示圖片之前使用Glide的  .override(int width, int height) 方法調整圖片的大小。 當從伺服器載入不同大小的圖片時,創建縮略圖很有用。請注意,維度的圖元不是dp。

以下圖片轉換也可用:

  • fitCenter():均勻地縮放圖片(保持圖像的縱橫比)以適應給定的區域。整個圖片是可見的,但可能有垂直或水準的填充。
  • centerCrop():均勻地縮放圖像(保持圖像的寬高比),以使圖片填滿給定區域,盡可能多地顯示圖片。如果需要,圖片將被水準或垂直裁剪。

8.初始化適配器

這裡我們創建RecyclerViewGridLayoutManager作為佈局管理器,初始化我們的適配器,並將其綁定到RecyclerView

9.  創建詳細的Activity

創建一個新的Activity並命名  SpacePhotoActivity。我們得到SpacePhoto的extra,並像以前一樣使用Glide載入圖片。在這裡,我們期望檔或URL是Bitmap,所以我們將使用  asBitmap()來讓 Glide接收Bitmap。 否則載入將失敗並且  .error() 回檔將被觸發 - 導致從錯誤回檔返回的資源被顯示。 如果你想確保載入的圖片是GIF,也可以使用asGif()。(我將在短時間內解釋GIF如何在Glide中工作。)

請注意,我們還初始化了載入圖片的唯一緩存:  DiskCacheStrategy.SOURCE。稍後將介紹有關緩存的更多內容。

詳細Activity的佈局

這是一個顯示詳細Activity的佈局。它只顯示一個可滾動的ImageView,該ImageView顯示載入圖片的全解析度版本。

10.  Glide中的緩存

如果仔細觀察,你將看到當重新訪問之前載入過的圖片時,該圖片的載入速度比以前更快。為什麼它會更快?因為使用了Glide的緩存系統。

在從互聯網上載入圖片後,Glide將圖片緩存在記憶體和磁片上,避免了重複的網路請求,並更快地檢索圖片。因此,在從網路載入圖片之前,Glide將首先檢查圖片在記憶體或磁片上是否可用。

但是,根據你的APP,你可能希望避免緩存,例如,如果正在顯示的圖片可能會經常更改並且不能重新載入。

那麼如何禁用緩存?

可以通過調用.skipMemoryCache(true)方法來避免記憶體緩存。但請注意,圖片仍將緩存在磁片上,為了不讓圖片在磁片上緩存,使用 .diskCacheStrategy(DiskCacheStrategy strategy) 方法,該方法採用以下枚舉值之一:

  • DiskCacheStrategy.NONE:沒有資料保存到緩存。
  • DiskCacheStrategy.SOURCE:原始資料保存到緩存。
  • DiskCacheStrategy.RESULT:將轉換後的資料結果保存到緩存。
  • DiskCacheStrategy.ALL:緩存原始資料和轉換後的資料。

為了完全避免記憶體和磁片緩存,只需一個接一個地調用這兩種方法:

11.  監聽網路請求

在Glide中,可以實現一個RequestListener來監聽載入圖片時的請求狀態。下面兩個方法只會調用一個。

  • onException():發生異常時觸發,以便處理此方法中的異常。
  • onResourceReady():圖片載入成功時觸發。

回到我們的圖片相冊APP,讓我們使用RequestListener物件來修改顯示的內容,該物件把bitmap設置給ImageView並通過使用Android Palette API提取圖片的黑暗和振動顏色來更改佈局的背景顏色。

在這裡,你還可以隱藏進度對話方塊,如果有的話。最後,確保在build.gradle中添加了Palette依賴:

12.  測試APP

最後,你可以運行APP了!點擊縮略圖獲取圖片的全尺寸版本。

Emulator running the application screenshotsEmulator running the application screenshotsEmulator running the application screenshots

10.動畫

如果你運行該APP,你會注意到在載入圖片時顯示的交叉淡入淡出動畫。Glide默認啟用該動畫,你可以通過調用dontAnimate()方法來禁用它,這樣就沒有任何動畫了。 你還可以通過調用crossFade(int duration)方法來自訂交叉淡入淡出動畫,傳遞的參數為持續時間(以毫秒為單位),該參數用來加快速度或減慢速度 , 預設為300毫秒。

GIF動畫

使用Glide在你的APP中顯示GIF動畫非常簡單。它與顯示普通圖片的工作方式相同

如果你希望圖片是GIF格式,請調用asGif()方法,這樣可以確保Glide收到GIF,否則會載入失敗,傳遞給.error() 方法的Drawable就會被顯示。

播放視頻

不幸的是,Glide不支援通過URL載入和顯示視頻。它只能載入和顯示已存儲在手機上的視頻。通過將URI傳遞給load()方法來顯示視頻。

結論

幹得漂亮!在本教程中,你已經使用Glide構建了完整的圖片相冊APP,並且瞭解了庫的工作原理以及如何將其集成到你自己的項目中。 你還學習了如何顯示本地和遠端圖片,如何顯示GIF動畫和視頻,以及如何使用圖片轉換,如調整圖片大小。 不僅如此,你還看到啟用緩存,錯誤處理和自訂請求監聽是多麼容易。

要瞭解有關Glide的更多資訊,可以參考其 官方文檔。要瞭解有關Android開發的更多資訊,請參閱Envato Tuts +上的其他課程和教程!

关注我们的公众号
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.