1、前言
在日常开发中，单个需求可能不难实现，多个合在一起可能就会产生各种问题，比如最近我在实现顶部导航加上底部导航再加上侧滑菜单，这三种布局相结合时，就会产生布局相互覆盖，或者获取不到焦点种种问题。在研究后得到一种比较兼容三种需求的实现方法，顶部导航栏可以参考上篇文章，底部导航采用TabLayout结合Fragment，侧滑菜单采用官方实现方式DrawerLayout+NavigationView，就此做个分享。
2、效果图
底部导航.gif
由图中看到，已经是一个比较常见的布局了，包括了上下导航栏和侧滑菜单。
3、底部导航
一般分为 3 —— 5 个Tab，比如微信，展示了有四个Tab，分别对应不同的板块（微信、通讯录、发现、我），现在市面出了少部分的Material Design 风格的除外，大部分都是这样的一个框架。页面做Tab切换首先最容易想到的还是TabLayout，切换Fragment对页面显示更加灵活一点。
页面布局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<android.support.design.widget.TabLayout
android:id="@+id/bottom_tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@color/bottom_tab_text_color">
</android.support.design.widget.TabLayout>
</LinearLayout>
TabLayout默认是带有Indicator的，也就是指示条，做底部导航时是不需要的，在布局中设置tabIndicatorHeight="0dp“即可。
代码
private void initView() {
//按钮图标资源
iconList = Arrays.asList(bottomTabIcon);
iconPressList = Arrays.asList(bottomIconPress);
//由Tab控制切换的Fragment
fragmentList = new ArrayList<>();
fragmentList.add(new HomeFragment());
fragmentList.add(new FavoriteFragment());
fragmentList.add(new FriendsFragment());
fragmentList.add(new PersonFragment());
bottmeTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
if(pos_tab != null) {
//将上一次被选中的Tab置为未选中状态
bottmeTab.getTabAt(pos_tab).setIcon(iconList.get(pos_tab));
}
fragment = fragmentList.get(tab.getPosition());
ft = getSupportFragmentManager().beginTransaction();
ft.replace(R.id.fragment_content,fragment).commit();
pos_tab = tab.getPosition();
bottmeTab.getTabAt(pos_tab).setIcon(iconPressList.get(pos_tab));
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
bottmeTab.addTab(bottmeTab.newTab().setIcon(R.mipmap.home).setText("首页"));
bottmeTab.addTab(bottmeTab.newTab().setIcon(R.mipmap.favorite).setText("关注"));
bottmeTab.addTab(bottmeTab.newTab().setIcon(R.mipmap.friends).setText("好友"));
bottmeTab.addTab(bottmeTab.newTab().setIcon(R.mipmap.account).setText("我"));
}
添加Tab之前先添加监听器，避免设置失效，第一次载入页面时，第一个Tab是选中状态，所以可以在第一个Tab做初始化操作，如果后加监听器第一次onTabSelected就不会选中。由于图标与字之间的距离不能改变，如果想要改变可以对Tab按钮做自定义，调用newTab().setCustomView(View view)传入自定义View。
需要注意的是，采用replace的方法切换Fragment，会使前一个Fragment被已销毁一次，生命周期一直走到Detach，其中有一些成员变量需要自己保存，在重新切换回来时还原，由于Fragment实例没被销毁，View的状态还被保存着，如果初始化中有绘制View的操作，会导致View被绘制俩次，需要在初始化中设置避免
4、侧滑菜单
首先看一下基础的布局
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
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"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<FrameLayout
android:id="@+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_drawer_layout__one"
app:menu="@menu/activity_drawer_layout__one_drawer"/>
</android.support.v4.widget.DrawerLayout>
这里把TabLayout直接加在Fragment布局下面，会导致页面被底部导航栏充满，可能是DrawerLagout本身这样设计，所以要做改动，将我们需要切换的Fragment与TabLayout包装在一起。
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<android.support.design.widget.TabLayout
android:id="@+id/bottom_tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@color/bottom_tab_text_color">
</android.support.design.widget.TabLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_left"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/header_nav_left"
app:menu="@menu/menu_nav_left"
app:insetForeground="@android:color/transparent">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
在Fragment和TabLayout外面包裹一层布局，当然也可以独立出去，include进来，这里放在一起更加直观。侧滑菜单包括一个头布局header和一个菜单menu：
header.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="130dp"
android:background="@color/colorPrimary"
android:orientation="vertical">
<ImageView
android:id="@+id/icon_person"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:layout_marginLeft="10dp"
android:src="@mipmap/icon_person"/>
<TextView
android:id="@+id/text_person"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/icon_person"
android:layout_marginTop="10dp"
android:layout_marginLeft="20dp"
android:text="用户名"/>
</RelativeLayout>
menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:id="@+id/group_content"
android:checkableBehavior="single"
>
<item
android:id="@+id/menu_home"
android:icon="@mipmap/home"
android:title="home" />
<item
android:id="@+id/menu_favorite"
android:icon="@mipmap/favorite"
android:title="favorite"/>
</group>
<group
android:id="@+id/group_person"
android:checkableBehavior="single">
<item
android:id="@+id/menu_account"
android:icon="@mipmap/account"
android:title="account"/>
<item
android:id="@+id/menu_messages"
android:icon="@mipmap/comments"
android:title="messages"/>
<item
android:id="@+id/menu_down"
android:icon="@mipmap/down"
android:title="down"/>
</group>
</menu>
<item>就是定义一个菜单项。
<group>是对菜单进行分组，如果需要分割线，添加id后，这一组菜单的顶部就会显示一个分割线，如上图效果图中的那条横线。
结合后代码
private void initView() {
iconList = Arrays.asList(bottomTabIcon);
iconPressList = Arrays.asList(bottomIconPress);
fragmentList = new ArrayList<>();
fragmentList.add(new HomeFragment());
fragmentList.add(new FavoriteFragment());
fragmentList.add(new FriendsFragment());
fragmentList.add(new PersonFragment());
bottmeTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
if(pos_tab != null) {
bottmeTab.getTabAt(pos_tab).setIcon(iconList.get(pos_tab));
}
fragment = fragmentList.get(tab.getPosition());
ft = getSupportFragmentManager().beginTransaction();
ft.replace(R.id.fragment_content,fragment).commit();
pos_tab = tab.getPosition();
bottmeTab.getTabAt(pos_tab).setIcon(iconPressList.get(pos_tab));
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
bottmeTab.addTab(bottmeTab.newTab().setIcon(R.mipmap.home).setText("首页"));
bottmeTab.addTab(bottmeTab.newTab().setIcon(R.mipmap.favorite).setText("关注"));
bottmeTab.addTab(bottmeTab.newTab().setIcon(R.mipmap.friends).setText("好友"));
bottmeTab.addTab(bottmeTab.newTab().setIcon(R.mipmap.account).setText("我"));
//侧滑菜单部分
navigationView.setItemIconTintList(null);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
//关闭左边导航
int id = item.getItemId();
drawerLayout.closeDrawer(GravityCompat.START);
return true;
}
});
}
菜单中如果使用矢量图标，需先setItemIconTintList(null)，否则会采用自身机制，矢量图不能完全显示，并且点击后矢量图标颜色改为应用内部主要颜色。
通过setNavigationItemSelectedListener设置监听处理菜单每个选项点击事件，用closeDrawer(GravityCompat.START)关闭侧滑菜单。
未设置.png
源码地址 个人项目加入了一些其他东西，主要看MainActivity
总结了一下三种效果结合在一起实现的过程，虽然都是容易的实现，在这里分享出来希望看过的人能少走弯路。水平有限，如果有不正确或者不足的地方欢迎指出，共同分享一起进步。
