使用TabLayout

最新推荐文章于 2022-01-18 13:39:31 发布

原创最新推荐文章于 2022-01-18 13:39:31 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#TabLayout #viewpager #导航Tab

Android 专栏收录该内容

75 篇文章

订阅专栏

本文介绍如何利用Android DesignSupportLibrary中的TabLayout和ViewPager组件实现应用内的Tab导航效果，并提供了一个具体的示例代码。

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

Design Support Library是在Google I/O2015上发布的一个全新兼容函数库，主要包括：

TabLayout和ViewPager可实现导航Tab的效果，如图:
这里写图片描述
可滑动Tab:对应配置XML文件属性app:tabMode="scrollable"

固定Tab:对应配置XML文件属性app:tabMode="fixed"

首先在build.gradle文件中依赖

    compile 'com.android.support:design:26.0.0-alpha1'

布局文件中使用TabLayout

<?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">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="fixed" />

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

在代码中将TabLayout和ViewPager配置:

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

    MyPagerAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        adapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);//TabLayout和ViewPager关联
    }


    private class MyPagerAdapter extends FragmentPagerAdapter{

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

        @Override
        public Fragment getItem(int position) {
            return new MyFragment();
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
            return "Tab" + position;
        }
    }
}

MyFragment是继承自Fragment,onCreateView()方法中返回一个TextView,这里就不贴MyFragment的代码了，在FragmentPagerAdapter中重写getPageTitle方法，返回导航Tab的文字，最后将TabLayout和ViewPager关联

tabLayout.setupWithViewPager(viewPager);//TabLayout和ViewPager关联