[Android] ViewPager2 With Tab + Bar
4098 ワード
こんにちは!私はハンバーガー王です.
今日のテーマはViewPager 2のTabBar Interactionを使うことで、Androidでよく使われるComponentです.
次の写真はAndroid Creamアプリのホームページで見た画面です.
以上のようにBarの位置をViewPagerの下部にあるViewPagerの位置に移動しています.
サンプルコードで簡単に紹介しましょう.ページの数に応じて、バー幅 を動的に変更します. onPageScroldにより、位置とOffsetでBarの位置をリアルタイムで変更する 次のPostingでは、無限のViewPagerにスクロールし、最後のPositionから最初のPositionのBarに自然に移動することを理解します.
フルソースはGit Linkを参照してください.
🙇♂️ありがとうございます.
今日のテーマは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
}
})
}
キーは次のとおりです.フルソースはGit Linkを参照してください.
🙇♂️ありがとうございます.
Reference
この問題について([Android] ViewPager2 With Tab + Bar), 我々は、より多くの情報をここで見つけました https://velog.io/@sahonmu/Android-ViewPager2-With-Tab-Barテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol