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 继续阅读