ToolBar + TabLayout + ViewPager

app/build.gradle添加：

implementation 'com.android.support:design:26.1.0'

1. 添加Toolbar，TabLayout，ViewPager 并设置相应属性

<!--加强版FrameLayout 可监听子控件事件比做出反应-->
<android.support.design.widget.CoordinatorLayout
    >

    <!--垂直方向上LinearLayout 使ViewPager 执行向下偏移ActionBar 的行为-->
    <android.support.design.widget.AppBarLayout
        >
        <android.support.v7.widget.Toolbar
            android:layout_height="?attr/actionBarSize"

            <!--向上滚动隐藏 向下滚动重新显示-->
            app:layout_scrollFlags="scroll|enterAlways"

            <!--使Toolbar在最开始处 无边距-->
            app:contentInsetStart="0dp"
            >
        </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        >
    </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager

       <!--使之向下偏移一个 ToolBar 的高度-->
 app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
    </android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>

2. 设置ViewPager 的 Fragment 适配器

public class FragmentAdapter extends FragmentStatePagerAdapter {

    /**
     * ViewPager 的 Adapter 步骤：
     * 重写 getItem()
     *      getCount()
     *      getPageTile()
     */

    // 存放 传值过来的 Fragment
    private List<Fragment> mFragments;

    // 存放 传值过来的 Tab 的 title
    private List<String> mTitles;

    public FragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles){
        super(fm);
        mFragments=fragments;
        mTitles=titles;

    }

    /**
     * 获取当前 Fragment
     * @param position
     * @return
     */
    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    /**
     * 获取 Fragment 数量
     * @return
     */
    @Override
    public int getCount() {
        return mFragments.size();
    }

    /**
     * 获取 Tab 的 title
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }

}

3. 在 Activity 的 onCreate 或 Frament 的 onCreateView 中初始化

/**
     * 初始化 TabLayout ，并绑定 ViewPager
     * 添加 Fragment ，初始化 ViewPager 的适配器 ，比完成配置
     */
    private void initTabFragment(){

        // 像 tabLayout 中添加 tab
        for(int i=0;i<tabTitles.length;i++){
            homeTabLayout.addTab(homeTabLayout.newTab().setText(tabTitles[i]));
        }

        // 设置 tab 下面的 indicator 的左右间距
        homeTabLayout.post(new Runnable() {
            @Override
            public void run() {
                setIndicator(homeTabLayout,15,15);
            }
        });

        // 是 TabLayout 与 ViewPager 建立关联关系
        homeTabLayout.setupWithViewPager(homeViewPager);

        // 初始化 fragments ，并添加 FruitFragment
        fragments=new ArrayList<>();
        for(int i=0;i<tabTitles.length;i++){
            fragments.add(FruitFragment.newInstance());
        }

        // 初始化 适配器，然后 ViewPager 调用 setAdapter 完成适配器设置
        fragmentAdapter=new FragmentAdapter(this.getSupportFragmentManager(),fragments, Arrays.asList(tabTitles));
        homeViewPager.setAdapter(fragmentAdapter);


    }

4. 效果

   
   ToolbarTabLayoutViewPager.gif

总结

使 Toolbar 向上滚动隐藏 向下滚动重新显示

            app:layout_scrollFlags="scroll|enterAlways"

使 Content 向下偏移一个 ToolBar 的高度，需配合 AppBarLayout

         app:layout_behavior="@string/appbar_scrolling_view_behavior"

Toolbar 要先创建menu文件夹并创建menu文件，设置相应属性

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >
    <item
        android:id="@+id/shop"
        android:icon="@drawable/ic_shopping"
        android:title="Shopping"
        app:showAsAction="always"
        />
    <item
        android:id="@+id/game"
        android:icon="@drawable/ic_game"
        android:title="Game"
        app:showAsAction="always"
        />
</menu>

重写 onCreateOptionsMenu(Menu menu)

// Activity 中
getMenuInflater().inflate(R.menu.toolbar_menu,menu);

// Fragment中
inflater.inflate(R.menu.toolbar,menu);

后设置点击事件 onOptionsItemSelected(MenuItem item)

设置 tab 下面的 indicator 的左右间距的函数
setIndicator
参考博客