iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
自我挑戰組

30 天開發 Android App 的流水帳系列 第 9

Day 9:以 RecyclerView 資料顯示星戰人物

  • 分享至 

  • xImage
  •  

在前幾天的嫁接資料的檢視都是以 logcat 呈現,是想留個篇幅來跟大家聊聊 RecyclerView。這個元件對開發 Android App 的開發者來說相當熟悉,畢竟 Google 官方已經推行它好多年,自己也是習慣以 RecyclerView 去做資料呈現。除了基本的直向列表顯示之外,常見的顯示方式是用 LayoutManager 去決定要顯示的方向以及顯示的個數,無論顯示的什麼格式,彈性都非常的大。

資料流的方向

直向資料流顯示首選是 RecyclerView ,或是衍生的第三方套件們。就自己的觀察,主要是直向資料流顯示的內容會比橫向多上很多,像是 Facebook、 Instagram 和 Pinterest 等等都是採用這種設計。

不過,不得不提到目前有些資料呈現會考慮橫向設計,RecyclerView 就不是唯一選擇,也許 viewPager 或是現在新的 viewPager2 都可以列入考慮。多一些選擇之外,也要觀察自己的資料量多寡或是需求規格來決定要決定何種套件。就以觀察各大 App 的橫幅廣告(ex. 蝦皮購物) 採用 viewPager 做法比較多,只是比較棘手的是輪播效果跟快取內容的做法。至於資料流時常更新或數量非常龐大的話,建議還是回來使用 RecyclerView 吧。

格數

Layout Manager 常見的有兩種 LinearLayoutManager 和 GridLayoutManager。前者故名思義就是可以顯示一列或是一欄的列表,後者則是可以讓列或行可以顯示多筆資料。

  • LinearLayoutManager:顯示的區塊相較於格狀大,會是多種元件混合顯示居多,舉例來說就是社群網路的動態資料呈現
  • GridLayoutManager:可自訂最大顯示欄數,會以單一元件顯示居多。像是相簿或是購物服務的商品清單等等
  • StaggeredLayoutManager:跟 GridLayoutManager 相似,但可依元件內的不同高度交錯呈現,最好的範列就是 Pinterest 的瀑布流

分享了自己在元件上設計的經驗後,回到主題星戰人物資料要怎麼呈現呢?其實資料只有顯示人物基本資訊,所以這邊只想用直向的 RecyclerView 去呈現,設計上會是像這樣:

  • 每個 TextView 之間都有 8dp 的間距
  • Name 是重要的內容,希望字體會是看起來最大大小,設置是 16sp 和粗體
  • 其他的資訊內容,則是為 12sp
  • 排版想法如下:
 _____________________
|
| Sky Walker
|
| Height(cm): 172 
|
| Weight(kg): 77
|
| Gender:Male
|
| Born in 19BBY
|
 ----------------------

最後截個圖,結束今天!
https://ithelp.ithome.com.tw/upload/images/20200921/20130546qh35iewsId.png


上一篇
Day 8:藉由 Retrofit 嫁接星戰 API(2/2)
下一篇
Day 10:30 天挑戰,第 1 個里程碑 - 雛型
系列文
30 天開發 Android App 的流水帳32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言