Android补全计划 DrawerLayout使用

DrawerLayout其实用了很久了，甚至封装了一些代码方便不同项目使用，但重构代码的时候突然意识到这块内容很不成体系，因此又参考了些文档，组建了自己的一个文档。

toolbar+drawerlayout能写的效果很多，在此我也只是截取了一些从简单到常用的写法，其中由于toolbar继承自viewgroup，所以可以实现很多自己想象中“这样可以吗”的效果。

DrawerLayout 是实现了侧滑菜单效果的控件，分为侧边菜单和主内容区两部分：

主内容区要放在侧边菜单前面，还有就是主内容区最好以 DrawerLayout 最好为界面的根布局，否则可能会出现触摸事件被屏蔽的问题。
侧滑菜单部分的布局必须设置 layout_gravity 属性，表示侧滑菜单是在左边还是右边，设置了
layout_gravity=“start/left” 的视图才会被认为是侧滑菜单。

使用的注意事项

主内容视图一定要是 DrawerLayout 的第一个子视图主内容视图宽度和高度需要 match_parent 必须显示指定侧滑视图的
android:layout_gravity 属性 android:layout_gravity = “start” 时，从左向右滑出菜单
android:layout_gravity = "end"时，从右向左滑出菜单不推荐使用left和right!!!
侧滑视图的宽度以dp为单位，不建议超过320dp(为了总能看到一些主内容视图)
设置侧滑事件：mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListene

参考
https://www.jianshu.com/p/082741fede64

1 最简单的侧滑 - 无图标

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent"><FrameLayoutandroid:id="@+id/ly_content"android:layout_width="match_parent"android:layout_height="match_parent" /><ListViewandroid:id="@+id/list_left_drawer"android:layout_width="180dp"android:layout_height="match_parent"android:layout_gravity="start"android:background="#080808"android:choiceMode="singleChoice"android:divider="#FFFFFF"android:dividerHeight="1dp" /></android.support.v4.widget.DrawerLayout>

2 最简单的侧滑+右侧图标侧滑

activity_main

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><includeandroid:id="@+id/topbar"layout="@layout/view_topbar"android:layout_width="wrap_content"android:layout_height="48dp" /><FrameLayoutandroid:id="@+id/fly_content"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout><fragmentandroid:id="@+id/fg_left_menu"android:name="jay.com.drawerlayoutdemo2.LeftFragment"android:layout_width="300dp"android:layout_height="match_parent"android:layout_gravity="start"android:tag="LEFT"tools:layout="@layout/fg_left" /><fragmentandroid:id="@+id/fg_right_menu"android:name="jay.com.drawerlayoutdemo2.RightFragment"android:layout_width="100dp"android:layout_height="match_parent"android:layout_gravity="end"android:tag="RIGHT"tools:layout="@layout/fg_right" /></android.support.v4.widget.DrawerLayout>

view_topbar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#DCDEDB"><Buttonandroid:id="@+id/btn_right"android:layout_width="40dp"android:layout_height="40dp"android:layout_centerVertical="true"android:layout_alignParentRight="true"android:background="@drawable/btn_selctor"/></RelativeLayout>

上述两个参考 DrawerLayout(官方侧滑菜单)的简单使用
https://www.runoob.com/w3cnote/android-tutorial-drawerlayout.html

3 左侧官方图标（toolbar）

3.1 侧滑菜单在 ToolBar 底部

实现侧滑菜单在 ToolBar 底部，需在xml中 ToolBar 放在 DrawerLayout 布局外层。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:layout_scrollFlags="scroll|enterAlways"app:title="DrawerLayout"tools:ignore="MissingConstraints" /><androidx.drawerlayout.widget.DrawerLayoutandroid:id="@+id/drawerLayout"android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@mipmap/meizi_2" /><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@mipmap/pangzi" /></androidx.drawerlayout.widget.DrawerLayout>
</LinearLayout>

java中使用ActionBarDrawerToggle定义效果

// 设置左上角图标["三" —— "←"]效果
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
actionBarDrawerToggle.syncState();
drawerLayout.addDrawerListener(actionBarDrawerToggle);

3.2 侧滑菜单和 ToolBar 齐平

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/drawerLayout"android:layout_width="match_parent"android:layout_height="match_parent"><!-- 主内容区 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><!-- Toolbar 放到 DrawerLayout 里 --><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:title="DrawerLayout"app:titleTextColor="@android:color/white" /><!-- 主要内容区域 --><FrameLayoutandroid:id="@+id/contentFrame"android:layout_width="match_parent"android:layout_height="match_parent"><!-- 示例背景图 --><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@mipmap/pangzi" /></FrameLayout></LinearLayout><!-- 侧边栏菜单 --><ListViewandroid:id="@+id/list_left_drawer"android:layout_width="240dp"android:layout_height="match_parent"android:layout_gravity="start"android:background="#111"android:choiceMode="singleChoice"android:divider="#FFFFFF"android:dividerHeight="1dp" /></androidx.drawerlayout.widget.DrawerLayout>

参考
https://juejin.cn/post/6850418119106789384

4 自定义图标（toolbar）

4.1 xml中Toolbar根节点设置图标

<android.support.v7.widget.Toolbarapp:navigationIcon="@drawable/ic_add_follow"android:id="@+id/tool_bar"android:layout_width="match_parent"android:layout_height="50dp"android:background="@android:color/holo_green_light"></android.support.v7.widget.Toolbar>

public class TextActivity extends AppCompatActivity {private ActionBarDrawerToggle toggle;private ImageView toolBarIcon;private DrawerLayout mDrawerLayout;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.text_tool_bar);initToolBar();}private void initToolBar() {Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);//不显示标题toolbar.setTitle(""); setSupportActionBar(toolbar);        //把开关和DrawerLayout关联toggle = new ActionBarDrawerToggle(this, mDrawerLayout, 0, 0);}//覆写方法让系统判断点击的图标后是否弹出侧拉页面@Overridepublic boolean onOptionsItemSelected(MenuItem item) {switch (item.getItemId()){case android.R.id.home:toggle.onOptionsItemSelected(item);}return super.onOptionsItemSelected(item);}

弊端：一：这种方式虽然可以在布局文件中来设置图标，但是无法给图标设置选择器
二：由于是在ToolBar的根节点来设置图片，所以不能只当图片摆放的位置
优点：直接在XML中指定图片，而且一行代码搞定

4.2 xml中在ToolBar里面来设置子控件来自定义图标

ToolBar继承自ViewGroup，完全可以用来盛放控件

<androidx.appcompat.widget.Toolbarandroid:id="@+id/tool_bar"android:layout_width="match_parent"android:layout_height="50dp"  app:contentInsetStart="0.0dp"android:background="@android:color/holo_green_light"><ImageViewandroid:layout_gravity="left"android:id="@+id/tool_bar_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/ic_launcher"                                                                                 android:background="@drawable/selector_infodetail_back_bg"/>
</androidx.appcompat.widget.Toolbar>

app:contentInsetStart=“0.0dp” 控制起始位置的内容内边距，在toolbar想盛放不只是菜单栏时十分重要。
java

public class TextActivity extends AppCompatActivity {private ActionBarDrawerToggle toggle;private DrawerLayout mDrawerLayout;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.text_tool_bar);initToolBar();}private void initToolBar() {//找到图标的idImageView  toolBarIcon = (ImageView) findViewById(R.id.tool_bar_icon);Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);toolbar.setTitle("");     setSupportActionBar(toolbar);//设置监听toolBarIcon.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {toggle();}});}}
private void toggle() {int drawerLockMode = mDrawerLayout.getDrawerLockMode(GravityCompat.START);if (mDrawerLayout.isDrawerVisible(GravityCompat.START)&& (drawerLockMode != DrawerLayout.LOCK_MODE_LOCKED_OPEN)) {mDrawerLayout.closeDrawer(GravityCompat.START);} else if (drawerLockMode != DrawerLayout.LOCK_MODE_LOCKED_CLOSED) {mDrawerLayout.openDrawer(GravityCompat.START);}}

通过这种方式设置的图标就不能通过覆写onOptionsItemSelected方法的方式来实现侧拉页面的打开和关闭了，因为图标的id已经不是android.R.id.home，所以只能写监听事件来完成侧拉页面的打开和关闭。

通过查看onOptionsItemSelected的源码发现系统内部实现方式最终调用的是toggle方法，但是这个方法是私有的我们不能通过对象调用到，发现这个方法中只用到了DrawerLayout的对象，所以就直接将这个方法拷贝到自己的类中来使用，完成了这个效果

弊端：XML中代码比较多
优点：可以给图标设置状态选择器，图标的摆放位置比较灵活，还可以放其他的控件

4.3 java中设置toolbar图标（actionbar版本）

actionbar版本

public class TempActivity extends AppCompatActivity {ActionBarDrawerToggle toggle;private DrawerLayout mDrawerLayout;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.text_tool_bar);initToolBar();}private void initToolBar() {Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);//设置图标toolbar.setNavigationIcon(R.drawable.ic_launcher);// 标题toolbar.setTitle("Title");//把ToolBar的设置的ActionBar的位置setSupportActionBar(toolbar);//获取开关同时让开关和DrawerLayout关联在一起toggle = new ActionBarDrawerToggle(this, mDrawerLayout, 0, 0);getSupportActionBar().setDisplayHomeAsUpEnabled(true);//设置点击事件，点击弹出menu界面mDrawerLayout.setDrawerListener(toggle);}//覆写方法让系统判断点击的图标后是否弹出侧拉页面@Overridepublic boolean onOptionsItemSelected(MenuItem item) {toggle.onOptionsItemSelected(item);return super.onOptionsItemSelected(item);}
}

这样就把左侧的图标设置成了我们需要的图标，同时点击图标也可以弹出DrawerLayout的侧拉页面，但是注意：在以上的代码中少了一行代码toggle.syncState();作用是将左侧小图标和侧拉页面的状态同步，只有当去掉这一行代码的时候，这个方法自定义的图标才会显示

弊端：1.使用代码来放置图标没有XML灵活，
2.这种方式不能给图标是指背景选择器
上述三种方法参考
https://www.cnblogs.com/zhujiabin/p/7530930.html

4.4 java中设置toolbar图标（无actionbar）

笔者一般使用这种，个人觉得更灵活一些

Toolbar toolbar = findViewById(R.id.toolbar);
toolbar.setTitle("");
toolbar.setNavigationIcon(R.drawable.menu_ic);DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
//监听打开和关闭
toolbar.setNavigationOnClickListener(v -> {if (drawerLayout.isDrawerOpen(GravityCompat.START)) {drawerLayout.closeDrawer(GravityCompat.START);} else {drawerLayout.openDrawer(GravityCompat.START);}
});

5 DrawerLayout + NavigationView + ToolBar 结合使用

仍然是

侧滑菜单在 ToolBar 底部
侧滑菜单沉浸式覆盖 ToolBar 展示

第一种效果实际上就是在 XML 布局中，将 ToolBar 布局放到 DrawerLayout 外部，第二种效果是将 ToolBar 放到 DrawerLayout 内部主页面布局里面，然后实现沉浸式效果。本文源码中有沉浸式实现的工具类，感兴趣的朋友可以下载源码参考。
下面以沉浸式为例

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawerLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:layout_scrollFlags="scroll|enterAlways"app:title="DrawerLayout"app:titleTextColor="#FFF"tools:ignore="MissingConstraints" /><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@mipmap/meizi_2" /></LinearLayout><com.google.android.material.navigation.NavigationViewandroid:id="@+id/navigationView"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="start"app:headerLayout="@layout/nav_header_main"app:insetForeground="@android:color/transparent"app:menu="@menu/activity_main_drawer" /></androidx.drawerlayout.widget.DrawerLayout>

nav_header_main

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="200dp"android:background="?attr/colorPrimary"android:gravity="bottom"android:theme="@style/ThemeOverlay.AppCompat.Dark"><com.caobo.slideviewdemo.drawerlayout.MovingImageViewandroid:id="@+id/movingImageView"android:layout_width="match_parent"android:layout_height="250dp"android:scaleType="centerCrop"android:src="@mipmap/menu_header_background"app:miv_load_on_create="false"app:miv_max_relative_size="3.0"app:miv_min_relative_offset="0.2"app:miv_repetitions="-1"app:miv_speed="100"app:miv_start_delay="100" /><de.hdodenhof.circleimageview.CircleImageViewandroid:layout_width="100dp"android:layout_height="100dp"android:layout_marginLeft="16dp"android:layout_marginTop="30dp"android:paddingTop="16dp"android:src="@mipmap/header_icon"app:civ_border_color="@color/colorWhite"app:civ_border_width="2dp" /><TextViewandroid:id="@+id/tv_nick"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:layout_marginLeft="16dp"android:layout_marginTop="10dp"android:layout_marginBottom="16dp"android:paddingLeft="5dp"android:text="Learn and live."android:textAppearance="@style/TextAppearance.AppCompat.Body1"android:textSize="18sp" />
</FrameLayout>

activity_main_drawer

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single"><itemandroid:id="@+id/group_item_github"android:icon="@drawable/ic_vector_github_grey"android:title="项目主页" /><itemandroid:id="@+id/group_item_more"android:icon="@drawable/ic_vector_more"android:title="更多内容" /><itemandroid:id="@+id/group_item_qr_code"android:icon="@drawable/ic_vector_qr_code"android:title="二维码" /><itemandroid:id="@+id/group_item_share_project"android:icon="@drawable/ic_vector_share"android:title="分享项目" /></group><item android:title="选项"><menu><itemandroid:id="@+id/item_model"android:icon="@drawable/ic_vetor_setting"android:title="夜间模式" /><itemandroid:id="@+id/item_about"android:icon="@drawable/ic_vector_about"android:title="关于" /></menu></item>
</menu>

java代码
NavigationView 的使用基本上都是 XML 文件中完成的，Activity 中不需要做太多处理，只需要 Activity 中添加 Menu 的监听。

public class DrawerLayoutActivity extends BaseActivity {@BindView(R.id.toolbar)Toolbar toolbar;@BindView(R.id.drawerLayout)DrawerLayout drawerLayout;@BindView(R.id.navigationView)NavigationView navigationView;MovingImageView movingImageView;private ActionBarDrawerToggle actionBarDrawerToggle;@Overrideprotected void initView() {movingImageView = navigationView.getHeaderView(0).findViewById(R.id.movingImageView);// 设置左上角图标["三" —— "←"]效果actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);actionBarDrawerToggle.syncState();drawerLayout.addDrawerListener(actionBarDrawerToggle);// 设置不允许 NavigationMenuView 滚动NavigationMenuView navigationMenuView = (NavigationMenuView) navigationView.getChildAt(0);if (navigationMenuView != null) {navigationMenuView.setVerticalScrollBarEnabled(false);}// NavigationView 监听navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem item) {switch (item.getItemId()) {case R.id.group_item_github:Toast.makeText(DrawerLayoutActivity.this,"项目主页",Toast.LENGTH_SHORT).show();break;case R.id.group_item_more:Toast.makeText(DrawerLayoutActivity.this,"更多内容",Toast.LENGTH_SHORT).show();break;case R.id.group_item_qr_code:Toast.makeText(DrawerLayoutActivity.this,"二维码",Toast.LENGTH_SHORT).show();break;case R.id.group_item_share_project:Toast.makeText(DrawerLayoutActivity.this,"分享项目",Toast.LENGTH_SHORT).show();break;case R.id.item_model:Toast.makeText(DrawerLayoutActivity.this,"夜间模式",Toast.LENGTH_SHORT).show();break;case R.id.item_about:Toast.makeText(DrawerLayoutActivity.this,"关于",Toast.LENGTH_SHORT).show();break;}item.setCheckable(false);drawerLayout.closeDrawer(GravityCompat.START);return true;}});}@Overrideprotected int getLayoutResID() {return R.layout.activity_drawerlayout;}
}

xml中只需在 DrawerLayout 中添加 NavigationView 控件即可，其中介绍两个属性(也就是上图中红黄蓝三个位置效果)：

app:insetForeground="@android:color/transparent" NavigationView 沉浸式展示
app:headerLayout="@layout/nav_header_main" 在 NavigationView 上添加一个 Header 布局
app:menu="@menu/activity_main_drawer" NavigationView 添加标签 Item 的菜单

上述参考
https://juejin.cn/post/6850418119106789384