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中的内容即可。
查看源码
