Android NavigationView导航视图

NavigationView使用及颜色修改方法

最新推荐文章于 2025-07-01 12:32:18 发布

原创最新推荐文章于 2025-07-01 12:32:18 发布 · 502 阅读

0 ·

CC 4.0 BY-SA版权

Material Design 专栏收录该内容

6 篇文章

订阅专栏

博客介绍了NavigationView与DrawerLayout结合使用的相关内容，包括导入包、布局设置等。还说明了将其设置为单选模式，以及通过主题、属性、Java代码三种方式修改颜色。此外，提到了指定头部布局和为登录按钮设置点击事件，最后简单提及了特殊的BottomNavigationView。

简介：

我们通常都是把NavigationView与DrawerLayout结合使用
是Material Design库里的组件

使用

导入包
compile 'com.android.support:design:28.+'
布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_height="match_parent"
   android:layout_width="match_parent">
   
   <android.support.design.widget.NavigationView
      android:layout_height="wrap_content"
      android:layout_width="match_parent"
      android:id="@+id/mainNavigationView1"
      app:menu="@menu/menu"
      android:layout_gravity="center"/>

</FrameLayout>

menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
   android:id="@+id/item1" 
   android:icon="@drawable/download" 
   android:title="item1"/>
   
   <item 
      android:id="@+id/item2" 
      android:icon="@drawable/time" 
      android:title="item2"/> 
   <item
      android:id="@+id/item3"
      android:icon="@drawable/ic_launcher" 
      android:title="item3"/> 
      
</menu>

在这里插入图片描述

接下来，我们将它设置为单选模式

(与DrawerLayout结合使用时，我们一般都会把NavigationView设置为单选)

<menu xmlns:android="http://schemas.android.com/apk/res/android">

   <group android:checkableBehavior="single">

      <item
         android:id="@+id/item1" 
         android:icon="@drawable/download" 
         android:title="item1"/>
   
      <item 
         android:id="@+id/item2" 
         android:icon="@drawable/time" 
         android:title="item2"/> 
      <item
         android:id="@+id/item3"
         android:icon="@drawable/ic_launcher" 
         android:title="item3"/>
         
   </group>
      
</menu>

NavigationView mNavigationView=(NavigationView) findViewById(R.id.mainNavigationView1);

mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
   @Override
   public boolean onNavigationItemSelected(MenuItem p1)
   {
      switch (p1.getItemId())
      {
         case R.id.item1:
         {
            Toast.makeText(MainActivity.this,"item1",Toast.LENGTH_SHORT).show();
         }
         break;
         case R.id.item2:
         {
            Toast.makeText(MainActivity.this,"item2",Toast.LENGTH_SHORT).show();
         }
         break;
         case R.id.item3:
         {
            Toast.makeText(MainActivity.this,"item3",Toast.LENGTH_SHORT).show();
         }}
      //注意这里要返回true，否则单选无效
      return true;
   }
});

系统默认是白色的，我们可以通过修改主题(style)、属性(xml)、方法(java) (按优先级从小到大排序)这三个方式来修改颜色

在这里插入图片描述
1.通过主题修改

<item name="colorPrimary">#0DB8F7</item>

在这里插入图片描述
2.通过属性修改

//文本颜色
app:itemTextColor="@drawable/selector_color"
//icon颜色
app:itemIconTint="@drawable/selector_color"

selector_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <!--按下时-->
   <item android:color="#7516B5" android:state_pressed="true"/>
   <!--选中-->
   <item android:color="#3ECB13" android:state_checked="true"/>
   <!--默认-->
   <item android:color="#D9D9D9"/>
</selector>

不想用也可以设置为null
即:不对图标进行渲染，使用图标原来的颜色

3.在java代码中修改

mNavigationView.setItemIconTintList(getResources().getColorStateList(R.drawable.selector_text));
mNavigationView.setItemTextColor(getResources().getColorStateList(R.drawable.selector_text));

app:headerLayout
用于指定添加一个头部布局

在NavigationView添加属性

app:headerLayout="@layout/nav_header"

nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="150dp"
   android:background="#0DB8F7"
   android:gravity="center">
   
   <Button
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:text="登录"
      android:id="@+id/navheaderButton1"/>

</LinearLayout>

在这里插入图片描述

下面就让我们为登录按钮设置一个点击事件吧！
由于登录按钮是在NavigationView的头部布局文件中，所以我们不能直接使用findViewById()来获取按钮，需要使用mNavigationView.getHeaderView(0).findViewById()来获取按钮
mNavigationView.getHeaderView(0)
返回一个View对象 (头部布局)

Button bt= (Button) mNavigationView.getHeaderView(0).findViewById(R.id.navheaderButton1);
bt.setOnClickListener(new OnClickListener(){
   @Override
   public void onClick(View p1)
   {
      Toast.makeText(MainActivity.this,"你点击了按钮",Toast.LENGTH_SHORT).show();
   }
});

在这里插入图片描述

BottomNavigationVie

这是一种特殊的NavigationView，谷歌对它单独进行了封装
与原来的NavigationView的主要区别就是用途不一样
这里不作过多的介绍了，与原来的NavigationVie差不多

使用

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_height="match_parent"
   android:layout_width="match_parent">
   
   <android.support.design.widget.BottomNavigationView
      android:layout_height="wrap_content"
      android:layout_width="match_parent"
      app:menu="@menu/menu"
      android:layout_gravity="center"
      android:id="@+id/mainBottomNavigationView1"/>
      
</FrameLayout>

BottomNavigationView mNavigationView=(BottomNavigationView) findViewById(R.id.mainBottomNavigationViewView1);

mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener(){
   @Override
   public boolean onNavigationItemSelected(MenuItem p1)
   {
      switch (p1.getItemId())
      {
         case R.id.item1:
         {
            Toast.makeText(MainActivity.this,"item1",Toast.LENGTH_SHORT).show();
         }
         break;
         case R.id.item2:
         {
            Toast.makeText(MainActivity.this,"item2",Toast.LENGTH_SHORT).show();
         }
         break;
         case R.id.item3:
         {
            Toast.makeText(MainActivity.this,"item3",Toast.LENGTH_SHORT).show();
         }}
      //注意这里要返回true，否则单选无效
      return true;
   }
});