TabLayout-ViewPager-Fragment笔记

参考https://juejin.im/post/5864eb13570c3500695dcd1a

TabLayout-ViewPager-Fragment用法

1. 布局

   <com.google.android.material.tabs.TabLayout
       android:id="@+id/tabLayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabMode="scrollable" />
   <androidx.viewpager.widget.ViewPager
       android:id="@+id/viewPager"
       android:layout_width="match_parent"
       android:layout_height="200dp">
   </androidx.viewpager.widget.ViewPager>
   

2. 给ViewPager提供FragmentPagerAdapter即可

   viewPager.adapter = MyFragmentPagerAdapter(supportFragmentManager)
   

3. 实现类：FragmentPagerAdapter；这里直接在Activity里创建内部类：

   inner class MyFragmentPagerAdapter(fm: FragmentManager) :
       FragmentPagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
       override fun getItem(position: Int): Fragment {
           return fragments[position]
       }
       override fun getCount(): Int {
           return fragments.size
       }
       //可选，tabLayout默认会调用
       override fun getPageTitle(position: Int): CharSequence? {
           return "fragment$position"
       }
   }
   

4. TabLayout关联viewPager

   //关联viewPager；如果TabLayout写在ViewPager布局里，则可以省略这句
   tabLayout.setupWithViewPager(viewPager)
   //设置指示器颜色,默认颜色为colorAccent
   tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorPrimary))
   

5. TabLayout其他功能

   app:tabBackground 设置TabLayout的背景

   app:tabGravity=“center|fill” 设置tabLayout里tabs的对齐方式，fill-均分布局，center-向中间靠拢

   app:tabIndicatorColor 设置指示器的颜色（默认情况下指示器的颜色为colorAccent）

   app:tabIndicatorHeight 设置指示器的高度，Material Design 规范建议是2dp

   app:tabMode=“fixed|scrollable” 设置Tabs的显示模式，scrollable-可滚动的tabs

   app:tabPadding 设置tab padding

   app:tabSelectedTextColor 设置Tab选中后，文字显示的颜色

   app:tabTextColor 设置Tab未选中，文字显示的颜色

   //可以修改tab图标和文字等
   var tab: TabLayout.Tab? = tabLayout.getTabAt(position)
   tab?.text = "xxx"
   tab?.setIcon(R.drawable.xxx)
   

6. tab也可直接写在xml中，TabLayout嵌套TabItem

   <com.google.android.material.tabs.TabLayout
       android:id="@+id/tabLayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabGravity="fill"
       app:tabMode="scrollable" >
       <com.google.android.material.tabs.TabItem
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="个性推荐"
           android:icon="@drawable/xxx" />
   </com.google.android.material.tabs.TabLayout>
   

关于PagerAdapter

四个必须实现的方法

inner class MyPagerAdapter : PagerAdapter() {
    //这个object与destroyItem方法的object、instantiateItem的返回值相同
    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view == `object`
    }
    //返回要切换的页面个数
    override fun getCount(): Int {
        return viewList.size
    }
    //释放资源
    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.remove(viewList[position])
    }
    //container就是ViewPager
    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        container.addView(viewList[position])
        return viewList[position]
    }
}

ViewPager方法

//设置缓存个数
viewPager.offscreenPageLimit = 4
//跳到指定页面
viewPager.currentItem = 3
//监听
viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
    override fun onPageScrollStateChanged(state: Int) {
    }
    override fun onPageScrolled(position: Int,
         positionOffset: Float, positionOffsetPixels: Int) {
    }
    override fun onPageSelected(position: Int) {
    }
})