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-drawerDuo Navigation Drawer 是一个灵活、易用且风格独特的 Android 导航抽屉开源库。与传统抽屉覆盖在主内容之上不同它让主内容content 视图向右侧滑开露出藏在底部的菜单menu 视图并自带缩放动画交互体验十分新颖。本指南面向新手只需 3 个步骤即可完成 content 与 menu 视图的配置快速集成到你的 Android 项目中。1. 为什么选择 Duo Navigation Drawer比起官方DrawerLayout这个库的最大亮点是内容滑出式动画当你打开抽屉时页面主体不会被动地盖住而是整体缩放并向右滑动menu 视图在下方浮现视觉层次感更强。默认自带 content 缩放、menu 缩放与透明度动画API 与官方DrawerLayout高度相似迁移成本低支持 AndroidXv3.0.0 起默认兼容提供开箱即用的DuoMenuView菜单项、页头页脚全部可自定义。该项目包含演示 Appapp模块、核心库duo-navigation-drawer模块与完整示例代码clone 仓库即可运行体验https://gitcode.com/gh_mirrors/du/duo-navigation-drawer。2. 第 1 步添加 DuoDrawerLayout 作为根视图在布局文件中把根布局换成DuoDrawerLayout它是整个抽屉的容器nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout xmlns:androidhttp://schemas.android.com/apk/res/android android:idid/drawer android:layout_widthmatch_parent android:layout_heightmatch_parent /核心实现位于 DuoDrawerLayout.java它基于RelativeLayout构建内部通过ViewDragHelper处理拖拽逻辑。3. 第 2 步配置 content 视图配置 content 视图有两种方式任选其一即可方式一通过app:content属性引用布局nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout app:contentlayout/content ... /方式二在抽屉内直接添加带content标签的视图推荐示例项目即采用此方式nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout ... LinearLayout android:layout_widthmatch_parent android:layout_heightmatch_parent android:tagstring/tag_content androidx.appcompat.widget.Toolbar android:idid/toolbar ... / FrameLayout android:idid/container android:layout_widthmatch_parent android:layout_heightmatch_parent / /LinearLayout /nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayouttag的取值定义在 tags.xml 中content标签告诉库哪一块才是主内容区域。完整写法可参考 activity_main.xml 与 content.xml。4. 第 3 步配置 menu 视图menu 视图的配置方式与 content 完全对称同样有两种方式一通过app:menu属性引用布局nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout app:menulayout/menu ... /方式二在抽屉内添加带menu标签的视图nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout ... FrameLayout android:layout_widthmatch_parent android:layout_heightmatch_parent android:tagstring/tag_menu / /nl.psdcompany.duonavigationdrawer.views.DuoDrawerLayout3.1 推荐直接使用 DuoMenuView想要菜单效果接近官方 Demo建议直接使用DuoMenuView它支持自定义页头header与页脚footer并内置菜单项列表nl.psdcompany.duonavigationdrawer.views.DuoMenuView android:idid/menu android:layout_widthmatch_parent android:layout_heightmatch_parent android:tagstring/tag_menu app:headerlayout/duo_view_header app:footerlayout/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 中即可配置属性作用示例值contentScaleClosed/contentScaleOpen内容关闭/打开时的缩放1.0 / 0.7menuScaleClosed/menuScaleOpen菜单关闭/打开时的缩放1.1 / 1.0menuAlphaClosed/menuAlphaOpen菜单透明度0.0 / 1.0marginFactor内容滑出时右侧保留的宽度比例0.7app:contentScaleClosed1.0 app:contentScaleOpen0.7 app:menuScaleClosed1.1 app:menuScaleOpen1.0 app:menuAlphaClosed0.0 app:menuAlphaOpen1.0 app:marginFactor0.7默认值定义在 DuoDrawerLayout.java属性声明见 attr.xml。7. 常见问题小结v2.0.8 与 v3.0.0 怎么选使用旧版 Support 库选 v2.0.8使用 AndroidX 选 v3.0.0。如何区分 content 和 menu记住一句话content 是被滑开的主体menu 是藏在下面露出的菜单两者缺一不可。想让菜单样式更炫结合DuoOptionViewduo_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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考