Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

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

by
Difficulty:IntermediateLength:LongLanguages:

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

Final 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 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 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
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.