侧滑菜单现在在很多app上都可以看到,以下文章主要讲如何实现实现Android的侧滑菜单。可以先看一个简单的侧滑菜单设计。
示例图:
从屏幕左端向右滑动或点击左上角按钮可打开侧滑栏菜单。
activity_main.xml
<android.support.v4.widget.DrawerLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="@+id/myDrawer"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/hideLayout"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
android:id="@+id/mToolBar"
android:popupTheme="@style/Widget.AppCompat.ActionBar"
app:theme="@style/Widget.AppCompat.Light.ActionBar"
>
android.support.v7.widget.Toolbar>
<FrameLayout
android:layout_width="match_parent"
android:id="@+id/frame"
android:layout_height="match_parent">
FrameLayout>
LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ffffff"
app:headerLayout="@layout/header"
app:menu="@menu/nav_menu"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
>
android.support.design.widget.NavigationView>
android.support.v4.widget.DrawerLayout>
紧接着要添加菜单,在menu文件夹下新建xml文件
nav_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item android:id="@+id/item1"
android:icon="@drawable/smile"
android:title="item1"
>
item>
<item android:id="@+id/item2"
android:icon="@drawable/sorry"
android:title="item2"
>
item>
<item android:id="@+id/item3"
android:icon="@drawable/oh_boy"
android:title="item3"
>
item>
<item android:id="@+id/item4"
android:icon="@drawable/joy"
android:title="item4"
>
item>
<item android:id="@+id/item5"
android:icon="@drawable/now_what"
android:title="item5"
>
item>
group>
menu>
还有头部的布局,即上图哆啦A梦处
header.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#c40606"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
>
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/doraemon"
android:layout_marginBottom="20dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_paddingLeft="20dp"
android:text="乐观的蓝胖子"
android:textSize="20sp"
/>
LinearLayout>
LinearLayout>
此外需要注意的是,使用toolbar时需要把系统的ActionBar去掉,方法是修改style.xml文件中的主题设置
style.xml
-- 改为没有ActionBar的主题 Theme.AppCompat.Light.NoActionBar -->