前言:话说自从5.0之后,Google为了安卓应用的风格更加统一(之前是holo风格,不过引起的反响不大),开始了Matrail Design的设计风格,咱今天所讲的就是基于Matrail Design设计风格的NavigationView,他的出生就是为了搭配DrawerLayout来使用,这个菜单分为两部分,头部(headerLayout)和尾部(menu),其实这样的效果,我们自己也可以来实现,但是既然Google出来了,我们今天就来探讨一下NavigationView的使用!
-------------------------------------------分割线-------------------------------------------------
使用:还是放在DrawerLayout里面,只是把侧滑栏换成NavigationView,具体看代码:
<?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"
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--内容布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/png01"></LinearLayout>
<!--侧边栏布局-->
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff"
app:headerLayout="@layout/navigation_headerlayout"
app:menu="@menu/navigation_menu" />
</android.support.v4.widget.DrawerLayout>
其中android:layout_gravity="start"属性,相信大家都很熟悉了,该属性表示左侧滑栏。
app:headerLayout="@layout/navigation_headerlayout",该属性表示头布局。
app:menu="@menu/navigation_menu",该属性表示尾布局。
头布局代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android" />
</LinearLayout>
尾布局代码:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_gallery"
android:icon="@android:drawable/ic_menu_gallery"
android:orderInCategory="100"
android:title="相册" />
<item
android:id="@+id/action_details"
android:icon="@android:drawable/ic_menu_info_details"
android:orderInCategory="100"
android:title="详情" />
<item
android:id="@+id/action_about"
android:icon="@android:drawable/ic_menu_help"
android:orderInCategory="100"
android:title="帮助" />
<item
android:id="@+id/action_fly"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="fly" />
<item
android:id="@+id/action_fly2"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="fly2" />
<item
android:id="@+id/action_fly3"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="fly3" />
<item
android:id="@+id/action_music"
android:icon="@android:drawable/ic_menu_more"
android:orderInCategory="100"
android:title="音乐">
<menu>
<item
android:id="@+id/action_play"
android:icon="@android:drawable/ic_media_play"
android:title="播放" />
<item
android:id="@+id/action_pause"
android:icon="@android:drawable/ic_media_pause"
android:title="暂停" />
</menu>
</item>
</menu>
效果图:
-------------------------------------------分割线-------------------------------------------------
图片显示不正常,默认显示的都是灰色偏黑色,在java中添加如下代码即可:
navigationView.setItemIconTintList(null);
再看下图:
当然了我们也可以设置app:itemIconTint="@color/blue"属性,来更改图片的显示颜色。
设置app:itemBackground="@color/colorAccent"每一个item的背景颜色,app:itemTextColor=""item的背景颜色
-------------------------------------------分割线-------------------------------------------------
分割线:在menu中将相应的item放到一个group中,并给该group取一个id即可,上面给出的有代码。
-------------------------------------------分割线-------------------------------------------------
头部点击事件:
View headerView = navigationView.getHeaderView(0);
headerView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "我是头部", Toast.LENGTH_SHORT).show();
}
});
效果图:
-------------------------------------------分割线-------------------------------------------------
尾部点击事件:
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
//在这里处理item的点击事件
switch (item.getItemId()) {
case R.id.action_gallery:
Toast.makeText(MainActivity.this, "我是相册", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
效果图:
-------------------------------------------分割线-------------------------------------------------
ok!以上就是NavigationView的使用方法,敬请期待下节课!