android顶部导航高度,快速实现顶端导航栏(ToolBar+TabLayout+Viewpager)

1、前言

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

2、效果图

今日头条.gif

豌豆荚.gif

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

3、实现

1、添加依赖

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

2、页面布局

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:layout_width="match_parent"

android:layout_height="wrap_content"

style="@style/Theme.AppCompat.Light"

android:elevation="0dp">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="25dp"

app:layout_scrollFlags="scroll|enterAlways"

android:layout_marginTop="30dp">

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:id="@+id/view_pager"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

根布局为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中的内容即可。

查看源码