RecyclerView

串接Open Data並用RecyclerView呈現 ~ 以台北市立動物園為例

莊以楷 2019/10/05 17:57:15
77

串接Open Data並用RecyclerView呈現 

~ 以台北市立動物園為例

 

作者YiKai Chuang

 

前言

 

本篇是使用台北市資料大平台的公開資料【參考來源1 】,以台北市立動物園的館區簡介和植物資料為例,基於MVCModel–view–controller架構並且利用RecyclerView來實作的Android app

 

MVC架構簡介【參考來源2 】:

  • Model:業務邏輯 (business logic) 的處理,譬如:數據資料的存取、資料庫、網路連線、耗時的任務處理...等。

  • View:呈現與使用者互動的結果畫面,譬如XML佈局文件。

  • Controller決定如何與 Model互動,產生新的邏輯結果,並且更新 View 的介面,譬如Android本身的ActivityFragment...等

MVC的優點

1.將View層和Model層分離出來各自管理,可以降低各模組之間程式碼的相互影響。

2.可擴充性提高,降低bug出現的機率。

3.各模組的職責劃分明確,利於程式碼的後續維護。

 

開發流程:

 

本範例的整合開發環境(IDE)是Android Studio 3.5

compileSdkVersion是29

minSdkVersion是23

targetSdkVersion是29

 

  1. 首先app層級的bundle.gradle加上引用

 

  1. 接著XML文件開始使用RecyclerView

 

  1. FragmentRecyclerView的初始化,因為是基於MVC架構,所以我依自己的習慣建了controllermodelviewadapter...等資料夾)

 

  1. 本範例所使用的資料來自台北市資料大平台,網址是

https://data.taipei/#/dataset?keyword=%E5%8B%95%E7%89%A9%E5%9C%92&type=dataset&type=openapi&type=paydata

由於首頁要呈現的畫面是台北市立動物園的各館區簡介所以點擊【臺北市立動物園_館區簡介】

 

  1. 進到館區簡介頁面後,右上方有個【API】選項

 

  1. 點擊右上方的【API】之後,就可以看到所需的API網址

 

  1. model資料夾先建立之後可能會用到的類別,用以接收資料

 

  1. OkHttp套件的GET方法取得後台所傳回的Json格式的資料,接著再用Gson套件將結果轉成先前建立好的類別

 

  1. 建立item_view.xml,用來作為RecyclerView中各itemview

 

  1. 接著建立Adapter來控管每個item,我自訂了AreaRecyclerAdapter類別(繼承RecyclerView.Adapter),用以顯示各館區的資料 

 

  1. AreaRecyclerAdapter相關覆寫的方法說明如下:

1.自訂一個命名為ViewHolder的類別(繼承RecyclerView.ViewHolder),並在此處定義每個item的介面與邏輯。

 

2.在onCreateViewHolder指定item所使用的view,轉換成AreaRecyclerAdapter.ViewHolder的物件之後回傳

 

3.透過自定義的方法(refreshData)將資料清單(areaList)傳進來

4.在getItemCount回傳資料清單的數量

 

5.在onBindViewHolder透過 position參數指定每個item所用到的資料。如果需要顯示圖檔,在本範例是使用Glide套件

 

6.各館區的植物簡介也是依相同的邏輯來實作,處理完畢之後基本上就大功告成。

 

若需要完整的程式碼請參考以下網址

https://github.com/PeterChuang0730/peterRepository.git



手機的執行結果

 

1.主畫面(臺北市立動物園的館區列表)

 

2.使用者所選取的館區的詳細介紹

 

3.使用者所選取的館區的植物資料

 

4.使用者所選取的植物的詳細介紹

 

最後總結:

 

依照Android的官網文件【參考來源3 】,相較於傳統的ListViewRecyclerView不僅更先進、更具彈性,同時也適用於大量資料的處理。在做客戶專案時我曾碰過呼叫完API、載入圖片後,偶爾會發生畫面出現稍微閃爍的情況,後來調整setHasStableIds參數,就獲得改善。也許新釋出的開發元件一開始或多或少難免會踩到坑,但如果花點時間深入研究根據不同應用的需求加以優化,相信應該可以讓畫面更加順暢,做出更高效率的app

 

參考來源:

1. https://data.taipei/#/dataset?keyword=%E5%8B%95%E7%89%A9%E5%9C%92

2. https://windsuzu.github.io/learn-android-architecture-pattern/

 

3. https://developer.android.com/guide/topics/ui/layout/recyclerview

 

莊以楷