tags: android,侧滑菜单
转载请注明出处
相信许多刚接触Android开发的朋友的都有想过做一个漂亮的侧滑菜单,我一开始也有这个想法,但是许多网上的教程看得都往往不得要领,十分苦恼,后来有幸看到一篇很不错的文章,给了我很大的帮助,结合了一点自己的探究,今天写下这篇文章,希望能与大家共同进步。
最简单的方法
在新建一个Activity时,选择 new→activity→Gallery 选中其中的 Navigation Drawer Activity →Next→Finish
你得到了一个带侧滑菜单的Activity
242B43E3.jpg不好意思,发错图了o(╯□╰)o
Gif_20170425_150636.gif我们来看一下Activity代码的结构以及预览
![Uploading TIM图片20170425162524_294782.png . . .]以及主页面的结构
TIM图片20170425162524.png很明显主页面由两部分构成,一部分是我们进入页面时看到的页面,另一部分是下面的抽屉,最外层的布局是一个DrawerLayout,这个布局的作用在于它可以将经过设定的子布局藏起来,在让子布局显示或隐藏的过程中会自带一个出现和消失的动画,很贴心。
抽屉部分
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main2"
app:menu="@menu/activity_main2_drawer" />
在Google提供的官方demo中,侧边栏使用了NavigationView这个控件,NavigationView由两部分组成,一部分是头部,也就是绿色的那部分,头部通过headerLayout设置为一个事先写好的Layout,headerLayout的高度由插入的Layout决定,这部分可以进行一部分个性化,另一部分是一个menu,通过获取menu 的资源id来设置,设置后各项menuitem将会显示在NavigationView的下半部分。
系统提供的侧滑菜单是很方便的,但是在进行个性化的时候是不够灵活的,比如在操作headerview中的控件时,需要先在activity中获取到Headerview,然后通过getHeaderView获取到布局的父布局,再通过使用
view.findViewById 来获取到最后要操作的控件,相对后讲到的方法会麻烦一些。
代码如下
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
LinearLayout name = (LinearLayout) navigationView.getHeaderView(0);
TextView ming = (TextView) name.findViewById(R.id.name);
ming.setText("李二狗");
另一方面 menuitem有自己固定的格式,个性化起来也很麻烦,想做出漂亮的侧滑菜单还需要使用其它方法。
那么如何做一个好看的侧滑菜单呢?
其实没那么难
父布局我们与官方给出的一样,使用DrawerLayout,同样的我们需要两个部分,一个是主页面显示的主体部分,另一个是我们的侧滑菜单,在这里我们不使用NavigationView,而是使用一个LinearLayout。
如果你想做让侧滑菜单出现在左边,就设置 android:layout_gravity= left或者start,反之,就设置为right或end,然后在这个布局中你可以直接将侧滑菜单的样式写进去,也可以写一个布局,然后include进去,在这里我推荐后者,如果代码量大了维护起来很麻烦。
如果要对侧滑菜单进行操作,直接在activity进行操作就好了,与其它的控件没什么两样,不过有一点要注意是。
如果你想在操作完侧滑菜单后让它自动收起,请调用DrawerLayout的closeDrawers()方法。
效果如下
Gif_20170425_174724.gif本次内容,就是这样了。。。
后续我将会把开发上图中的android知乎日报客户端的过程写出来,希望大家关注。
关于左上角toolbar的用法大家可以直接百度一下,目前现成的资料还是很多的,由于本人水平有限,所以在写这篇博文的过程中难免有疏漏,还请各位指出。
网友评论