安卓 TabLayout 选项卡

最新推荐文章于 2025-03-18 21:17:08 发布

zxsenqiu

最新推荐文章于 2025-03-18 21:17:08 发布

阅读量264

点赞数

分类专栏： Android 文章标签： android

本文链接：https://blog.youkuaiyun.com/zxsenqiu/article/details/104533738

版权

Android 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了TabLayout在安卓开发中的应用，详细阐述了如何结合Fragment和ViewPager实现选项卡切换的功能，帮助开发者更好地理解和使用TabLayout。

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

TabLayout简介

Tablayout继承自HorizontalScrollView用于页面切换指示器
TabLayout 是属于 com.android.support:design 包的控件，所以需要依赖该包

implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.0.2@aar'

Fragment+ViewPager+TabLayout组合使用

activity的xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".mvp.view.activity.MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="8">

    </androidx.viewpager.widget.ViewPager>

    <com.flyco.tablayout.CommonTabLayout
        app:tl_textSelectColor="#F10A0A"
        app:tl_textUnselectColor="#0E0E0E"
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </com.flyco.tablayout.CommonTabLayout>

</LinearLayout>

activity的java文件

public class MainActivity extends AppCompatActivity {
    private ViewPager vp;
    private CommonTabLayout tab;
    private List<Fragment> flist = new ArrayList<>();
    private List<CustomTabEntity> tlist = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //主页面切换
        vp = (ViewPager) findViewById(R.id.vp);
        tab = (CommonTabLayout) findViewById(R.id.tab);
        //添加数据
        tlist.add(new TabBean("首页",R.drawable.homeyes,R.drawable.homeno));
        tlist.add(new TabBean("分类",R.drawable.soyes,R.drawable.sono));
        tlist.add(new TabBean("购物车",R.drawable.shoppyes,R.drawable.shoppno));
        tlist.add(new TabBean("我的",R.drawable.meyes,R.drawable.meno));
        tab.setTabData((ArrayList<CustomTabEntity>) tlist);
        //添加数据
        flist.add(new Fragment1());
        flist.add(new Fragment2());
        flist.add(new Fragment2());
        flist.add(new Fragment2());
        //内部适配器
        vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return flist.get(position);
            }

            @Override
            public int getCount() {
                return flist.size();
            }
        });
        //tab标题关联viewpager
        tab.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelect(int position) {
                vp.setCurrentItem(position);
            }

            @Override
            public void onTabReselect(int position) {

            }
        });
        //viewpager关联tab标题
        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                tab.setCurrentTab(position);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
}

创建一个tab的bean类

public class TabBean implements CustomTabEntity {

    private String string;
    private int yes;
    private int no;

    public TabBean(String string, int yes, int no) {
        this.string = string;
        this.yes = yes;
        this.no = no;
    }

    @Override
    public String getTabTitle() {
        return string;
    }

    @Override
    public int getTabSelectedIcon() {
        return yes;
    }

    @Override
    public int getTabUnselectedIcon() {
        return no;
    }
}