android使用Tablayout+viewpager2

Posted 2021-10-02 Tobey_r1

android使用Tablayout+viewpager2

• 关于
• 效果（垂直滑动切换）
• • 添加引用与布局文件
  • 修改布局对应的实例代码

关于

  公司半新项目开发，最近也在学习kotlin语言，所以项目是java和kotlin混合开发，所以在build文件上使用了apply plugin: 'kotlin-android-extensions'（这个插件类似ButterKnife，但是extensions会将实例控件id写入HashMap中，以至于每个activity都会维护一个HashMap增加了内存消耗，虽然使用很省事，使用确实是省事我就没把他弃用。。。因为项目开发周期比较短，很多地方有待后期优化）之前看android的开发文档上有推荐使用viewpager2替换viewpager（viewpager2是基于androidx的项目如果你还是android support的话暂时用不了）并且以后也会继续维护跟进。

效果（垂直滑动切换）

  gif有点卡是因为压缩的原因导致的，实际效果不卡顿

添加引用与布局文件

  首先添加对viewpager2的引用及Tablayout的引用，这里不用android版本自带的tablayout，因为还涉及到一个TabLayoutMediator的使用（viewpager2与tablayout的中介作用，监听viewpager2移动时的OnPageChangeCallback方法以调整选项卡，监听tablayout的OnTabSelectedListener来移动viewpager2）

implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation 'com.google.android.material:material:1.1.0-beta01'

  新增一个布局文件（例如预订页面）fragment_booking.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:binding="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/tools"
    android:orientation="vertical"
    app:ignore="NamespaceTypo">
    
<com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/text_20"
        android:layout_below="@+id/rl_rq"
        binding:tabGravity="fill"
        binding:tabTextColor="@color/black_text"
        binding:tabMode="fixed"
        android:id="@+id/tabLayout"
        binding:tabIndicatorColor="@color/colorAccent"
        binding:tabSelectedTextColor="@color/colorAccent"
        />
<!--这里通过设置orientation的方向为垂直实现上下滑动切换选项卡效果，默认水平，这是viewpager不具备的-->
    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewpager2"
        android:orientation="vertical" 
        android:layout_below="@id/tabLayout"/>
        
</RelativeLayout>        

修改布局对应的实例代码

 private lateinit var fragmentList: MutableList<Fragment>
 private val list = arrayListOf<String>("食品","物品","游玩","住宿")
 
 override fun initView() {
        initTabLayout()
    }
 private fun initTabLayout() {
        fragmentList = ArrayList()
        fragmentList.add(FoodFragment()) //自定义的fragment，就不贴出来了
        fragmentList.add(FoodFragment())
        fragmentList.add(FoodFragment())
        fragmentList.add(FoodFragment())
        viewpager2.offscreenPageLimit = 4
      //  viewpager2.offscreenPageLimit = OFFSCREEN_PAGE_LIMIT_DEFAULT //禁用预加载
        val pagerAdapter = ScreenPagerAdapter(this)
        viewpager2.adapter = pagerAdapter
      TabLayoutMediator(tabLayout,viewpager2){tab, position ->
           tab.text = list[position]
       }.attach()
    } 
    //因为我的父容器是fragment，这里的参数也可以修改成 FragmentActivity
 private inner class ScreenPagerAdapter(fa:Fragment) : FragmentStateAdapter(fa){
        override fun getItemCount(): Int = fragmentList.size

        override fun createFragment(position: Int): Fragment =fragmentList[position]
    }       

  有问题批评指正，喜欢的也请点个赞哦