Android Sticky Header RecyclerView

https://github.com/DNights/StickyHeaderRecyclerViewSample

DNights/StickyHeaderRecyclerViewSample

 

 

 

 

 

RecyclerView 에서 Sticky Header 를 구현 샘플 코드입니다.

 

ItemDecoration 을 사용하여 상단의 Top holder를 RecyclerView 위에 그려서 고정된것처럼 보이게 하는 방법입니다.

 

아래의 코드는 StickyHeaderItemDecoration 의 전체 코드입니다.

 

[StickyHeaderItemDecoration]

package dev.dnights.stickyheaderrecyclerviewsample

import android.graphics.Canvas
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView

class StickyHeaderItemDecoration(private val sectionCallback: SectionCallback) :
    RecyclerView.ItemDecoration() {
    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        super.onDrawOver(c, parent, state)

        val topChild = parent.getChildAt(0) ?: return
        val topChildPosition =
            parent.getChildAdapterPosition(topChild)

        if (topChildPosition == RecyclerView.NO_POSITION) {
            return
        }

        val currentHeader: View =
            sectionCallback.getHeaderLayoutView(parent, topChildPosition) ?: return
        fixLayoutSize(parent, currentHeader, topChild.measuredHeight)

        val contactPoint = currentHeader.bottom
        val childInContact: View = (getChildInContact(parent, contactPoint) ?: return)

        val childAdapterPosition = parent.getChildAdapterPosition(childInContact)
        if (childAdapterPosition == -1) {
            return
        }

        if (sectionCallback.isHeader(childAdapterPosition)) {
            moveHeader(c, currentHeader, childInContact)
            return
        }
        drawHeader(c, currentHeader)
    }

    private fun getChildInContact(parent: RecyclerView, contactPoint: Int): View? {
        var childInContact: View? = null
        for (i in 0 until parent.childCount) {
            val child = parent.getChildAt(i)
            if (child.bottom > contactPoint) {
                if (child.top <= contactPoint) {
                    childInContact = child
                    break
                }
            }
        }
        return childInContact
    }

    private fun moveHeader(c: Canvas, currentHeader: View, nextHeader: View) {
        c.save()
        c.translate(0f, nextHeader.top - currentHeader.height.toFloat())
        currentHeader.draw(c)
        c.restore()
    }

    private fun drawHeader(c: Canvas, header: View) {
        c.save()
        c.translate(0f, 0f)
        header.draw(c)
        c.restore()
    }

    private fun fixLayoutSize(parent: ViewGroup, view: View, height: Int) {
        val widthSpec = View.MeasureSpec.makeMeasureSpec(parent.width, View.MeasureSpec.EXACTLY)
        val heightSpec = View.MeasureSpec.makeMeasureSpec(parent.height, View.MeasureSpec.EXACTLY)
        val childWidth: Int = ViewGroup.getChildMeasureSpec(
            widthSpec,
            parent.paddingLeft + parent.paddingRight,
            view.layoutParams.width
        )
        val childHeight: Int = ViewGroup.getChildMeasureSpec(
            heightSpec,
            parent.paddingTop + parent.paddingBottom,
            height
        )
        view.measure(childWidth, childHeight)
        view.layout(0, 0, view.measuredWidth, view.measuredHeight)
    }


    interface SectionCallback {
        fun isHeader(position: Int): Boolean
        fun getHeaderLayoutView(list: RecyclerView, position: Int): View?
    }
}

 

onDrawOver 에서 RecycleView 위에 덮어서 화면을 그리며

callback 을 통해서 현재 상단 위치의 item의 view type이 header 인지 여부와 header의 view 를 받아서 

cavers에 moveHeader를 통해서 header가 만났을때 이동하는 모습을 그리거나

drawHeader을 통해서 항상 상단에 표기되도록 그립니다. 

 

 

[참고 링크]

https://leveloper.tistory.com/198

[Android] Sticky Header RecyclerView 응용하기

 

https://dailylonnie0125.tistory.com/22

Sticky Header Recyclerview using ItemDecoration without library - 1 (Kotlin)

 

https://jhpop.tistory.com/152

RecyclerView - StickyHeader

 

https://www.it-swarm-korea.com/ko/android/recyclerview%ec%97%90%ec%84%9c-%eb%81%88%ec%a0%81%ed%95%9c-%ed%97%a4%eb%8d%94%eb%a5%bc-%eb%a7%8c%eb%93%a4%eb%a0%a4%eb%a9%b4-%ec%96%b4%eb%96%bb%ea%b2%8c%ed%95%b4%ec%95%bc%ed%95%a9%eb%8b%88%ea%b9%8c-%ec%99%b8%eb%b6%80-lib%ec%97%86%ec%9d%b4/1055032283/

android — RecyclerView에서 끈적한 헤더를 만들려면 어떻게해야합니까? (외부 lib없이)