Android封装侧滑菜单栏
2020-11-23 本文已影响0人
奔跑的佩恩
前言
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<scaleWidth<1
*/
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代码如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@color/green">
<TextView
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="我是侧滑菜单"/>
</androidx.constraintlayout.widget.ConstraintLayout>
这里需要注意的是menu_layout.xml文件的根布局一定要是ConstraintLayout
3.2 在 activity 中做 侧滑菜单的布局
在activity中做侧滑菜单，则MainActivity的布局文件activity_main.xml中根布局为DrawerLayout,然后内容布局放在上面，菜单布局放下面(注：一定要把内容布局放最上面)，且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/mDrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- 内容页布局 -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
//其他代码省略
//......
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- 侧滑菜单栏 -->
<com.demo.MenuView
android:id="@+id/menuLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</androidx.drawerlayout.widget.DrawerLayout>
当MainActivity中有两个侧滑菜单时，布局类似下面这样：
<?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/mDrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- 内容页布局 -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
//其他代码省略
//......
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- 侧滑菜单栏 1-->
<com.demo.MenuView
android:id="@+id/menuLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"/>
<!-- 侧滑菜单栏 2-->
<com.demo.MenuView
android:id="@+id/menuLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"/>
</androidx.drawerlayout.widget.DrawerLayout>
然后菜单栏可以为做左侧滑菜单栏，也可以为右侧滑菜单栏，位置的设定的话，你可以在xml布局中的自定义菜单控件MenuView上设置layout_gravity属性,就像下面这样：
<com.demo.MenuView
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布局全部代码吧:
<?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/mDrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- 内容页布局 -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
<TextView
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="我是测试"/>
<Button
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="测试"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- 侧滑菜单栏 -->
<com.demo.MenuView
android:id="@+id/menuLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</androidx.drawerlayout.widget.DrawerLayout>
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源码：
