[Android] ViewPager2 With Tab + Bar

안녕하세요. 버거왕입니다.
오늘은 안드로이드에서 많이 사용 되는 Componet중 ViewPager2를 활용한 TabBar Interaction에 대한 포스팅입니다.

아래 사진은 안드로이드 크림앱 메인에 보이는 화면입니다.

위와 같이 ViewPager 하단에 ViewPager Position 위치에 맞게 Bar의 위치를 이동 시키고 있습니다.
샘플 코드로 간략하게 알아 보겠습니다.

binding.viewPager.apply {
	this.adapter = pageAdapter
    val itemCount = pageAdapter.itemCount // page 갯수
    val barWidth = screenWidth() / itemCount // page 갯수에 따라 bar 의 width 값 설정
    val params = RelativeLayout.LayoutParams(barWidth, 30)
    binding.bar.apply {
    	binding.bar.layoutParams = params
    }

	this.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    	override fun onPageScrolled(
                    position: Int,
                    positionOffset: Float,
                    positionOffsetPixels: Int
                ) {
                    super.onPageScrolled(position, positionOffset, positionOffsetPixels)
                    val translatePosition = barWidth * position // bar 의 시작 포지션 위치
                    val translateOffset = barWidth * positionOffset // page 의 offset 만큼 이동
                    binding.bar.translationX = translatePosition + translateOffset
                }
            })
		 }

중요 포인트는

• page의 갯수에 따라 bar의 width를 유동적으로 변경
• onPageScrolled를 통해 Postion의 위치와 Offset를 활용해 Bar의 위치 실시간 변경

다음 포스팅에서는 무한으로 스크롤 되는 ViewPager와 또 그에 따른 마지막 Position에서 첫번째 Position으로 자연스럽게 이동하는 Bar를 알아 보도록 하겠습니다.

풀 소스는 Git Link 에서 참고하세요

🙇‍♂️감사합니다.