Android——MaterialDesign之三NavigationView
-
NavigationView的使用
这里我们来讲讲在Android5.0之后推出的NavigationView的具体使用方式。和普通的侧拉菜单制作方式一样,首先所有的东西还是都放在一个DrawerLayout中。如果对DrawerLayout的用法还不是很了解的。
可以参考我上一篇文章:Android——MaterialDesign之二DrawerLayout
CircleImageView是实现图片圆形化的功能,我是感觉非常的nice,很好用。具体看下面例子操作。
首先添加库:
Nav_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_call"
android:icon="@mipmap/call_1"
android:title="Call">
</item>
<item
android:id="@+id/nav_friend"
android:icon="@mipmap/friend_1"
android:title="Friend">
</item>
<item
android:id="@+id/nav_location"
android:icon="@mipmap/location_1"
android:title="Location">
</item>
<item
android:id="@+id/nav_mail"
android:icon="@mipmap/mail_1"
android:title="Mail">
</item>
<item
android:id="@+id/nav_task"
android:icon="@mipmap/task_1"
android:title="Task">
</item>
</menu>
这里是侧滑的menu包括电话、朋友、位置、邮件、日程。
Nav_header.xml
<?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">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@mipmap/p4"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/mail"
android:layout_alignParentBottom="true"
android:textSize="14sp"
android:textColor="#fff"
android:text="111222@qq.com"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/username"
android:text="Tom Matin"
android:textSize="14sp"
android:textColor="#fff"
android:layout_above="@+id/mail"/>
</RelativeLayout>
详解:这里用到了CircleImageView,src加入图片,自动的会处理图片圆形化
Activity_main.xml:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_layout"
tools:context="com.example.materialtest_demo2.MainActivity">
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"
android:id="@+id/nav_view">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
详解:这里侧滑还是用到了上次讲解的DrawerLayout 进行侧滑,而NavigationView代替了上次的TextView,通过 app:menu、app:headerLayout设置属性。
mainActivity.class:
...
//侧滑菜单
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setCheckedItem(R.id.nav_call);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
return true;
}
});
...
详解:这里获取到navigationView的实例后调用setCheckedItem()方法设置默认Call选项为选中,接着调用设置监听器,进行我们想要的操作,这里就简单的关闭菜单。
实验效果如下: