首页 理论教育 实现更炫的侧滑菜单效果:DrawerLayout控件优化

实现更炫的侧滑菜单效果:DrawerLayout控件优化

时间:2023-06-27 理论教育 版权反馈
【摘要】:DrawerLayout是Support Library包中实现侧滑菜单效果的控件,可以说DrawerLayout是Google借鉴第三方控件如MenuDrawer等的产物。做抽屉菜单的时候,左边滑出来的那一部分的布局是由自己来定义的,多花点时间能做出比较美观的侧拉菜单,但是要耗费很多时间,于是Google在5.0之后推出了Navigation-View,Google最新推出规范式设计中的NavigationView和DrawerLayout结合可以实现侧滑菜单栏效果,就是左边滑出来的那个菜单。

实现更炫的侧滑菜单效果:DrawerLayout控件优化

DrawerLayout是Support Library包中实现侧滑菜单效果的控件,可以说DrawerLayout是Google借鉴第三方控件如MenuDrawer等的产物。DrawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏(DrawerLayout自身特性),主内容区的内容可以随着菜单的单击而变化。

抽屉菜单的时候,左边滑出来的那一部分的布局是由自己来定义的,多花点时间能做出比较美观的侧拉菜单,但是要耗费很多时间,于是Google在5.0之后推出了Navigation-View,Google最新推出规范式设计中的NavigationView和DrawerLayout结合可以实现侧滑菜单栏效果,就是左边滑出来的那个菜单。这个菜单整体上分为两部分,上面一部分叫作HeaderLayout,下面的那些单击项都是menu,如图5-23所示。

978-7-111-58810-8-Chapter05-123.jpg

图5-23 抽屉菜单

下面是一个采用导航菜单的Android应用程序的主Activity界面实例。

978-7-111-58810-8-Chapter05-124.jpg

978-7-111-58810-8-Chapter05-125.jpg

DrawerLayout最好为界面的根布局,主内容区的布局代码要放在侧滑菜单布局的前面,因为XML顺序意味着按层叠顺序排序,并且抽屉式导航栏必须位于内容顶部;侧滑菜单部分的布局(这里是NavigationView)必须设置layout_gravity属性,确定侧滑菜单是在左边还是右边,如果不设置,在打开和关闭抽屉时会报错,设置了layout_gravity="start/left"的视图才会被认为是侧滑菜单。

下面通过一个实例进行讲解。在Android Studio中新建项目Navigation View_demo。项目的文件结构,如图5-24所示。

978-7-111-58810-8-Chapter05-126.jpg

图5-24 项目的文件结构

(1)编辑app/build.gradle文件,在dependencies闭包中增加以下内容。

978-7-111-58810-8-Chapter05-127.jpg

978-7-111-58810-8-Chapter05-128.jpg

(2)主Activity对应的布局文件activity_main.xml的代码如下。

978-7-111-58810-8-Chapter05-129.jpg

(3)主Activity对应的布局文件activity_main.xml,app:headerLayout="@layout/navi-gation_header"所对应的navigation_header.xml代码如下。(www.xing528.com)

978-7-111-58810-8-Chapter05-130.jpg

978-7-111-58810-8-Chapter05-131.jpg

(4)主Activity对应的布局文件为activity_main.xml,app:menu="@menu/drawer",在res目录下建立menu目录,在menu目录下建立对应的drawer.xml,代码如下。

978-7-111-58810-8-Chapter05-132.jpg

menu可以分组,将group的android:checkableBehavior属性设置为single,表示设置该组为单选。

(5)主Activity对应处理文件MainActivity.java的代码如下。

978-7-111-58810-8-Chapter05-133.jpg

978-7-111-58810-8-Chapter05-134.jpg

其中,getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,newFragmentOne()).commit()打开一个视图类FragmentOne(),显示在activity_main.xml文件中控件ID为frame_content,FragmentOne.java在源代码目录下建立,其代码如下。

978-7-111-58810-8-Chapter05-135.jpg

其中,layout_one是布局文件,在layout目录下,layout_one.xml的内容如下。

978-7-111-58810-8-Chapter05-136.jpg

其他两个文件与此类似:FragmentTwo.java、FragmentThree.java、layout_two.xml、layout_three.xml。

(6)运行结果如图5-25所示。

978-7-111-58810-8-Chapter05-137.jpg

图5-25 项目运行结果

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈