tablayout+viewpager联动，实现顶部导航效果。

添加依赖 compile 'com.android.support:design:22.2.1'

XML 布局：

<android.support.design.widget.TabLayout
        android:id="@+id/tl_tab"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        app:tabGravity="center"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabTextColor="@color/colorPrimary" />

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

MainActivity :

package com.example.chubingbing.myapplication;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.widget.Toast;

import java.util.ArrayList;

import butterknife.Bind;
import butterknife.ButterKnife;

public class MainActivity extends FragmentActivity {
    private static final String TAG = "MainActivity";
    @Bind(R.id.tl_tab)
    TabLayout tabLayout;

    Toast toast;
    @Bind(R.id.viewpager)
    ViewPager viewpager;

    ArrayList<Fragment> fragmentArrayList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        fragmentArrayList.add(new OneFragment());
        fragmentArrayList.add(new TwoFragment());
        toast = Toast.makeText(this, "", Toast.LENGTH_SHORT);
        MyPageAdapter adapter = new MyPageAdapter(getSupportFragmentManager(),fragmentArrayList);

        viewpager.setAdapter(adapter);

        for (int i = 0; i < 2; i++) {
            //添加tab
            tabLayout.addTab(tabLayout.newTab());
        }
        tabLayout.setupWithViewPager(viewpager);
        
        //设置text需在setupWithViewPager之后
        tabLayout.getTabAt(0).setText("TAB0");
        tabLayout.getTabAt(1).setText("TAB1");


        //设置tab的点击监听器
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                toast.setText(tab.getPosition() + ":" + tab.getText());
                toast.show();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }


}

MyPageAdapter:

package com.example.chubingbing.myapplication;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by chubingbing on 2018/5/8.
 */

public class MyPageAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragmentList;

    @Override
    public CharSequence getPageTitle(int position) {
        return super.getPageTitle(position);
    }

    public MyPageAdapter(FragmentManager fm, List<Fragment> mFragmentList) {
        super(fm);
        this.mFragmentList = mFragmentList;
    }

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

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

getPageTitle可以设置tab头部，用tabLayout.setupWithViewPager方法。