안녕하세요. 버거왕입니다.
오늘은 안드로이드에서 많이 사용 되는 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
}
})
}
중요 포인트는
다음 포스팅에서는 무한으로 스크롤 되는 ViewPager와 또 그에 따른 마지막 Position에서 첫번째 Position으로 자연스럽게 이동하는 Bar를 알아 보도록 하겠습니다.
풀 소스는 Git Link 에서 참고하세요
🙇♂️감사합니다.