网易云音乐的侧滑设置页面,相信大家都很熟悉了,这个导航界面在屏幕的左侧边缘,使用主页时,它是不显示的,当用户用手指从屏幕的左侧滑动或者当用户点击应用顶部工具栏的应用图标的时候,它就会显示出来。那像这种侧滑的菜单显示功能在咱们Android应用中应该使用什么控件来实现呢? 以前我们都是使用网上的开源框架slidingMenu,但是在安卓5.0后Google就推出了一个强大的design库,我们今天就来介绍这个design库里的一个控件,Android官方的侧滑菜单控件DrawerLayout。
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<!--这里是主视图-->
官方解释的DrawerLayout最好为界面的根布局,否则可能会出现触摸事件被屏蔽的问题;主内容区的布局代码要放在侧滑菜单布局的前面,也就说说主要内容的视图必须是DrawerLayout的第一个子元素,因为 XML 顺序意味着按 z 序(层叠顺序)排序,并且抽屉式导航栏必须位于内容顶部,因为导航抽屉是要显示在主要内容视图的上面的;侧滑菜单部分的布局(这里是ListView)必须设置layout_gravity属性,他表示侧滑菜单是在左边还是右边,而且如果不设置在打开关闭抽屉的时候会报错,设置了layout_gravity="start/left"的视图才会被认为是侧滑菜单。 还需要注意的一点就是设置侧滑菜单的固定宽度时一定不能超出屏幕的宽度,因为在菜单滑出时,总要留一部分主页面显示。此事需要注意dp的差值问题,比如在480*800的手机上,设置菜单的宽度时不能超过320dp,否则侧滑菜单会将屏幕整个覆盖。 监听DrawerLayout的菜单展开与隐藏,可以在菜单展开与隐藏发生的时刻做一些希望做的事情,比如更新actionbar菜单等。设置mDrawerLayout.setDrawerListener来监听。
1,onDrawerStateChanged
@Override
public void onDrawerStateChanged(int arg0) {
Log.i(“drawer”, “drawer的状态:” + arg0);
}
当菜单的滑动状态改变时被调用,状态值是STATE_IDLE(闲置–0), STATE_DRAGGING(拖拽的–1), STATE_SETTLING(固定–2)中之一。抽屉打开的时候,点击抽屉,drawer的状态就会变成STATE_DRAGGING,然后变成STATE_IDLE2,onDrawerStateChanged
@Override
public void onDrawerStateChanged(int arg0) {
Log.i(“drawer”, “drawer的状态:” + arg0);
}
当抽屉被滑动的时候调用此方法,arg1 表示滑动的幅度(0-1)3,onDrawerOpened
@Override
public void onDrawerOpened(View arg0) {
Log.i(“drawer”, “抽屉被完全打开了!”);
}
当一个抽屉被完全打开的时候被调用4,onDrawerClosed
@Override
public void onDrawerClosed(View arg0) {
Log.i(“drawer”, “抽屉被完全关闭了!”);
}
当一个抽屉完全关闭的时候调用此方法
如果你的activity有actionbar的话,最好用ActionBarDrawerToggle来监听,ActionBarDrawerToggle实现了DrawerListener,所以他能做DrawerListener可以做的任何事情,同时他还能将drawerLayout的展开和隐藏与actionbar的app 图标关联起来,当展开与隐藏的时候图标有一定的平移效果,点击图标的时候还能展开或者隐藏菜单。
如果有两侧的菜单时,在点击侧边菜单选项的时候我们往往需要隐藏菜单来显示整个菜单对应的内容。DrawerLayout.closeDrawer方法用于隐藏侧边菜单,DrawerLayout.openDrawer方法用于展开侧边菜单
//引用一个布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.day1115monthexercise.MainActivity">
<ListView
android:id="@+id/lv"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#FFFFFF"
android:choiceMode="singleChoice"></ListView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/frame"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></FrameLayout>
<RadioGroup
android:id="@+id/rg"
android:layout_width="match_parent"
android:layout_height="35sp"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rbtn1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center_horizontal"
android:text="新闻" />
<RadioButton
android:id="@+id/rbtn2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center_horizontal"
android:text="热点" />
<RadioButton
android:id="@+id/rbtn3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center_horizontal"
android:text="国际" />
<RadioButton
android:id="@+id/rbtn4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center_horizontal"
android:text="亚洲" />
<RadioButton
android:id="@+id/rbtn5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center_horizontal"
android:text="设置" />
</RadioGroup>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>