闲来无事记录一下TabLayout+ViewPager或ViewPager2的用法

最新推荐文章于 2025-09-11 13:22:37 发布

原创最新推荐文章于 2025-09-11 13:22:37 发布 · 772 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #kotlin #android studio

学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了在Android开发中如何结合TabLayout和ViewPager实现页面切换和标签显示。首先，初始化了所需的控件，包括TabLayout、ViewPager和ViewPager2，并创建了两个列表存储标题和Fragment。接着，设置了ViewPager的offscreenPageLimit和适配器，通过FragmentPagerAdapter将数据绑定到TabLayout。对于ViewPager2，同样设置了适配器，使用FragmentStateAdapter，并通过TabLayoutMediator实现TabLayout与ViewPager2的联动。最后，给出了自定义Fragment的简单实现。

一、初始化所需控件

	// 3个控件
  	private lateinit var mTabLayout: TabLayout
    private lateinit var mViewPager: ViewPager
    private lateinit var mViewPager2: ViewPager2
	
	// 两个List
    private val mTitle: MutableList<String> = ArrayList()
    private val mFragment: MutableList<Fragment> = ArrayList()
    
    ...
    	// 绑定并初始化数据
        mTabLayout = findViewById(R.id.layouts)
        mViewPager = findViewById(R.id.viewpager1)
        mViewPager2 = findViewById(R.id.viewpager2)
         for (i in 0..7) {
            mTitle.add("1==$i")
            mFragment.add(MyFragment())
        }

二、TabLayout+ViewPager

        mViewPager.offscreenPageLimit = mFragment.size
        mViewPager.adapter = object : FragmentPagerAdapter(supportFragmentManager) {
            override fun getItem(position: Int): Fragment {
                return mFragment[position]
            }

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

            override fun getPageTitle(position: Int): CharSequence {
                return mTitle[position]
            }
        }
        mTabLayout.setupWithViewPager(mViewPager)

三、TabLayout+ViewPager2

// viewpager2
        mViewPager2.offscreenPageLimit = mFragment.size
        mViewPager2.adapter = object :
            FragmentStateAdapter(supportFragmentManager, this.lifecycle) {
            override fun createFragment(position: Int): Fragment {
                return mFragment[position]
            }

            override fun getItemCount(): Int {
                return mFragment.size
            }
        }

        TabLayoutMediator(
            mTabLayout,
            mViewPager2
        ) { tab: TabLayout.Tab, position: Int ->
            tab.text = mTitle[position]
        }.attach()

MyFragment

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class MyFragment extends Fragment {
   @Nullable
   @Override
   public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
       return inflater.inflate(R.layout.layout1,null);
   }
}