android 侧滑覆盖整个页面安卓侧滑盖

转载

doscommand 2024-02-01 10:47:47

文章标签 android 侧滑覆盖整个页面 android 地图侧滑栏 android 侧滑菜单菜单栏 文章分类 Android 移动开发

前言

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源码：

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。