Android ViewPager + Fragment 实现导航栏（可以左右滑动）

ViewPager + Fragment 实现滑动导航栏。

先上图

image.png

image.png

一、布局文件

使用HorizontalScrollView可以让超出屏幕的导航栏可以滑动，每个RadioButton代表一个导航标题，android:button="@null"去掉RadioButton的选中圆圈

选中的下划线xml文件

二、MainActivity

将RadioButton导航栏的标题装在一个list集合里面，新增标题的时候可以直接在list里添加RadioButton的id，简约了ViewPage滑动定位到相应的RadioButton和相应的Fragment，不用when每个id去判断。

var list = arrayListOf(R.id.rb_one,R.id.rb_two,R.id.rb_three,R.id.rb_four)

增加标题时也要add对应的Fragment

fragments.add(FragmentOne()) 
fragments.add(FragmentTwo())
fragments.add(FragmentThree())
fragments.add(FragmentFour())
viewPager.offscreenPageLimit = 4 //缓存4个fragment
        fragmentManager = supportFragmentManager
        viewPager.adapter = MyFragmentAdapter(fragmentManager,fragments)

        radioGroup.setOnCheckedChangeListener(this)
        viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
            override fun onPageScrollStateChanged(state: Int) {
            }

            override fun onPageScrolled(
                position: Int,
                positionOffset: Float,
                positionOffsetPixels: Int
            ) {
            }

            override fun onPageSelected(position: Int) {
                radioGroup.check(list[position])
            }

        })
    }

    override fun onCheckedChanged(group: RadioGroup?, checkedId: Int) {
        for (i in list.indices){
            if (list[i] == checkedId){
                viewPager.setCurrentItem(i)
            }
            scrollToFocus()
        }
    }

    /**
     * 定位RadioButton，超过屏幕跟踪滑动
     */
    private fun scrollToFocus() {
        //获取屏幕宽度
        val screenWith = this.resources.displayMetrics.widthPixels
        //每个RadioButton的X坐标
        val item = findViewById(radioGroup.checkedRadioButtonId)
        var x = item.x.toInt()
        if (x + item.width < screenWith){
            x = 0
        }
        horizontalScrollView.smoothScrollTo(x,0)
    }

三、自定义MyFragmentAdapter

继承FragmentStatePagerAdapter 。当ViewPager中的Fragment数量相对较多时继承FragmentStatePagerAdapter，少时可以继承FragmentPagerAdapter

class MyFragmentAdapter : FragmentStatePagerAdapter {
   private lateinit var fragments: ArrayList

   constructor(fragmentManager: FragmentManager, fragments: ArrayList) : super(fragmentManager){
       this.fragments = fragments
   }

   override fun getItem(position: Int): Fragment {
       return fragments.get(position)
   }

   override fun getCount(): Int {
       return fragments.size
   }

}