前言

Android开发过程中，我们有时会用到侧滑菜单栏的功能。在之前我已经写过一篇关于侧滑菜单栏的介绍，大家感兴趣的话，可以参看

Android实现侧滑菜单栏

为了方便使用，然后我将侧滑菜单栏的使用做了进一步封装，今天就来讲讲它的使用吧。

今天涉及内容:

侧滑菜单栏的依赖

封装类BaseMenuView简介

BaseMenuView在Activity中使用

3.1 编写自己的菜单栏控件 MenuView

3.2 在 activity 中做 侧滑菜单的布局

3.3 MenuView 在 Activity 中使用

3.4 Activity代码

效果图和项目结构图

BaseMenuView源码

先来个效果图

效果图.gif

一. 侧滑菜单栏的依赖

要实现侧滑菜单栏功能，我们需要借助DrawerLayout，在app_module的build.gradle中添加DrawerLayout依赖如下：

dependencies {

//其他引用省略

//......

//DrawerLayout

implementation "androidx.drawerlayout:drawerlayout:1.1.0-alpha03"

}

二.封装类 BaseMenuView 简介

为了方便侧滑菜单栏的使用，我封装了一个基类—BaseMenuView,当你需要写一个侧滑菜单栏的时候，你可以继承BaseMenuView写自己的侧滑菜单控件。那么接下来，让我们熟悉下BaseMenuView中的一些主要方法。

/***

* 初始化

*

* @param drawerLayout activiy中 DrawerLayout 根布局对象

* @param listener

*/

public void init(DrawerLayout drawerLayout,OnDrawerListener listener)

/**activity的onPostCreate方法中调用,防止手机切屏报错**/

public void onPostCreate()

/**activity的 onConfigurationChanged 方法中调用,防止手机切屏报错**/

public void onConfigurationChanged(Configuration newConfig)

/***

* 开启/关闭 菜单栏手势滑动功能

*

* @param open：true-开启, false-关闭

*/

public void setDrawerLockMode(boolean open)

/***

* 启用/关闭 所有菜单栏手势滑动功能

*

* 注:当界面中有多个侧滑菜单栏(即同时有左，右侧滑菜单栏)时,可以用此方法

* 快速对多个侧滑菜单栏做统一控制

*

* @param open:true-开启, false-关闭

*/

public void setAllDrawerLockMode(boolean open)

/**打开菜单**/

public void openDrawer()

/**关闭菜单栏**/

public void closeDrawer()

/***

* 判断侧滑菜单栏是否已经打开

*

* @return true：已经打开

* false：已经关闭

*/

public boolean isDrawerOpen()

/***

* 设置菜单栏宽度

*

* @param scaleWidth 0

*/

public void setLayoutWidth(double scaleWidth)

/***

* 设置为左侧菜单栏

*

* 注：也可以在布局中给侧滑菜单控件设置 android:layout_gravity="start" //左菜单栏

*/

public void setLeftMenu()

/***

* 设置为右侧菜单栏

*

* 注：也可以在布局中给侧滑菜单控件设置 android:layout_gravity="end" //右菜单栏

*/

public void setRightMenu()

三. BaseMenuView 在 Activity 中使用

3.1 编写自己的菜单栏控件 MenuView

为了讲述方便，我会写一个简单的 侧滑菜单栏控件，此控件布局中只有一个TextView，然后菜单栏中此TextView中具备点击事件。

先继承BaseMenuView写一个MenuView，MenuView代码如下：

public class MenuView extends BaseMenuView{

private TextView mTextView;

public MenuView(Context context, AttributeSet attrs){

super(context,attrs);

}

@Override

public int getLayoutId() {

return R.layout.menu_layout;

}

@Override

public void initView() {

mTextView=getView(R.id.tv);

}

@Override

public void initData() {

}

/**获取TextView控件**/

public TextView getTextView(){

return mTextView;

}

}

布局文件menu_layout.xml代码如下：

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:background="@color/green">

android:id="@+id/tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="parent"

android:layout_marginTop="30dp"

android:textSize="16sp"

android:textColor="@color/black"

android:text="我是侧滑菜单"/>

这里需要注意的是menu_layout.xml文件的根布局一定要是ConstraintLayout

3.2 在 activity 中做 侧滑菜单的布局

在activity中做侧滑菜单，则MainActivity的布局文件activity_main.xml中根布局为DrawerLayout,然后内容布局放在上面，菜单布局放下面(注：一定要把内容布局放最上面)，且DrawerLayout的子控件最多为三个(一般为两个)。就像下面这样：

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/mDrawerLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/white">

//其他代码省略

//......

android:id="@+id/menuLayout"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"/>

当MainActivity中有两个侧滑菜单时，布局类似下面这样：

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/mDrawerLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/white">

//其他代码省略

//......

android:id="@+id/menuLayout"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"/>

android:id="@+id/menuLayout"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="end"/>

然后菜单栏可以为做左侧滑菜单栏，也可以为右侧滑菜单栏，位置的设定的话，你可以在xml布局中的自定义菜单控件MenuView上设置layout_gravity属性,就像下面这样：

android:id="@+id/menuLayout"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="end"/>

其中：

android:layout_gravity="start" //表示设置左侧滑菜单栏

android:layout_gravity="end" //表示设置右侧滑菜单栏

当然，你也可以在代码中设置MenuView显示位置，就像下面这样：

//设置为左侧显示(此设置可以在xml中设置)

menuView.setLeftMenu();

//设置为右侧显示(此设置可以在xml中设置)

menuView.setRightMenu();

ok,以上基本介绍完毕，然后给出activity_main.xml布局全部代码吧:

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/mDrawerLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/white">

android:id="@+id/tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="parent"

android:layout_marginTop="30dp"

android:textSize="16sp"

android:textColor="@color/black"

android:text="我是测试"/>

android:id="@+id/btn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

android:textColor="@color/black"

android:textSize="16sp"

android:text="测试"/>

android:id="@+id/menuLayout"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"/>

3.3 MenuView 在 Activity 中使用

现在我们已经继承BaseMenuView写了一个自定义侧滑菜单栏MenuView，那么在Activity中使用只需写以下代码即可实现侧滑菜单功能：

//声明DrawerLayout布局 和 侧滑菜单控件

private DrawerLayout mDrawerLayout;

private MenuView menuView;

//初始化布局和控件

mDrawerLayout = findViewById(R.id.mDrawerLayout);

menuView = findViewById(R.id.menuLayout);

//侧滑菜单栏相关设置

private void initData() {

//初始化设置

menuView.init(mDrawerLayout, new BaseMenuView.OnDrawerListener() {

@Override

public void opened(View drawerView) {

LogUtil.i("=====打开菜单======");

}

@Override

public void closed(View drawerView) {

LogUtil.i("=====关闭菜单======");

}

});

//设置侧滑菜单栏显示屏幕宽度(不设置则默认为屏幕宽度0.75)

menuView.setLayoutWidth(0.5);

//设置为左侧显示(此设置可以在xml中设置)

menuView.setLeftMenu();

//此为 menuView 控件内部功能示例

menuView.getTextView().setText("大家好");

menuView.getTextView().setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

ToastUtil.shortShow("为啥点击我");

}

});

}

//重写activity的 onPostCreate 和 onConfigurationChanged 方法并调用menuView相关方法

@Override

public void onPostCreate(@Nullable Bundle savedInstanceState, @Nullable PersistableBundle persistentState) {

super.onPostCreate(savedInstanceState, persistentState);

menuView.onPostCreate();

}

@Override

public void onConfigurationChanged(@NonNull Configuration newConfig) {

super.onConfigurationChanged(newConfig);

menuView.onConfigurationChanged(newConfig);

}

3.4 Activity代码

下面贴出MenuView在MainActivity中使用完整代码：

public class MainActivity extends AppCompatActivity {

//声明DrawerLayout布局

private DrawerLayout mDrawerLayout;

private TextView mTv;

private Button mBtn;

//声明侧滑菜单控件

private MenuView menuView;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

LogUtil.setDebug(true);

initView();

initData();

setListener();

}

private void initView() {

//mDrawerLayout布局初始化

mDrawerLayout = findViewById(R.id.mDrawerLayout);

mTv = findViewById(R.id.tv);

mBtn = findViewById(R.id.btn);

//侧滑菜单控件初始化

menuView = findViewById(R.id.menuLayout);

}

private void initData() {

//初始化设置

menuView.init(mDrawerLayout, new BaseMenuView.OnDrawerListener() {

@Override

public void opened(View drawerView) {

LogUtil.i("=====打开菜单======");

}

@Override

public void closed(View drawerView) {

LogUtil.i("=====关闭菜单======");

}

});

//设置侧滑菜单栏显示屏幕宽度(不设置则默认为屏幕宽度0.75)

menuView.setLayoutWidth(0.5);

//设置为左侧显示(此设置可以在xml中设置)

menuView.setLeftMenu();

//此为 menuView 控件内部功能示例

menuView.getTextView().setText("大家好");

menuView.getTextView().setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

ToastUtil.shortShow("为啥点击我");

}

});

}

private void setListener() {

mBtn.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

//打开左侧菜单

menuView.openDrawer();

}

});

}

@Override

public void onPostCreate(@Nullable Bundle savedInstanceState, @Nullable PersistableBundle persistentState) {

super.onPostCreate(savedInstanceState, persistentState);

menuView.onPostCreate();

}

@Override

public void onConfigurationChanged(@NonNull Configuration newConfig) {

super.onConfigurationChanged(newConfig);

menuView.onConfigurationChanged(newConfig);

}

}

四.效果图和项目结构图

效果图.gif

项目结构图.png

五. BaseMenuView 源码

下面给出BaseMenuView源码：