Fragment + TabLayout (页签指示器)

最新推荐文章于 2024-04-12 06:08:47 发布

jsjbduus12

最新推荐文章于 2024-04-12 06:08:47 发布

阅读量485

点赞数 1

CC 4.0 BY-SA版权

分类专栏： android基础文章标签： viewpager android tablayout fragment

本文链接：https://blog.youkuaiyun.com/jsjbduus12/article/details/53496132

android基础专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Android应用中实现ViewPager嵌套Fragment，并在顶部添加TabLayout作为页面指示器。通过示例代码展示了如何配置TabLayout与ViewPager的联动，以及如何自定义适配器来加载多个Fragment。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章主要是viewpager里面嵌套fragment ,同时在头部添加页签指示器..废话不多说,直接上代码~

先看一下效果图:
这里写图片描述

1.首先,创建布局.一个LinearLayout 包裹一个 TabLayout 和一个viewpager

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/activity_main"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.tablayout.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

</LinearLayout>

2.利用butterknife找到tablayout和viewpager( ps:butterknife和findViewById一个道理,没用过butterknife,可以使用findViewById)

    @Bind(R.id.tablayout)
    TabLayout mTabLayout;
    @Bind(R.id.viewpager)
    ViewPager mViewPager;

   ButterKnife.bind(this);

//使tabLayout 与  viewpager 关联起来
            mTabLayout.setupWithViewPager(mViewPager);

            //设置viewpager 适配器 **这里我们使用的适配器继承的是 FragmentPagerAdapter
            ViewpagerAdapter adapter = new ViewpagerAdapter(getSupportFragmentManager());
            mViewPager.setAdapter(adapter);

           //定义fragment集合
            List<Fragment> fragmentList = new ArrayList<>();
            fragmentList.add(new BlankFragment());
            fragmentList.add(new BlankFragment());
            fragmentList.add(new BlankFragment());
            //往适配器添加参数
            adapter.addFragment(fragmentList);

下面需要注意的是我们使用的适配器继承FragmentPagerAdapter,搭配fragment很好用. 在适配器中重写getPageTitle(),为tabLayout添加标签

class ViewpagerAdapter extends FragmentPagerAdapter{
        //穿建集合,用来盛装fragment
        List<Fragment> mList = new ArrayList<>();

        //自定义方法,用来添加fragment
        public void addFragment( List<Fragment> list){
            this.mList.addAll(list);
            //不要忘记更新适配器哦~
            notifyDataSetChanged();
        }

        public ViewpagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return mList.get(position);
        }

        @Override
        public int getCount() {
            return mList.size();
        }

        String[] tabs = {
                "标签1","标签2","标签3"
        };
        //重写此方法,给tabLayout添加标签
        @Override
        public CharSequence getPageTitle(int position) {
            return tabs[position];
        }
    }