简年1:Android侧滑菜单栏是怎么实现的?

简年1:Android侧滑菜单栏是怎么实现的?_第1张图片

Hello,大家好~

平时使用App时,你可能早就注意到

许多应用左侧都有侧滑菜单栏的效果

(比如:QQ、OfO等),看上去真是炫酷极了~

不知道你是否也像我一样,好奇这种抽屉式的滑动菜单是怎么实现的呢?

下面就让我们一起来看一下,这个看上去复杂的功能,到底是怎么实现的吧O(∩_∩)O

简年1:Android侧滑菜单栏是怎么实现的?_第2张图片
老规矩,先上效果图

1.认识 DrawerLayout

滑动菜单这个功能看起来挺复杂,分析一下其实还是挺容易的。之所以这么说,是因为我大Google提供了一个控件,使得实现这个炫酷的功能简单又方便。而这个控件,正是:DrawerLayout !

其实看DrawerLayout这个名字,我们也能知道,这是一个布局。在这个布局中可以包含两个子控件:第一个子控件是主屏幕上的内容(也就是演示效果图中小智所在的页面);第二个子控件便是左侧滑动出菜单所包含的内容(也就是我们效果图的个人详情页)。

这样一说,你可能就明白了。整个效果,其实通过一个DrawerLayout,外加主页面和菜单页布局的设计,即可实现。

2.滑动菜单的实现过程

1.activity_main.xml 中,引入DrawerLayout 控件,代码主体框架如下:

简年1:Android侧滑菜单栏是怎么实现的?_第3张图片
引入 DrawerLayout

上图中我并没给出具体的代码,而是给出一个大体的结构,是因为我觉得,在文章分析中,不要让代码细节扰乱了我们的思路,后续详细代码我会上传到github(点击原文跳转)。

我们可以看到,DrawerLayout中,包含两个子控件:第一子控件和第二子控件。其实这里的子控件并没有限制和要求,我们可以根据需求添加自己需要的控件或布局。但是,在第二子控件中我保留了一个属性:

android:layout_gravity="start"

需要注意的是,这个属性是第二子控件中必须要指定的,其意义在于告诉DrawerLayout滑动菜单是从屏幕的左侧还是右侧滑出。比如:left表示滑动菜单在左边;right表示滑动菜单在右边;而指定start则表示,滑动菜单会根据系统语言进行判断该从那边呼出。

至此,通过修改布局文件,我们就已经基本实现了滑动菜单的效果。

2.虽然通过上述操作,“抽屉式”滑动菜单效果初现。但是回想一下QQ或OfO等应用的滑动菜单,我们会发现,它们在主页面左上角一般都会有一个头像或者图片,点击头像或图片时,同样会达到呼出滑动菜单的效果。这样不仅可以多一种呼出菜单的方式,更可以显式的告诉用户,我们该侧有一个“隐形”滑动菜单的功能~

相关实现代码如下图:

简年1:Android侧滑菜单栏是怎么实现的?_第4张图片
简年1:Android侧滑菜单栏是怎么实现的?_第5张图片

代码可见,现在onCreate方法中,通过actionBar实例的两个方法:

setDisplayHomeAsUpEnabled用于将左上角导航按钮显示出来(HomeAsUp按钮);

setHomeAsUpIndicator方法用于设置导航按钮图片。

在onOptionsItemSelected方法中,对HomeAsUp按钮添加点击事件,需要留意的是HomeAsUp按钮的id永远都是 android.R.id.home ,openDrawer方法表示将滑动菜单呼出,参数同XML第二个子控件的滑动菜单方向。

3.完善你的滑动菜单

经过上述过程,我们滑动菜单的效果已经基本可以实现。但是看起来可能有些简陋,这时候就需要你结合其他一些控件和灵活利用控件的属性,来不断的实现和完善你滑动菜单的炫酷效果!比如结合:Toolbar、NavigationView等~

Toolbar是MaterialDesign推荐使用的标题栏控件,不仅继承ActionBar的所有功能,且灵活度高,可搭配其他控件实现MaterialDesign效果。要注意的是,应用Toolbar的话,需要隐藏先把AppTheme中style属性设为NoActionBar,将其隐藏。这里先了解一下,代码中有所应用,需要可简单参考一下。

NavigationView,Design Support库中根据MaterialDesign风格要求设计的一个控件,可帮助我们把滑动菜单的实现过程变得更简单,比如:

app:menu = “@menu/..” 和 app:headerLayout 属性,可加载设置相关内容。同时,NavigationView的点击事件,实现起来也不难。

所以,一起用起来吧,结合多种控件,

实现你心中炫酷的侧滑菜单栏!

你可能感兴趣的:(简年1:Android侧滑菜单栏是怎么实现的?)