快速实现顶端导航栏(ToolBar+TabLayout+ViewPager)-CSDN博客

1、前言

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

2、效果图

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

3、实现

1、添加依赖

compile 'com.android.support:design:26.1.0'
复制代码

2、页面布局

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="app.main.wangliwei.enablehands.view.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Theme.AppCompat.Light"
        android:elevation="0dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="25dp"
            app:layout_scrollFlags="scroll|enterAlways"
            android:layout_marginTop="30dp">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"
            app:tabIndicatorColor="@color/white"
            android:layout_marginTop="10dp">

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

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>

</android.support.design.widget.CoordinatorLayout>
复制代码

根布局为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<Fragment> fragmentList;
    private List<String> titleList;

    public ViewPagerAdapter(FragmentManager fm, List<Fragment> fragmentList, List<String> 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<Fragment> 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();
    }
复制代码

实现效果

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