导航菜单的制作方式多种多样,网上也有各种炫酷效果的具体实现方式,那么今天我主要是想来说说Google在Android5.0之后推出的NavigationView的具体使用方式。
效果图:
和普通的侧拉菜单制作方式一样,首先所有的东西还是都放在一个DrawerLayout中,只不过这次我们把左边滑出菜单的布局用一个NavigationView来代替,代码如下(DrawerLayout不会的话自行百度):
<!--
NavigationView侧滑菜单显示界面
layout_gravity 设置侧滑菜单显示的位置
-->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_mune" />
<!--
menu是用来显示具的菜单项
headerLayout用来显示头部布局
-->
头部布局代码(nav_header):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="180dp"
android:padding="10dp"
android:background="?attr/colorPrimary">
<!--android:background="?attr/colorPrimary"使用styles.xml文件里的颜色-->
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/nav_icon"
android:layout_centerInParent="true"/>
<!--
CircleImageView是将图片圆形化的控件 基本和ImageView一样
layout_centerInParent 居中显示
-->
<TextView
android:id="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="coyotev.@163.com"
android:textColor="#FFF"
android:textSize="14sp"/>
<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/mail"
android:text="Coyote"
android:textColor="#FFF"
android:textSize="14sp"/>
</RelativeLayout>
菜单布局(nav_mune):
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<!--
group表示一个组
single表示只能单选
-->
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_call"
android:icon="@drawable/nav_call"
android:title="Call"
/>
<!--
icon左边显示的图片
title用来显示菜单项显示的文字
-->
<item
android:id="@+id/nav_friends"
android:icon="@drawable/nav_friends"
android:title="friends"
/>
<item
android:id="@+id/nav_location"
android:icon="@drawable/nav_location"
android:title="location"
/>
<item
android:id="@+id/nav_task"
android:icon="@drawable/nav_task"
android:title="task"
/>
</group>
</menu>