Android实现侧滑菜单栏

立即下载用AI写一个

发布时间：2020-05-06

2人 | 浏览：2584次 | 收藏 |

技术：android+jdk1.8

概述

详细讲述 DrawerLayout 控件实现侧滑菜单栏的步骤以及需要注意的点。

详细

### 前言
在Anroid中实现菜单栏效果通常有很多方式，有我们常见的顶部导航栏，底部导航栏，然后还有一种比较常见的就是侧滑菜单栏了。实现侧滑菜单栏也有很多种方式，那么我今天要介绍的就是`Android`自带的控件——DrawerLayout。用它也可以实现我们的侧滑式菜单栏，那么接下来就让我们了解下`DrawerLayout`的使用吧。

今天涉及内容:
1. DrawerLayout 库引用
2. DrawerLayout 代码使用前的一些准备
    2.1 例子场景介绍
    2.2 侧滑菜单栏中数据列表对应的适配器
    2.3 跳转的Fragment代码
3. DrawerLayout更多详细介绍
4. 效果图与项目结构图

先来波效果图
![](/contentImages/image/20200506/k4IjBgouJT04lwg8dv8.gif)

#### 一. DrawerLayout 库引用
`DrawerLayout`是`Androidx`系列下的一个控件，要使用它，我们需要在`app_module`对应的`gradle`中添加如下引用：
```
dependencies {
    //其他引用省略
    //......

//DrawerLayout
    implementation "androidx.drawerlayout:drawerlayout:1.1.0-alpha03"
}
```
#### 二. DrawerLayout 代码使用前的一些准备
在讲`DrawerLayout`使用前，我们先讲下这个例子的大致场景。我需要结合这样一个例子讲解：
#### 2.1 例子场景介绍
在界面上有一个标题栏，标题栏下是一个`FrameLayout`，点击标题栏左侧的按钮，弹出侧滑菜单，点击侧滑菜单栏中的列表项，就在界面的`FrameLayout`中显示对应的`fragment`，然后此`fragment`中显示左侧侧滑菜单栏的列表中该项点击的内容。
#### 2.2 侧滑菜单栏中数据列表对应的适配器
我展开左侧侧滑菜单栏后，展示的是一个列表，列表展示的是字符串数据，下面贴出该数据集合对应的适配器类——`NameAdapter`:
```
/**
 * Title:
 * description:
 * autor:pei
 * created on 2020/4/30
 */
public class NameAdapter<T> extends RecyclerView.Adapter {

protected Context mContext;
    protected View mLayoutView;
    protected List<T> mData;

protected OnItemClickListener mOnItemClickListener;

public NameAdapter(Context context, List<T> data) {
        this.mContext = context;
        this.mData = data;
    }

public void setOnItemClickListener(OnItemClickListener listener){
        this.mOnItemClickListener=listener;
    }

@NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        mLayoutView = LayoutInflater.from(mContext).inflate(R.layout.item_layout, parent, false);
        ViewHolder viewHolder = new ViewHolder(mLayoutView);
        return viewHolder;
    }

@Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        String name = mData.get(position).toString();
        ((ViewHolder) holder).mTvName.setText(name);

((ViewHolder) holder).mTvName.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mOnItemClickListener!=null){
                    mOnItemClickListener.click(v,position);
                }
            }
        });
    }

@Override
    public int getItemCount() {
        return mData==null?0:mData.size();
    }

class ViewHolder extends RecyclerView.ViewHolder {

TextView mTvName;

public ViewHolder(View view) {
            super(view);
            mTvName = (TextView) view.findViewById(R.id.tv_name);
        }
    }

public interface OnItemClickListener{
        void click(View view,int position);
    }
}
```
`NameAdapter`对应的item布局`item_layout.xml`代码如下：
```
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:pain="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/tv_name"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    tools:context=".MainActivity"
    android:textColor="@color/green"
    android:textSize="16sp">
</TextView>
```
#### 2.3 跳转的Fragment代码
点击左滑菜单栏列表的某一项，跳转的是一个与之对应的`fragment`，该`fragment`通过`DrawerLayout`的内容区中一个`FrameLayout`布局加载。
下面先贴出`ContentFragment`代码：
```
/**
 * Title:
 * description:
 * autor:pei
 * created on 2020/4/30
 */
public class ContentFragment extends Fragment {

private View mLayoutView;
    private TextView mTv;

@Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mLayoutView= inflater.inflate(R.layout.fragment_content,null);
        mTv=mLayoutView.findViewById(R.id.tv);
        String text=getArguments().getString("text");
        mTv.setText(text);

return mLayoutView;
    }
}
```
`ContentFragment`对应布局`fragment_content`代码如下：
```
<?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:pain="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/white"
    tools:context=".MainActivity">

<TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="content"
        android:textColor="@color/black"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
```
到此，`DrawerLayout`使用例子的前提代码已经介绍完毕，接下来讲讲`DrawerLayout`在主界面的使用。
#### 三. DrawerLayout更多详细介绍
`DrawerLayout`更多使用请参考`demo`，更多详细使用步骤介绍及注意点请参考
[Android实现侧滑菜单栏](https://www.jianshu.com/p/4ff6a79a7377)
#### 四. 效果图与项目结构图
![](/contentImages/image/20200506/k4IjBgouJT04lwg8dv8.gif)

![](/contentImages/image/20200506/NVz7Cj5ycUJ7fIQHy2V.png)

ok,今天的内容就介绍到这里了。谢谢大家。

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

Android实现侧滑菜单栏

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子