使用Firebase與Glide實作「最新消息」清單,圖檔取得及顯示

作者 | 2016-08-02

一般在APP中實作最新消息、新聞等功能往往需要架設伺服器,還要開發設計圖檔讀取等功能,如果能夠善用Firebase與圖檔讀取等強大的平台與工具,能在短時間將功能上線,達到功能的目的。本篇著重在custom layout、清單內圖檔的取得及顯示,Firebase相關前置作業,請參考Firebase系列文章

本篇將完成如下影片的新聞功能APP:

※影片中之帳密為虛擬,請勿寄信至此帳號喔!
現在就開始進行規劃與設計

前置作業:

  1. 註冊Firebase帳號
  2. 建立Firebase專案
  3. 建立Firebase資料
  4. 開放Firebase資料安全性規則(不檢查)
  5. 建立Android Studio新專案News
  6. 取得 google-services.json
  7. 啟用 Firebase 電子郵件/密碼授權

各位別被長串的前置作業清單嚇到了,只要曾實作過Firebase系列文章就知道,上述前置作業很快的喲!

準備好的Firebase資料如下,每筆資料有四個欄位,data (發佈日期)、png(圖檔連結)、title(標題)、url(新聞內容連結)。

mag_news_01

Firebase 資料

在啟動主畫面(activity_main.xml)加上ListView,id 預設為listView。

自定每筆資料顯示layout

新增layout : news_item.xml,news_image顯示新聞圖片、news_title顯示新聞標題、news_date顯示發佈日期,news_url為新聞內容連結,不需要顯示在畫面,故將屬性visibility設定為gone。

mag_glide_02

第4行,設定每筆資料高度。

第15行,不顯示news_url,visibility設定為gone。

第18-19行,固定圖片大小。

第22行,圖片顯示樣式 ,將圖片按比例放大(縮小)置中顯示。

第39行,設定標題列數,超過則不顯示。

準備 News 類別

本例從Firebase取得資料後,先存放到ArrayList內再讓ListView顯示 (請參考清單元件實作-清單式功能表),現在要先準備存放在ArrayList的類別。News內加入四個屬性,分別存放date, title,  url, png。

從Firebase讀取資料

將資料取出放到ArrayList list內

第19行,愈新的新聞放愈前面,所以使用list.add(0,n)將該筆內容新增在list最前面。

第20行,若使用  RecyclerView清單顯示,notifyDataSetChanged()  請改用 notifyItemInserted(0)

客製化Adapter

類別 NewsAdapter 繼承 ArrayAdapter,複寫 getView()方法,內部類別ViewHolder,負責提供ListView展示每列資料的元件及元件的內容。

取得圖片– 使用AsyncTask

截至目前為止,APP皆在main thread上執行,有關網路存取等耗時工作,須採非同步作業(詳見Android AsyncTask-耗時工作設計Android AsyncTask-實作練習)。

我們希望將圖片連結傳送給LoadImageTask,等待非同步處理結束後,能自動顯示在畫面上,因此,除了將圖片連結傳送過去,還需要將欲顯示圖片的ImageView元件送過去(上段程式第19行)。

第7行,取得欲顯示圖片的ImageView元件

第9-11行,取得Bitmap

第23行,將取回之Bitmap顯示於ImageView元件。

這樣取得圖片好像有點麻煩,有沒有更好更快的方法?如果可以直接把取得圖片、顯示都寫在getView()方法內,不是更簡便嗎?

取得圖片– 使用類別庫Glide

Glide 並非官方類別庫,Google 曾在2014 Google I/O上介紹此一圖片下載類別庫。請在build.gradle (Moudule: app)導入glide。

接著,只要將LoadImageTask註解,改成如下:

就這麼簡單!而且,Glide還有個好處,它會根據ImageView尺寸,自動下載符合大小的圖檔,且具cache功能,大大提高了載圖及顯示的效能,使用Glide可明顯的感覺圖片下載及畫面顯示快了許多。

ListView清單顯示內容

第4行,我們希望點選清單內該筆新聞,隨即顯示新聞內容,故設定清單 OnItemClickListener。

第7行,取出該列資料的ViewHolder。

第8行,從ViewHolder取出新聞連結。

第9-11行,顯示新聞網頁。

覺得本文章有幫助嗎? 下方按讚處鼓勵一下吧

相關文章:

使用Facebook直接回應

4 thoughts on “使用Firebase與Glide實作「最新消息」清單,圖檔取得及顯示

  1. yujie

    請問我連結firebase資料庫這邊
    News n = new News();
    n.setDate((String) dataSnapshot.child(NEWS_DATE).getValue());
    n.setPng((String) dataSnapshot.child(NEWS_PNG).getValue());
    n.setTitle((String) dataSnapshot.child(NEWS_TITLE).getValue());
    n.setUrl((String) dataSnapshot.child(NEWS_URL).getValue());
    照著你打 setDate這些都會是紅字欸

    回覆
    1. Hank Tom

      猜測應該是setter/getter方法沒寫,這是Java的基礎,請參考Android高效入門一書,或先認識Java Bean的getter與setter方法。

      回覆
  2. 謝小穎

    News n = news.get(position);
    news是您firebase的名稱吧?
    請問這一段被打紅字是怎錯在哪呢?

    回覆
    1. Junior M 文章作者

      此範例未提供完整程式碼,此處的news為外部傳進的 ArrayList
      NewAdapter adapter = new NewsAdapter(this, list); 中的第二個參數

      回覆

發表迴響

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