Android实现侧滑菜单栏

前言

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

今天涉及内容:

  1. DrawerLayout 库引用
  2. DrawerLayout 布局使用注意项
  3. DrawerLayout 代码使用前的一些准备
    3.1 例子场景介绍
    3.2 侧滑菜单栏中数据列表对应的适配器
    3.3 跳转的Fragment代码
  4. DrawerLayout 代码中使用
    4.1 先贴出主界面对应的布局代码activity_drawer.xml
    4.2 DrawerLayout使用注意点
    4.3 DrawerLayout使用主代码
  5. DrawerLayout 左侧边栏菜单右侧边栏菜单的使用与控制
    5.1 启用/关闭 左菜单栏
    5.2 启用/关闭 右菜单栏
    5.3 启用/关闭 所有菜单栏
  6. 效果图与项目结构图

先来波效果图


1.gif

一. DrawerLayout 库引用

DrawerLayout是Androidx系列下的一个控件，要使用它，我们需要在app_module对应的gradle中添加如下引用：

dependencies {
    //其他引用省略
    //......

    //DrawerLayout
    implementation "androidx.drawerlayout:drawerlayout:1.1.0-alpha03"
}

二. DrawerLayout 布局使用注意项

DrawerLayout实现侧滑菜单栏对布局有两个要求：

  • 根布局要为DrawerLayout
  • DrawerLayout里面最多放三个子控件(或布局)。若放的是三个子控件(或布局)，则有两个要标注成左测出菜单栏和右侧菜单栏，另一个子控件(或布局)作为内容展示控件(或布局)。若放的是两个子控件(或布局)，则有一个要标注成左测出菜单栏或右侧菜单栏，另一个子控件(或布局)作为内容展示控件(或布局)。
    然后，布局中若一个子控件(或布局)要标注为左菜单栏，则需要在此子控件(或布局)中添加如下属性：
android:layout_gravity="start"

布局中若一个子控件(或布局)要标注为右菜单栏，则需要在此子控件(或布局)中添加如下属性：

android:layout_gravity="end"

下面贴出具体的模板布局代码。
含一个左菜单栏的布局：

<?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:pain="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@color/white">

    <!--  内容页布局  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    </LinearLayout>

    <!--  左侧菜单栏布局  -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_left"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"/>

</androidx.drawerlayout.widget.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:pain="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@color/white">

    <!--  内容页布局  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    </LinearLayout>

    <!--  左侧菜单栏布局  -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_left"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"/>

    <!--  右侧菜单栏布局  -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_right"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:background="@color/white"/>

</androidx.drawerlayout.widget.DrawerLayout>

三.DrawerLayout 代码使用前的一些准备

在讲DrawerLayout使用前，我们先讲下这个例子的大致场景。我需要结合这样一个例子讲解：

3.1 例子场景介绍

在界面上有一个标题栏，标题栏下是一个FrameLayout，点击标题栏左侧的按钮，弹出侧滑菜单，点击侧滑菜单栏中的列表项，就在界面的FrameLayout中显示对应的fragment，然后此fragment中显示左侧侧滑菜单栏的列表中该项点击的内容。

3.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>

3.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 代码中使用

4.1 先贴出主界面对应的布局代码activity_drawer.xml：
还有 59% 的精彩内容
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
支付 ¥3.00 继续阅读
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 222,252评论 6赞 516
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,886评论 3赞 399
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 168,814评论 0赞 361
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,869评论 1赞 299
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,888评论 6赞 398
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,475评论 1赞 312
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 41,010评论 3赞 422
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,924评论 0赞 277
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,469评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,552评论 3赞 342
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,680评论 1赞 353
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 36,362评论 5赞 351
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 42,037评论 3赞 335
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,519评论 0赞 25
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,621评论 1赞 274
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 49,099评论 3赞 378
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,691评论 2赞 361