Android Material Design控件之NavigationView_widget.navigationview-CSDN博客

本文介绍了Android中用于创建DrawerLayout的NavigationView控件，详细讲解了如何导入design库，以及在XML中设置headerLayout和menu。同时，文章还讨论了如何自定义item的样式，包括图标颜色、文字颜色和背景，并提供了实现item点击事件的方法。此外，还提到了通过selector实现item选中和点击状态的颜色变化，以及如何添加分割线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android Material Design Android官方控件学习目录

NavigationView

NavigationView是用来做DrawerLayout的第二个子布局的,就是抽屉布局
由google提供的控件,跟DrawerLayout篇的LinearLayout一样的地位
当然,你可以不使用NavigationView,使用其他布局(如FrameLayout+Fragment)来作为抽屉布局

导入design库

'com.android.support:design:26.1.0'

简单使用

xml

 <android.support.v4.widget.DrawerLayout
		......>

		<!--第一个，显示的布局-->
		<android.support.design.widget.CoordinatorLayout
			......>
		</android.support.design.widget.CoordinatorLayout>


		<!--第二个，不显示的抽屉布局-->
		<android.support.design.widget.NavigationView
			android:id="@+id/NavigationView"
			android:layout_width="wrap_content"
			android:layout_height="match_parent"
			android:layout_gravity="left"
			app:headerLayout="@layout/header_layout"
		    app:menu="@menu/menu_navigation_view"
		    app:itemBackground="@drawable/color_nav_item_background"
			app:itemTextColor="@color/color_nav_item_text"
            app:itemIconTint="@color/color_nav_item_text"
			app:itemTextAppearance="@style/NavItemAppearance"
		/>


	</android.support.v4.widget.DrawerLayout>

app:headerLayout:头部布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="200dp"
               >

	<ImageView
		android:id="@+id/iv"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:scaleType="centerCrop"
		android:src="@mipmap/timg"/>
	<TextView
		android:id="@+id/tv_header_title"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_gravity="bottom"
		android:layout_margin="8dp"
	    android:textColor="#cdcdcd"
	    android:text="Navigation"
	    android:textSize="28sp"
	/>
</FrameLayout>

在代码中获取头布局及其子View

        View headerView = mNavigationView.getHeaderView(0);
        TextView mTextView = (TextView) headerView.findViewById(R.id.tv_header_title);
        mTextView.setText("NavigationView");

app:menu:描述下半部分的布局

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

	<group android:checkableBehavior="single">
		<item
			android:id="@+id/nav_camera"
			android:icon="@drawable/ic_menu_camera"
			android:title="照相"/>
		<item
			android:id="@+id/nav_gallery"
			android:icon="@drawable/ic_menu_gallery"
			android:title="相册"/>
		<item
			android:id="@+id/nav_slideshow"
			android:icon="@drawable/ic_menu_slideshow"
			android:title="视频"/>
		<item
			android:id="@+id/nav_manage"
			android:icon="@drawable/ic_menu_manage"
			android:title="工具"/>

	</group>

	<item android:title="联系">
		<menu>
			<item
				android:id="@+id/nav_share"
				android:icon="@drawable/ic_menu_share"
				android:title="分享"/>
			<item
				android:id="@+id/nav_send"
				android:icon="@drawable/ic_menu_send"
				android:title="发送"/>
		</menu>
	</item>
</menu>

类似listview
在代码中设置各item点击事件

 mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                //在这里处理item的点击事件

                switch(item.getItemId()){
                    case R.id.nav_camera:
                        Snackbar.make(mNavigationView,"照相", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_gallery:
                        Snackbar.make(mNavigationView,"相册", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_slideshow:
                        Snackbar.make(mNavigationView,"视频", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_manage:
                        Snackbar.make(mNavigationView,"工具", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_share:
                        Snackbar.make(mNavigationView,"分享", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_send:
                        Snackbar.make(mNavigationView,"发送", Snackbar.LENGTH_LONG).show();
                        break;
                }
                mDrawerLayout.closeDrawer(Gravity.LEFT);
                return true;
            }
        });

app:itemIconTint="@color/blue" : item icon蒙层默认是灰色,所以图片都是灰色的;
图片都变为灰色,需要显示原色

 navigationView.setItemIconTintList(null);  //显示彩色

app:itemTextColor=""设置常态item的text颜色
app:itemTextAppearance="@style/NavItemAppearance":设置常态 item Text 格式
app:itemBackground="@color/colorAccent":设置每一个item的背景颜色
item点击/选中颜色变化

app:itemBackground="@drawable/color_nav_item_background"
app:itemTextColor="@color/color_nav_item_text"
app:itemIconTint="@color/color_nav_item_text"

selector 格式: state_checked:选中;state_pressed:点击

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#2266cc" android:state_checked="true"></item>
	<item android:color="#454545" ></item>
</selector>

app:insetForeground="#40000000" :设置遮罩的阴影颜色
item设置group,才会出现分割线

github 源码地址：https://github.com/LinweiJ/MaterialDesignWidget