Android：Material Design之TabLayout使用

最新推荐文章于 2025-05-07 10:34:10 发布

原创最新推荐文章于 2025-05-07 10:34:10 发布 · 308 阅读

1 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

68 篇文章

订阅专栏

本文介绍了如何在Android中使用TabLayout（来自android.support.design.widget包）和ViewPager来创建点击切换页面的功能。TabLayout继承自HorizontalScrollView，配置包括设置下划线颜色、选中文字颜色和默认文字颜色。同时，通过MyFragment类展示了如何显示子页面，每个子页面由不同的Fragment实例化。

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

说明：

TabLayout属于android.support.design.widget包下的控件，内部继承HorizontalScrollView，一般与ViewPager配合使用，实现点击TAB标签切换页面的功能。

使用：

1.TabLayoutActivity类，用于管理Fragment与TabLayout的一些初始化与绑定：

public class TabLayoutActivity extends FragmentActivity {
    private final String[] mTabTexts = new String[]{"未开始", "进行中", "结束", "未关注", "已关注", "胜率排行榜", "人气排行榜"};
    private ArrayList<Fragment> mFragments = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tablayout);
        initFragment();
        initView();
    }

    private void initFragment() {
        int len = mTabTexts.length;
        for (int i = 0; i < len; i++) {
            mFragments.add(MyFragment.newInstance(mTabTexts[i]));  //添加各子Fragment
        }
    }

    private void initView() {
        //初始化TabLayout
        TabLayout tl = (TabLayout) findViewById(R.id.tab_tl);
        tl.setTabMode(TabLayout.MODE_SCROLLABLE);  //设置Tab标签满屏时，点击自动向左或右滚动
        int len = mTabTexts.length;
        for (int i = 0; i < len; i++) {
            tl.addTab(tl.newTab().setText(mTabTexts[i]));  //添加Tab标签
        }
        //初始化ViewPager
        ViewPager vp = (ViewPager) findViewById(R.id.tab_vp);
        FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return mFragments.size();
            }

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

            @Override
            public CharSequence getPageTitle(int position) { //必须重写此方法,否则tab文字为空
                return mTabTexts[position];
            }

        };
        vp.setAdapter(adapter);
        //将TabLayout与ViewPager绑定
        tl.setupWithViewPager(vp);
    }

}

2.TabLayoutActivity的布局文件

app:tabIndicatorColor="#ffffff"表示下划线颜色，
app:tabSelectedTextColor="#ffffff"表示Tab文字选中颜色
app:tabTextColor="#b1d8b5"表示Tab文字默认颜色

tablayout.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"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_tl"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#2fa941"
        app:tabIndicatorColor="#ffffff"
        app:tabSelectedTextColor="#ffffff"
        app:tabTextColor="#b1d8b5"/>

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

</LinearLayout>

3.MyFragment类，用于显示子页面，实际使用不同页面使用不同的Fragment：

public class MyFragment extends Fragment {
    private String mText;

    public static MyFragment newInstance(String text) {
        MyFragment myFragment = new MyFragment();
        myFragment.mText = text;
        return myFragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.myfragment, container, false);
        TextView tv = (TextView) v.findViewById(R.id.myfragment_tv);
        tv.setText(mText);
        return v;
    }
}

4.MyFragment类的布局文件，myfragment.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <TextView
        android:id="@+id/myfragment_tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="界面1"
        android:textSize="30dp"/>

</RelativeLayout>