Android TabLayout使用(一) 页面展示 通俗易懂

Android TabLayout使用

假设场景：有三个页面新闻，主页，个人中心

1.新建三个Fragment

因为分别创建三个碎片java代码比较繁琐，所以在此我们选择创建一个TabLayoutFragments 接口里面存放三个Fragment，这样把Fragment进行了分类存放，以便之后出现其他的Fragments不会乱。

这边先用view去接收一下视图然后返回，因为之后如果涉及到控件可以借助这个view变量去声明

public interface TabLayoutFragments {

    class NewsFragment extends Fragment {

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_tab1, container, false);
            return view;
        }
    }

    class IndexFragment extends Fragment {


        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
           
            View view = inflater.inflate(R.layout.fragment_tab2, container, false);
            return view;
        }

    }
    class CenterFragment extends Fragment {

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

            View view = inflater.inflate(R.layout.fragment_tab3, container, false);
            return view;
        }
    }
}

2.新建三个简单布局

分别在layout目录下新建R.layout.fragment_tab1，R.layout.fragment_tab2，R.layout.fragment_tab3布局。布局这里就不做展示。

3.布局主页面

tablayout的切换是依托于viewpager进行展示，所以这边还需要用到viewpager2组件去展示fragment

如果想展示不止三个可以下拉tablayout增加tabitem的数量，上面显示的文字我们在java代码里进行声明

4.新建viewpager适配器

新建一个ViewPager2Adapter 文件让他继承自FragmentStateAdapter
重写createFragment接受position参数 pos从0开始
做switch判断：0表示在第一个页面加载NewsFragment碎片，以此类推
以及重写getItemCount()方法
你有几个tab你就写几

public class ViewPager2Adapter extends FragmentStateAdapter {
    public ViewPager2Adapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            case 0:
                return new TabLayoutFragments.NewsFragment();
            case 1:
                return new TabLayoutFragments.IndexFragment();
            case 2:
                return new TabLayoutFragments.CenterFragment();
            default:
                return null;
        }
    }

    @Override
    public int getItemCount() {
        return 3;
    }
}

5.MainActivity.java

public class MainActivity extends AppCompatActivity {
	//声明三个标题
    String[] title = new String[]{"新闻","主页","个人中心"};
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 获取 TabLayout 和 ViewPager2 实例
        TabLayout tabLayout = findViewById(R.id.tab1);
        ViewPager2 viewPager2 = findViewById(R.id.vp1);


        // 创建适配器用于管理 ViewPager2 中的页面
        ViewPager2Adapter adapter = new ViewPager2Adapter(this);
        viewPager2.setAdapter(adapter);

        // 将 TabLayout 和 ViewPager2 绑定在一起
        // 第三个参数是用匿名函数的写法 获取到tab和pos参数 设置每个tab的文字
        new TabLayoutMediator(tabLayout, viewPager2,
                (tab, position) -> tab.setText(title[position])
        ).attach();

    }
}

页面展示