RecyclerView 是幾乎所有App都會放入與使用的熱門元件
透過adapter與itemView 能漂亮的實現可滑動的列表,我們也希望每個itemView都能有相同的間隔,呈現給使用者整齊一致的畫面
而菜雞如我,一開始都是在itemView的設置margin or padding,例如設置maringTop = 10dp ,讓每個item都與下一個有相同的間隔,但最後一個item卻沒有顧慮到,所以還要再recyclerView外層去設定
而這並不是一個正確且聰明的方法,但 Decoration 能完美解決這個問題 ~
自定義itemDecoration
我們可以透過自定義的Decoration,來達到我們想要呈現的間距
- 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