文章目录

• 1. 目标效果
• 2. 案例教学
• • 2.1 主界面布局
  • 2.2 准备Fragment
  • 2.3 主界面Activity
• 3. 完整代码
• 4. 总结

1. 目标效果

2. 案例教学

2.1 主界面布局

之前网上有各种自定义的控件方案来实现侧滑菜单，虽然可以实现，但五花八门复杂难懂。后来官方结合网上各种方案，统一出了专门的侧滑菜单控件：DrawerLayout，抽屉布局。顾名思义，就是像抽屉一样，从侧面抽出一个菜单页面。

我们要实现的效果是顶部带有ActionBar，侧滑菜单在ActionBar之下的，因为这种情况我们可以看到左上角有个菜单打开/关闭的图标。这个图标通常在关闭的时候是三条线，打开的时候自动变成箭头，并且这个过程有一个比较丝滑的动画转变效果。相信大家都见过这种效果，网上也有一些想自己手写动画实现的，特别费劲。其实系统已经帮我们实现了，我们只需要引用即可轻松实现。

activity_drawer.xml

<LinearLayout 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:orientation="vertical"><com.google.android.material.appbar.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/Theme.FragmentBottomTab1.AppBarOverlay"><androidx.appcompat.widget.Toolbarandroid:id="@+id/tool_bar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="?attr/colorPrimary"app:popupTheme="@style/Theme.FragmentBottomTab1.PopupOverlay" />com.google.android.material.appbar.AppBarLayout><androidx.drawerlayout.widget.DrawerLayoutandroid:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".fragment_test.drawerlayout.DrawerActivity"tools:openDrawer="start"><androidx.fragment.app.FragmentContainerViewandroid:id="@+id/fcv_drawer_container"android:layout_width="match_parent"android:layout_height="match_parent" /><com.google.android.material.navigation.NavigationViewandroid:id="@+id/nv"android:layout_width="200dp"android:layout_height="match_parent"android:layout_gravity="start"android:clickable="true"app:headerLayout="@layout/drawer_header_layout"app:menu="@menu/drawer_nav_menu" />androidx.drawerlayout.widget.DrawerLayout>LinearLayout>

整体还是上下结构，最上面是ActionBar，这里我们使用AppBarLayout+Toolbar来实现，当作我们的ActionBar。下面是重头戏侧滑菜单和主体内容，用DrawerLayout实现。

• AppBarLayout+Toolbar部分

需要注意的就是一些主题资源了。比如android:theme="@style/Theme.FragmentBottomTab1.AppBarOverlay"、android:background="?attr/colorPrimary"、app:popupTheme="@style/Theme.FragmentBottomTab1.PopupOverlay"。

在themes.xml里添加

<style name="Theme.FragmentBottomTab1.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.FragmentBottomTab1.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

• DrawerLayout部分

DrawerLayout是一种容器控件，我们只需要把菜单和主体页面放到里面即可。菜单和主体页面分别用NavigationView和FragmentContainerView承接。他们放置的先后顺序没有关系，决定他们摆放位置的是NavigationView的属性android:layout_gravity="start"，表示NavigationView在抽屉的左侧，那么剩下的FragmentContainerView自然就是在右侧充当主体内容部分了。

再来看一下其他的一些细节。

• tools:openDrawer=“start”
  tools开头的这个命名空间表示的是只在代码编写阶段用来预览的属性，运行时不生效，因此这个属性只是为了让我们在预览界面里看到当前抽屉打开的效果。

• app:menu="@menu/drawer_nav_menu"
  侧滑菜单的菜单项部分，与上节文章里的底部导航菜单类似，只需要用menu文件就可以定义出菜单项了。

  drawer_nav_menu.xml 如下：

<menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single"><itemandroid:id="@+id/menu_home"android:icon="@drawable/selector_home"android:title="首页" /><itemandroid:id="@+id/menu_find"android:icon="@drawable/selector_find"android:title="发现" /><itemandroid:id="@+id/menu_mine"android:icon="@drawable/selector_mine"android:<

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！