常规使用

效果预览

注：tab2 和tab4 需要自定义。

Gradle

app/build.gradle 中添加下面依赖:

1	compile 'com.android.support:design:25.3.1'

xml

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="center">
    
    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:icon="@drawable/custom_tab_icon"
        android:layout_height="wrap_content"
        android:text="Tab1" />
</android.support.design.widget.TabLayout>

TabLayout 属性
tabBackground：标签页的背景；
tabMode：fixed, 固定标签，tab均分，适合少的tab；scrollable，可滚动标签，适合很多tab，默认fixed；
tabTextColor：标签字体颜色；
tabSelectedTextColor：标签选中字体颜色；
tabIndicatorColor：底部滑动的线条的颜色，默认是colorAccent；
tabIndicatorHeight：底部滑动线条的高度。
TabItem 属性
text：标签文字；
icon：图标；
layout：自定义布局。

由上可知在 xml 可以增加 tab，当然也是可以代码中添加：

1	tabLayout.addTab(tabLayout.newTab().setText("Tab3"));

TabItem 可以设置 layout 来自定义布局，后文讲。

OnTabSelectedListener

tab 点击回调监听：

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
    }
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
    }
    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});

与 ViewPager 联动

效果预览

xml布局

<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="wrap_content"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/colorPrimary"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/cursorTextColor" />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

ViewPager的适配器

class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();
        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }
        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }
        @Override
        public int getCount() {
            return mFragmentList.size();
        }
        public void addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }
        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
    
  private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getActivity().getSupportFragmentManager());
        Fragment newfragment = new TodayEmotionFragment();
        Bundle data = new Bundle();
        data.putInt("id", 0);
        newfragment.setArguments(data);
        adapter.addFrag(newfragment,"Tab1");
        newfragment = new TodayEmotionFragment();
        data = new Bundle();
        data.putInt("id", 1);
        newfragment.setArguments(data);
        adapter.addFrag(newfragment, "Tab2");
        newfragment = new TodayEmotionFragment();
        data = new Bundle();
        data.putInt("id", 1);
        newfragment.setArguments(data);
        adapter.addFrag(newfragment,"Tab3");
        viewPager.setAdapter(adapter);
        viewPager.setOffscreenPageLimit(3);
}

设置联动

@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
    ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewPager);
    setupViewPager(viewPager);
    // 设置ViewPager的数据等
    tabLayout.setupWithViewPager(viewPager);
}

定义 TabLayout 样式

上面的效果图，tab2 和 tab4 是需要自定义的，自定义可以直接写在 TabItem 的 xml 的 layout 属性：

<android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout="@layout/custom_tab1" />

也可以写在代码里：

View view = View.inflate(this, R.layout.custom_tab1, null);
TextView tabText = (TextView) view.findViewById(R.id.tabText);
tabText.setText("Tab4");
TextView tabPoint = (TextView) view.findViewById(R.id.tabPoint);
tabPoint.setText("9");
tabLayout.addTab(tabLayout.newTab().setCustomView(view));

问题

如上，我看了 TabLayout 的源码，发现自定义 View 这里的 text 和 icon的 id 是写死了，意思我自定义的这两个 id 要相应写死，我的 custom_tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="72dp"
    android:layout_height="72dp"
    android:minWidth="56dp">
    <ImageView
        android:id="@+id/tabIcon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dp"
        android:background="@drawable/custom_tab_icon"
        android:scaleType="centerInside" />
    <TextView
        android:id="@+id/tabText"
        style="@style/TextAppearance.Design.Tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tabIcon"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dp"
        android:ellipsize="end"
        android:maxLines="2"
        android:textColor="@color/custom_tab_text" />
    <TextView
        android:id="@+id/tabPoint"
        android:layout_width="20dp"
        android:gravity="center"
        android:layout_marginTop="5dp"
        android:layout_height="20dp"
        android:background="@drawable/tab_point_bg"
        android:layout_alignParentRight="true"
        android:textColor="@color/tab_point_text" />
</RelativeLayout>