快速实现顶端导航栏(ToolBar+TabLayout+Viewpager)

1、前言

在Android开发前期时，实现一个业务分明的导航栏对后面各业务开发与解耦都有重要意义。现在各种厂商的导航栏样式都比较类似，Tab型的导航是当下被大家所选择的形式，今天我们就来快速搭建一个Tab类型的导航栏。底下可参考源码。

2、效果图

今日头条.gif

豌豆荚.gif

可以看到不同业务情况下，导航栏可以固定或者滑动。废话不多说，直接上代码。

3、实现

1、添加依赖

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

2、页面布局

根布局为CoordinatorLayout从上到下依次为toolbar、tabLayout、viewpager，由于我做了沉浸式布局处理，所以在toolbar上面留出了状态栏的空间，阴影高度elevation，设置app:tabMode="scrollable"使导航栏在显示不全的情况下可滑动。而Tab页面切换关键在于将TabLayout与ViewPager进行绑定。

3、代码

因为ViewPager是一个容器，我们把Fragment看作数据的话，则必须有一个adapter将数据按顺序地放入我们的容器中，这时需要新建一个类继承自FragmentPagerAdapter。与TabLayout搭配使用时必须复写getPageTitle这一方法，在获取adapter实例时将title传入，getItem返回的实例与title一一对应。

ViewPagerAdapter

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private List fragmentList;
    private List titleList;

    public ViewPagerAdapter(FragmentManager fm, List fragmentList, List titleList) {
        super(fm);
        this.fragmentList = fragmentList;
        this.titleList = titleList;
    }

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

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

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

设置Toolbar以及TabLayout与ViewPager的对应关系

   private void initToolBar() {
        toolbar.setNavigationIcon(R.mipmap.other);
        List list_fragment = new ArrayList<>();
        for(int i=0;i<6;i++) {
            list_fragment.add(new PictureFragment());
        }

        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(),
                list_fragment,Arrays.asList(tabTitle));
        viewPager.setAdapter(viewPagerAdapter);
        tabLayout.setupWithViewPager(viewPager);

    }

沉浸式效果

理论上来说现在的沉浸式都不是意义上的沉浸式，这里先不考虑5.1以下沉浸式实现，5.1以上是可以直接通过设置Window 类中的setStatusBarColor(int color)和setNavigationBarColor(int color)来实现，具体原理都是先设置状态栏和导航栏的颜色为透明，然后让主体内容占用它们的空间。
更多的了解可以参考这篇文章。

    private int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            |View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION;
            
    private void setTransParent(){
        getWindow().getDecorView().setSystemUiVisibility(option);
        getWindow().setStatusBarColor(Color.TRANSPARENT);
        getWindow().setNavigationBarColor(Color.TRANSPARENT);
        getSupportActionBar().hide();
    }

实现效果

tablayout.gif

项目以后会继续增加其他内容，参考MainActivity中的内容即可。
查看源码