RecyclerView & GirdLayout Decoration Customizing & Caution

DB: Firebase

Architecture: MVVM + LiveData

UI Flow

Calendar Item Click -> getData by matched Date -> refresh UI

 

GridSpacingItemDecoration Customizing

@SuppressLint("NotifyDataSetChanged")
fun trainerManager(recycler: RecyclerView, adapter: JournalFoodView.FoodJournalAdapter, foodData: MutableList<FirebaseFetchFood>, context: Context){
    Log.d("trainerManager","Called")
    adapter.dataList = foodData
    val gridLayoutManager = GridLayoutManager(context, 3)
    recycler.layoutManager = gridLayoutManager

    recycler.addItemDecoration(GridSpacingItemDecoration(3, 50, true))

    //Note: ItemDecorationCount
    //if(recycler.itemDecorationCount == 0){
    //    recycler.addItemDecoration(GridSpacingItemDecoration(3, 50, true))
    //}
    recycler.adapter = adapter
    adapter.notifyDataSetChanged()
}

class GridSpacingItemDecoration(private val spanCount: Int, private val spacing: Int, private val includeEdge: Boolean): RecyclerView.ItemDecoration() {
    override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        val position = parent.getChildLayoutPosition(view)
//            .apply{ Log.d("position", "Called")}
        val column = position % spanCount
//        Log.d("getItemOffsets", "Called")
//        Log.d("column", column.toString())
        if(includeEdge){
            outRect.left = spacing - column * spacing / spanCount // spacing - column * ((1f / spanCount) * spacing)
            outRect.right = (column + 1) * spacing / spanCount // (column + 1) * ((1f / spanCount) * spacing)
            if(position < spanCount){
                outRect.top = spacing
            }
            outRect.bottom = spacing
        }else{
            outRect.left = column * spacing / spanCount // column * ((1f / spanCount) * spacing)
            outRect.right = spacing - (column + 1) * spacing / spanCount // spacing - (column + 1) * ((1f /    spanCount) * spacing)
//            Log.d("F outRect.left", "${column * spacing / spanCount}")
//            Log.d("F outRect.right", "${spacing - (column + 1) * spacing / spanCount}")
            if(position >= spanCount){
                outRect.top = spacing
            }
        }
    }
}

 

Condition 1.

Ex) 2022-06-13 날짜를 처음 클릭시 

Firebase AddValueEventListener -> send Data to UI

Condition 2.

EX) 2022-06-13 -> 2022-06-14 -> 2022-06-13 날짜 클릭 후 다른날짜 클릭후 다시 날짜를 클릭시

내부 과정

-> (2022-06-13 클릭)이미 리사이클러뷰 & 그리드 뷰는 CustomDecoration으로 한번 그려진 상태이다. 

-> (2022-06-14 ->  2022-06-13 재클릭) 이미 그려진 곳에 또 다시 그려지면서 그리드 뷰 아이템이 점점 내려간다.

 

원인

이미 그려진 상태에서 Decoration은 또 그려준다.. 이로 인해 점점 내려가는 것으로 확인

 

해결 방안

recyclerview의 Adapter의 데코레이션 카운트가 0인지 1인지 그 이상인지를 확인하면된다

 

if(recycler.itemDecorationCount == 0){
    recycler.addItemDecoration(GridSpacingItemDecoration(3, 50, true))
}