Android Navigation Drawer开发实践总结

發財大力
2,460 阅读4分钟

NavigationDrawer 简介

NavigationDrawer 是 Google 在 Material Design 中推出的一种侧滑导航栏设计风格。说起来可能很抽象，我们直接来看看 网易云音乐 的侧滑导航栏效果

Google 为了支持这样的导航效果，推出一个新控件 —— DrawerLayout 。而在 DrawerLayout 没诞生之前，需求中需要实现侧滑导航效果时，我们必然会选择去选择一些成熟的第三方开源库（如最有名的 SlidingMenu）来完成开发 。效果上，普遍都像 手机QQ 那样：

在对比过 DrawerLayout 和 SlidingMenu 的实现效果后，基于以下的几点，我认为完全可以在开发中使用 DrawerLayout 取代以前的 SlidingMenu：

  1. 从动画效果上看，你会发现两者仅仅是在移动的效果上有些差别外，其他地方并没有太大的差异
  2. 在交互效果上，我认为这两者都差不多的，就算你把 网易云音乐 的效果套到了 手Q 上，也不会影响到用户的交互
  3. DrawerLayout 用起来比 SlidingMenu 更简单，代码量更少(往下看就知道了)
  4. DrawerLayout 是向下兼容的，所以不会存在低版本兼容性问题
  5. Google 亲儿子，没理由不支持啊！！！！！！

听到这里，要是你还没有引入 DrawerLayout 开发的冲动，请继续听本怪为你好好安利一番。

用法

导航抽屉提供对目的地和应用功能的访问，例如切换帐户。 它们可以永久在屏幕上，也可以通过导航菜单图标进行控制。

导航抽屉推荐用于：

  • 具有五个或更多顶级目标的应用

  • 具有两个或更多级别导航层次结构的应用

  • 在不相关的目的地之间快速导航

实例步骤

0.效果预览

1.创建项目
2.添加Fragment
  • 添加了3个Fragment：【textFragment】【listFragment】【pagerFragment】
3.添加Navigation
  • 在rec目录下直接创建navigation.xml文件，类型选择navigation;再将前面创建好的Fragment添加到其中：

  • 注意：要修改好每个Fragment的id
4.添加Menu
  • 在rec目录下直接创建menu.xml文件，类型选择menu;并再其中添加几个item：

  • 注意：要记住修改的id
5.转化布局类型

为了实现抽屉式布局，我们需要将原来的布局转化成抽屉式布局

  • 转化步骤

  • 要给转化好的layout一个id，为了方便后面的引用
  • 转化后由于也需要再其中添加内容，就将原来的ConstrainLayout布局添加进去
  • 由于先前创建好是需要navigation导航，所以将NavHosFragment添加，并且将原先创建好的navigation布局文件导入：

  • 前面的步骤只是创建好了要显示内容的页面，并没有创建承载menu的页面（也就是抽屉滑出来的那部分），这里我们就添加一个navigationView视图，并设置其id

  • 创建好navigationView后，我们需要添加头部headerLayout和menu（这些的创建会在下面都步骤中讲到）

其实到这里我们并不能得到左右抽离的效果，还需要配置一个参数才可以，但是由于Android studio有一点点小小的bug，我们不能通过视图效果去配置，只能通过代码配置，这时我们需要将**android:layout_gravity="start"**添加到navigationView标签下：

<com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_view_header_layout"
        app:itemIconTint="@color/navigation_view_item_background_color"
        app:itemTextColor="@color/navigation_view_item_background_color"
        app:menu="@menu/menu" />
5.添加HeaderLayout
  • 在rec目录下直接创建navigation_view_header_layout.xml文件，类型选择layout;并再其中添加图片：

6.设置主题、抽取layout
  • 设置主题：AndroidManifest.xml下修改：android:theme="@style/Theme.Design.NoActionBar">
  • 抽取layout：为了更加便捷的配置某个页面的布局；

7.设置AppBarLayout
  • 每一个fragment里面单独设置一个标题
// 每个页面单独设置标题
        requireActivity().collapsingToolBarLayout.title = getString(R.string.text_fragment_title)
  • 解决页面向上滑动时菜单图标不见

在content_layout.xml文件中的toolbar控件设置属性layout_collapseMode的值为pin

  • 给appBarLayout加图标
// 每个页面设置图标
        requireActivity().toolbariconImageView.setImageResource(R.drawable.ic_looks_two)
  • 差异化配置：就是一个页面下不同组件运动不同步的模式

每个collapsingToolBarLayout下面的组件都可以设置。

在需要设置差异化的组件里配置layout_collapseMode的值为parallax，并且layout_collapseParellaxMultiplier的值设为0.5

8.需要菜单选中颜色
  • 创建颜色资源

直接创建xml文件，类型选择Color

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FF0" android:state_checked="true"/>
    <item android:color="#FFF"/>
</selector>
9.页面导航的切换

在main_activity里：

// 将我们设置的toolbar设置给Main
        setSupportActionBar(toolbar)
        /**
         * 配置点击跳转页面
         */
        navController = findNavController(R.id.fragment)
        // 方法一作用：当页面不是主页面的时候会出现箭头，直接返回主界面，返回主界面后才能看见菜单按钮
        //appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)

        // 方法二：把所有的页面传入一个集合中,再用另外一种方法将其展示
        var set = setOf(R.id.textFragment, R.id.listFragment, R.id.pagerFragment)
        appBarConfiguration = AppBarConfiguration(set,drawerLayout)

        setupActionBarWithNavController(navController, appBarConfiguration)
        navigationView.setupWithNavController(navController)
    }

    /**
     * 左上角菜单点击弹出抽屉
     */
    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
    }

结语

至此，我们的项目就结束了，这只是一个简单的例子，有什么不对的地方，欢迎在评论区讨论交流！

avatar
文章
阅读
粉丝