[Android] 리사이클러뷰에서 상단으로 스크롤하는 버튼 구현 - onScrollStateChanged

이번 포스트에서는 안드로이드에서 리사이클러뷰를 스크롤할 때 상단으로 올려주는 버튼을 구현하는 방법을 소개하겠습니다. onScrollStateChanged와 smoothScrollToPosition의 쓰임에 대해 알아보는 것을 목표로 합니다.

 

아이폰은 상태바를 두번 터치하면 최상단으로 올라오는 기능이 있습니다.

반면, 안드로이드는 스크롤을 하면 다시 돌아올때 반대로 스크롤 해야합니다.

이러한 불편함을 해소하기 위해 스크롤이 된 상태라면 버튼을 활성화 하여 화면을 최상단까지 올리는 기능을 구현해보겠습니다.

 

Android의 RecyclerView를 활용하였고, 별다른 아키텍쳐는 적용하지 않고 Activity에서 모든 구현을 마쳤습니다.

 

MainActivity

class MainActivity : AppCompatActivity() {
    private val binding: ActivityMainBinding by lazy { ActivityMainBinding.inflate(layoutInflater) }
    private val adapter: UserAdapter by lazy { UserAdapter() }

    private val scrollListener = object : RecyclerView.OnScrollListener() {
        override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
            super.onScrollStateChanged(recyclerView, newState)
            // 스크롤이 최상단에 도달했는지 확인합니다.
            if (!recyclerView.canScrollVertically(SCROLL_TOP)) {
                hideScrollTopButton() // 버튼 숨기기
            } else if (binding.btnScrollTop.visibility == View.GONE) {
                showScrollTopButton() // 버튼 보이기
            }
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

        setRecyclerView()
        setListeners()
        loadSampleData()
    }

    // 리사이클러뷰 설정
    private fun setRecyclerView() {
        binding.recyclerView.adapter = adapter
        binding.recyclerView.addOnScrollListener(scrollListener)
    }

    // 버튼 클릭 리스너 설정
    private fun setListeners() {
        binding.btnScrollTop.setOnClickListener {
            binding.recyclerView.smoothScrollToPosition(0) // 부드럽게 상단으로 스크롤
        }
    }

    // 샘플 데이터 로드
    private fun loadSampleData() {
        val items = List(30) { index ->
            User(
                profileImage = R.drawable.ic_profile_placeholder,
                name = "User ${index + 1}"
            )
        }
        adapter.submitList(items)
    }

    // 버튼 숨기기 애니메이션
    private fun hideScrollTopButton() {
        binding.btnScrollTop.animate()
            .alpha(0f)
            .withEndAction { binding.btnScrollTop.visibility = View.GONE }
    }

    // 버튼 보이기 애니메이션
    private fun showScrollTopButton() {
        with(binding.btnScrollTop) {
            visibility = View.VISIBLE
            alpha = 0f
            animate().alpha(1f)
        }
    }

    companion object {
        private const val SCROLL_TOP = -1 // 상단 스크롤 상수
    }
}

 

 

코드 설명

OnScrollListener

    private val scrollListener = object : RecyclerView.OnScrollListener() {
        override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
            super.onScrollStateChanged(recyclerView, newState)
            // 스크롤이 최상단에 도달했는지 확인합니다.
            if (!recyclerView.canScrollVertically(SCROLL_TOP)) {
                hideScrollTopButton() // 버튼 숨기기
            } else if (binding.btnScrollTop.visibility == View.GONE) {
                showScrollTopButton() // 버튼 보이기
            }
        }
    }

 

onScrolled를 사용하지 않고 onScrollStateChanged를 사용했습니다.

차이점은 onScrolled은 스크롤을 이동 할때마다 호출합니다.

onScrollStateChanged는 사용자가 스크롤을 시작하거나 멈출 때 이 메소드가 트리거됩니다.

 

스크롤이 최상단이 있으면 버튼을 숨기고

최상단이 아니고, 버튼이 가려져 있으면 버튼을 활성화 합니다.

 

showScollTopButton()

    private fun showScrollTopButton() {
        with(binding.btnScrollTop) {
            visibility = View.VISIBLE
            alpha = 0f
            animate().alpha(1f)
        }
    }

버튼을 천천히 보이게 하는 코드입니다.

animate는 생략해도 됩니다.

 

hideScollTopButton()

private fun hideScrollTopButton() {
    binding.btnScrollTop.animate()
        .alpha(0f)
        .withEndAction { binding.btnScrollTop.visibility = View.GONE }
}

반대로 애니메이션 효과를 주며 버튼을 안보이게 합니다.

withEndAction은 애니메이션이 끝나고 동작합니다.

 

SmoothScrollToPostion()

private fun setListeners() {
    binding.btnScrollTop.setOnClickListener {
        binding.recyclerView.smoothScrollToPosition(0)
    }
}

버튼 클릭 리스너에 smoothScrollToPosition(0)을 호출합니다.

버튼을 클릭하면 부드럽게 position이 0인 최상단까지 이동합니다.

 

smooth가 아닌 scrollToPosition을 써도 되지만 보기에 좋지 못할 수 있습니다.

 

자세한 코드와 영상은 깃허브를 참고해주시면 감사하겠습니다. 

https://github.com/stopstone/ScrollMoveTop