[Android] ViewPager2 With Tab + Bar


こんにちは!私はハンバーガー王です.
今日のテーマはViewPager 2のTabBar Interactionを使うことで、Androidでよく使われるComponentです.
次の写真はAndroid Creamアプリのホームページで見た画面です.

以上のようにBarの位置をViewPagerの下部にあるViewPagerの位置に移動しています.
サンプルコードで簡単に紹介しましょう.
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
                }
            })
		 }
キーは次のとおりです.
  • ページの数に応じて、バー幅
  • を動的に変更します.
  • onPageScroldにより、位置とOffsetでBarの位置をリアルタイムで変更する
  • 次のPostingでは、無限のViewPagerにスクロールし、最後のPositionから最初のPositionのBarに自然に移動することを理解します.
    フルソースはGit Linkを参照してください.
    🙇‍♂️ありがとうございます.