Material Design Library系列之TabLayout

最新推荐文章于 2025-01-20 16:19:23 发布

原创最新推荐文章于 2025-01-20 16:19:23 发布 · 387 阅读

CC 4.0 BY-SA版权

本文介绍了如何使用TabLayout创建滑动导航栏，通常搭配ViewPager使用，如网易新闻客户端。详细步骤包括添加依赖、XML布局配置、设置TabLayout属性、创建适配器以及在MainActivity中绑定数据和设置监听器。提供了具体的Java代码示例和源码下载链接。

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

前言：TabLayout用来实现Tab导航栏，通常可以配合ViewPager实现滑动导航，例如网易新闻客户端采用的就是这种方式......

接下来实现的效果是这样的：

1.新建工程并添加依赖：

compile 'com.android.support:design:23.4.0'

2.修改activity_main.xml如下所示：

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

    <android.support.design.widget.TabLayout
        android:id="@+id/id_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/titleBlue"
        app:tabIndicatorColor="@color/red"
        app:tabSelectedTextColor="@color/chocolate"
        app:tabTextColor="@color/white"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

</LinearLayout>

这里垂直排列添加了一个TabLayout和ViewPager。

其中TabLayout下有三个颜色属性：

tabIndicatorColor表示下面的滑动条颜色

tabSelectedTextColor表示选中的tab文本颜色

tabTextColor表示未选中的tab文本颜色

2.ViewPager下的显示采用了4个简单的fragment，具体布局及代码如下：(fragment2,3,4依次更改)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF0000">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is fragment 1!"
        android:layout_centerInParent="true"/>

</RelativeLayout>

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by Administrator on 2016/6/12.
 */
public class Fragment1 extends Fragment {

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

布局下只有一个TextView，为了更好地区分某个Fragment，特意将背景改成了不同的颜色。

java代码下该类直接继承Fragment，onCreateView()方法直接将布局显示。

3.最关键的部分还是在MainActivity.java中：

①首先分析下每个tab，tab下具有Title和Fragment两种属性，为这两种属性数据建立一个适配器：

class TabAdapter extends FragmentPagerAdapter {

        private List<Fragment> listFragment;
        private List<String> listTitle;

        public TabAdapter(FragmentManager fm, List<Fragment> listFragment, List<String> listTitle) {
            super(fm);
            this.listFragment = listFragment;
            this.listTitle = listTitle;
        }

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

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

        //此方法用来显示tab上的名字
        @Override
        public CharSequence getPageTitle(int position) {
            return listTitle.get(position % listTitle.size());
        }
    }

getItem()方法根据position获取相应的Fragment。

getCount()方法用来获取tab数量。

getPageTitle()方法用来获取tab的名字，即Title。

②MainActivity.java的onCreate()方法代码如下：

    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    private List<Fragment> mListFragment;
    private List<String> mListTitle;

    private TabAdapter mTabAdapter;

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

        mTabLayout = (TabLayout) findViewById(R.id.id_tab);
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

        //添加fragment
        mListFragment = new ArrayList<Fragment>();
        mListFragment.add(new Fragment1());
        mListFragment.add(new Fragment2());
        mListFragment.add(new Fragment3());
        mListFragment.add(new Fragment4());

        //添加标题
        mListTitle = new ArrayList<String>();
        mListTitle.add("标题1");
        mListTitle.add("标题2");
        mListTitle.add("标题3");
        mListTitle.add("标题4");

        //设置TabLayout的模式
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        //给TabLayout添加tab名称
        mTabLayout.addTab(mTabLayout.newTab().setText(mListTitle.get(0)));
        mTabLayout.addTab(mTabLayout.newTab().setText(mListTitle.get(1)));
        mTabLayout.addTab(mTabLayout.newTab().setText(mListTitle.get(2)));
        mTabLayout.addTab(mTabLayout.newTab().setText(mListTitle.get(3)));

        mTabAdapter = new TabAdapter(getSupportFragmentManager(), mListFragment, mListTitle);

        //viewpager加载adapter
        mViewPager.setAdapter(mTabAdapter);
        //TabLayout加载viewpager
        mTabLayout.setupWithViewPager(mViewPager);
    }

这里先将具体的Title和Fragment往各自List中填充。

setTabMode()方法有两种模式选择：MODE_FIXED(固定不可滚动)和MODE_SCROLLABLE(可滚动)。

addTab()用来添加tab名称。

通过适配器将ListFragment和ListTitle的数据适配到ViewPager中。

setupWithViewPager()将数据装载。

补充说明：

TabLayout的一些方法：

addTab() => 添加选项卡到layout中

newTab() => 新建个tab

setTabMode() => 设置Mode

getTabMode() => 获取tab的模式

getTabAt() => 获取选项卡