使用RecyclerView展示Firebase資料庫與雲端儲存的相片

作者 | 2016-08-29

當我們在APP中設計了新增雲端相片功能,並將使用者想分享的資料儲存在雲端資料庫,再以雲端方式上傳手機中的相片至Firebase Storage的雲端儲存後,現在是時候將雲端資料以Android 5.0開始提供的RecyclerView清單元件展示了。

Firebase上的資料

Database

A7423

Storage

A7424

設計RecyclerView

在MainActivity中加入一個RecyclerView,設計一客製化layout展示每一個雲端相片,最後使用FirebaseRecyclerAdapter設定並展示。

加入RecyclerView

content_main.xml中加入CustomView

A7426

選擇RecyclerView

A7425

content_main.xml

取得RecyclerView屬性

MainActivity.java

請將onAuthStateChanged中的user物件也提昇成為屬性,並在取得user屬性後執行新設計的setupRecyclerView()方法:

在setupRecyclerView方法中,先取得資料庫中的users/UserID/pics參照。

Photo類別設計

設計與pics參照內資料屬性相同的JavaBean類別「Photo」:

A7427

在setupRecyclerView方法中接著呼叫limitToLast方法取得最後10筆資料,並設定ValueEventListener:

使用這個方式雖然可以取得每個相片物件的資料,但也得要自行設計合適的Adapter類別,並自行撰寫相對應的方法,以產出正確的View物件。

使用FirebaseRecyclerAdapter

在此,我將使用另一種方式,只需要設計一個RecyclerView.ViewHolder類別,再使用FirebaseRecyclerAdapter,即可快速完成原本繁雜的設計工作。

設計單列資料版面 res/layout/row_photo.xml

使用RelativeLayout:

A7429

配置

A7430

原始碼:

或是使用LinearLayout的版本:

預覽圖:

A7432

導入Glide類別庫

build.gradle (Module:app)

 

[Sync Project]

設計ViewHoler內部類別

在MainActivity內設計一PhotoViewHolder類別,代表一列資料的元件格式定義:

在PhotoViewHolder中,我多設計了一個setPhoto方法,好讓未來能夠設定它內部資料。

最後萬事具備,只欠東風了,產生FirebaseRecyclerAdapter:

執行結果:

A7431

[版權聲明]

本文章版權為湯秉翰所有,授權範圍僅限綠豆湯網站使用,除Facebook之類社群等未更改本文章出處之分享行為不在此限,其他個人或公司未經作者同意,不得任意將本文章內容轉載至其他網站,或以任何形式重製,為以免觸犯著作權法,請尊重作者之智慧財產權。

相關文章:

Category: Android Firebase 標籤:, , ,

關於 Hank Tom

專長為程式語言、雲端服務開發,Linux系統管理, 任職:利拓科技 技術長,海林行動科技 技術總監 輔仁大學 兼任助理教授 ,為 Android高效入門>深度學習、CentOS 7建置、管理與伺服器架設實戰、Java網路程式設計、雲端網頁程式設計-Google App Engine應用實作 等書作者

使用Facebook直接回應

2 thoughts on “使用RecyclerView展示Firebase資料庫與雲端儲存的相片

  1. Steve

    Hank
    I try to use the above program for practicing purpose in Android studio.
    Both “FirebaseRecyclerAdapter" will become to red color in studio.
    Is there any thing I missed?
    Steve
    “FirebaseRecyclerAdapter adapter =
    new FirebaseRecyclerAdapter(Photo.class, R.layout.row_photo, PhotoViewHolder.class, picRef)"

    回覆

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *