android使用Tablayout+viewpager2

  • Post author:
  • Post category:其他




关于

公司半新项目开发,最近也在学习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]
    }       

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



版权声明:本文为Tobey_r1原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。