Android NavigationView导航视图

博客介绍了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;
   }
});

在这里插入图片描述
本文到此结束

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值