Android NavigationView导航视图_android mnavbarview

简介：

• 我们通常都是把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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

(与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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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;
   }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

1.通过主题修改

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

2.通过属性修改

//文本颜色
app:itemTextColor="@drawable/selector_color"
//icon颜色
app:itemIconTint="@drawable/selector_color"
1
2
3
4

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>
1
2
3
4
5
6
7
8
9

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

3.在java代码中修改

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

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

在NavigationView添加属性

app:headerLayout="@layout/nav_header"
1

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 下面就让我们为登录按钮设置一个点击事件吧！
• 由于登录按钮是在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();
   }
});
1
2
3
4
5
6
7
8

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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;
   }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

本文到此结束