RecyclerView — 優雅設置itemView 間的邊距

Voss
Jun 4, 2022

RecyclerView 是幾乎所有App都會放入與使用的熱門元件

透過adapter與itemView 能漂亮的實現可滑動的列表,我們也希望每個itemView都能有相同的間隔,呈現給使用者整齊一致的畫面

而菜雞如我,一開始都是在itemView的設置margin or padding,例如設置maringTop = 10dp ,讓每個item都與下一個有相同的間隔,但最後一個item卻沒有顧慮到,所以還要再recyclerView外層去設定

而這並不是一個正確且聰明的方法,但 Decoration 能完美解決這個問題 ~

自定義itemDecoration

我們可以透過自定義的Decoration,來達到我們想要呈現的間距

  1. CustomItemDecoration

要使用自定義的分隔效果,必須先創立一個物件繼承ItemDecoration,然後去覆寫裡面的 getItemOffests,裡面我們有四個參數可使用

分別是 :

(1) Rect outRect : 表示 item 的上下左右所留下的邊距

(2) View view : 指當前 item 的 View 物件

(3) RecyclerView parent : 指 RecyclerView 本身

(4) RecyclerView.State state : 指 RecyclerView 當前的狀態

在物件的建構式當中放入我們想設定的邊距大小,主要是透過outRect 來設置邊距,由於希望RecyclerView的item邊距每個都相同,如果用傳統的方式,會產生top、bottom疊加的狀況,所以要用個判斷式來針對最top的item,也就是index = 0 的 item,在遇到它的當下,設置 top margin 跟 bottom margin,而其他 item 就只有 bottom margin,透過這種方式,我們就能將邊距平均分個每個 item

2. px & dp

在等等設置Decoration 有個地方要注意,outRect 它是依據px 來調整畫面的,跟我們平常使用dp設置margin是不一樣的

所以必須將我們想要的dp margin數值轉換為px,因為每個手機的dpi不一樣。為了讓每個裝置都能呈現出我們想要的margin,必須先拿到手機本身的解析度,可以透過 resource 的 displayMetrics 拿到density,就能開始轉換px

3. 將ItemDecoration 放入recyclerView

解決了px、dp轉換的問題,就能把我們設計的Decoration生出來,並透過addItemDecoration 將想要的邊距大小放入recylerView當中了。這邊我希望margin是15dp,那就透過呼叫轉換dpToPx,讓outRect得到相對應的px數值

總結

這樣就大功告成了~ 雖然過程需要去設計物件還要處理px、dp比例轉換的問題,但比起之後遇到大量RecyclerView畫面,要不斷的去調整margin。只要事前創立一個ItemDecoration,就能隨心所欲的控制item間的距離了~

參考資料 :

https://www.aiwalls.com/android%E8%BB%9F%E9%AB%94%E9%96%8B%E7%99%BC%E6%95%99%E5%AD%B8/06/29206.html

--

--

Voss

I’m Voss , a Software Engineer , a Reader , a Body Builder