企业官网建设流程全解析

Duo Navigation Drawer 完整指南：3 个步骤配置 content 与 menu 视图

【免费下载链接】duo-navigation-drawerA flexible, easy to use, unique drawer library for your Android project.项目地址: https://gitcode.com/gh_mirrors/du/duo-navigation-drawer

Duo Navigation Drawer 是一个灵活、易用且风格独特的 Android 导航抽屉开源库。与传统抽屉覆盖在主内容之上不同，它让主内容（content 视图）向右侧滑开，露出藏在底部的菜单（menu 视图），并自带缩放动画，交互体验十分新颖。本指南面向新手，只需 3 个步骤即可完成 content 与 menu 视图的配置，快速集成到你的 Android 项目中。

1. 为什么选择 Duo Navigation Drawer？

比起官方DrawerLayout，这个库的最大亮点是内容滑出式动画：当你打开抽屉时，页面主体不会被动地盖住，而是整体缩放并向右滑动，menu 视图在下方浮现，视觉层次感更强。

• 默认自带 content 缩放、menu 缩放与透明度动画；
• API 与官方DrawerLayout高度相似，迁移成本低；
• 支持 AndroidX，v3.0.0 起默认兼容；
• 提供开箱即用的DuoMenuView，菜单项、页头页脚全部可自定义。

该项目包含演示 App（app模块）、核心库（duo-navigation-drawer模块）与完整示例代码，clone 仓库即可运行体验：https://gitcode.com/gh_mirrors/du/duo-navigation-drawer。

2. 第 1 步：添加 DuoDrawerLayout 作为根视图

在布局文件中，把根布局换成DuoDrawerLayout，它是整个抽屉的容器：

<nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent" />

核心实现位于 DuoDrawerLayout.java，它基于RelativeLayout构建，内部通过ViewDragHelper处理拖拽逻辑。

3. 第 2 步：配置 content 视图

配置 content 视图有两种方式，任选其一即可：

方式一：通过app:content属性引用布局

<nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout app:content="@layout/content" ... />

方式二：在抽屉内直接添加带content标签的视图（推荐，示例项目即采用此方式）

<nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout ...> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:tag="@string/tag_content"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" ... /> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> </nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout>

tag的取值定义在 tags.xml 中，content标签告诉库哪一块才是主内容区域。完整写法可参考 activity_main.xml 与 content.xml。

4. 第 3 步：配置 menu 视图

menu 视图的配置方式与 content 完全对称，同样有两种：

方式一：通过app:menu属性引用布局

<nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout app:menu="@layout/menu" ... />

方式二：在抽屉内添加带menu标签的视图

<nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout ...> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:tag="@string/tag_menu" /> </nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout>

3.1 推荐：直接使用 DuoMenuView

想要菜单效果接近官方 Demo，建议直接使用DuoMenuView，它支持自定义页头（header）与页脚（footer），并内置菜单项列表：

<nl.psdcompany.duonavigationdrawer.views.DuoMenuView android:id="@+id/menu" android:layout_width="match_parent" android:layout_height="match_parent" android:tag="@string/tag_menu" app:header="@layout/duo_view_header" app:footer="@layout/duo_view_footer" />

参考 menu.xml 与页头页脚布局 duo_view_header.xml、duo_view_footer.xml。

5. 初始化抽屉并监听菜单点击

配置好布局后，在Activity中初始化DuoDrawerToggle（相当于官方ActionBarDrawerToggle的改造版），并给DuoMenuView设置适配器与点击监听：

DuoDrawerLayout drawerLayout = findViewById(R.id.drawer); DuoDrawerToggle drawerToggle = new DuoDrawerToggle(this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawerLayout.setDrawerListener(drawerToggle); drawerToggle.syncState(); DuoMenuView duoMenuView = (DuoMenuView) drawerLayout.getMenuView(); duoMenuView.setAdapter(new MenuAdapter(mTitles)); duoMenuView.setOnMenuClickListener(this);

在onOptionClicked回调中切换 Fragment、更新标题并关闭抽屉。完整逻辑可查看 MainActivity.java，菜单适配器参考 MenuAdapter.java。

6. 自定义抽屉动画效果

Duo Navigation Drawer 支持丰富的动画参数，全部在 XML 中即可配置：

app:contentScaleClosed="1.0" app:contentScaleOpen="0.7" app:menuScaleClosed="1.1" app:menuScaleOpen="1.0" app:menuAlphaClosed="0.0" app:menuAlphaOpen="1.0" app:marginFactor="0.7"

默认值定义在 DuoDrawerLayout.java，属性声明见 attr.xml。

7. 常见问题小结

• v2.0.8 与 v3.0.0 怎么选？使用旧版 Support 库选 v2.0.8，使用 AndroidX 选 v3.0.0。
• 如何区分 content 和 menu？记住一句话：content 是"被滑开的主体"，menu 是"藏在下面露出的菜单"，两者缺一不可。
• 想让菜单样式更炫？结合DuoOptionView（duo_view_option.xml）可以做出与 Demo 一致的选中态效果。

总结

通过以上 3 个步骤——添加DuoDrawerLayout、配置 content 视图、配置 menu 视图，再配合一行初始化代码，你就能在自己的 Android 项目中拥有一个交互流畅、动画独特的导航抽屉。这个库代码结构清晰、示例完整，非常适合学习自定义 View 与手势交互，也适合直接在生产环境中使用。赶紧 clone 仓库动手试试吧！🚀

【免费下载链接】duo-navigation-drawerA flexible, easy to use, unique drawer library for your Android project.项目地址: https://gitcode.com/gh_mirrors/du/duo-navigation-drawer