导航栏的使用（ToolBarBottomNavgationView）

Posted 2021-12-30 superbrucess

一、ToolBar标题栏的使用
toolbar标题栏：一个 ToolBar 的基本组成，包括左侧导航图标、标题、子标题等。

具体的创建步骤如下：

1、隐藏页面自带标题栏
（1）将应用主题设为 NoActionBar

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    >

（2）在 Java 代码中调用 requestWindowFeature()方法
注意：有些android studio软件可能因为版本的不同，无法调用这个方法

@Override
 protected void onCreate(Bundle savedInstanceState) 
 super.onCreate(savedInstanceState);
 requestWindowFeature(Window.FEATURE_NO_TITLE) 
 setContentView(R.layout.activity_study);
 ……

2、在页面布局文件中加入 ToolBar
在页面布局设计中，加入androidx.appcompat.widget.Toolbar控件，根据toolbar栏的功能需要，可以在里面添加其他的控件。
具体代码省略

3、在 Activity 代码中设置 ToolBar

public class MainActivity extends AppCompactActivity 
private ToolBar toolBar;
@Override
 protected void onCreate(Bundle savedInstanceState) 
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 toolBar = findViewById(R.id.toolbar);
 //设置 Logo 图标
 toolBar.setLogo(R.drawable.logo);
 //设置左侧导航图标
 toolBar.setNavigationIcon(R.drawable.ic_back);
 //设置标题
 toolBar.setTitle("标题栏");
 //设置标题文字颜色
 toolBar.setTitleTextColor(Color.BLACK);
//设置子标题
 toolBar.setSubtitle("子标题栏");
 //设置背景颜色
 toolBar.setBackgroundResource(R.color. colorAccent);
 //设置 ToolBar 对象
 setSupportActionBar(toolBar)；
toolbar.setNavigationOnClickListener(
new OnClickListener()
 @Override
 public void onClick(View v) 
 finish();
 
);

在这里尤为要注意的是添加导航图标点击事件监听之前需要写setSupportActionBar()方法以使用设置好的toolbar控件。

以上步骤就能实现一个简单的toolbar工具栏

二、菜单控件的使用
菜单项：对于ToolBar 上没有空间完全显示的菜单项或设
置为不显示的菜单项则隐藏在右侧的溢出菜单中，
1、添加菜单资源
在res目录下，创建个menu存放菜单资源文件夹

添加item：

<?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">
    <item android:id="@+id/action_search"
        android:title="搜索"
        android:icon="@mipmap/xuexi"
        app:showAsAction="always"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        />
    <item android:id="@+id/action_join"
        android:title="加入"
        android:icon="@mipmap/huodong"
        app:showAsAction="always"/>
    <item android:id="@+id/action_notifications"
        android:title="提示"
        android:icon="@mipmap/user_photo"
        app:showAsAction="ifRoom"/>
    <item android:id="@+id/action_quit"
        android:title="退出"
        android:orderInCategory="100"
        android:icon="@mipmap/left"
        app:showAsAction="never"/>
</menu>

我这里添加了搜索栏searchview。

2、加载菜单

@Override
public Boolean onCreateOptionsMenu(Menu menu) 
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;

3、给菜单项添加点击事件

 //工具栏菜单项点击事件
        toolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() 
            @Override
            public boolean onMenuItemClick(MenuItem item) 
                switch(item.getItemId()) 
                    case R.id.action_join:
                        Toast.makeText(MainActivity.this,"点击加入",
                                Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_notifications:
                        Toast.makeText(MainActivity.this,"点击提示",
                                Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_quit:
                        Toast.makeText(MainActivity.this,"点击退出",
                                Toast.LENGTH_SHORT).show();
                        break;
                     case R.id.action_search:
                         Toast.makeText(MainActivity.this,"点击搜索",
                                 Toast.LENGTH_SHORT).show();
                         break;
                    default:
                        break;
                
                return true;
            
        );

注意，以上代码需要放在setSupportActionBar()之后，否则不起作用。

下面介绍底部导航栏的使用
控件：BottomNavigationView
1、导入依赖包
在使用该控件之前需要在dependencies中导入依赖包：’com.google.android.material:material:1.2.0’；

2、设计底部导航栏
此处的思路同使用menu组件时候的实现思路一样，仍然需要在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">
<item
 android:id="@+id/points"
 android:icon="@drawable/points"
 android:title="积分" />
<item
 android:id="@+id/answer"
 android:icon="@drawable/answer"
 android:title="答题" />
<item
 android:id="@+id/study"
 android:icon="@drawable/study"
 android:title="学习" />
<item
 android:id="@+id/radio"
 android:icon="@drawable/ radio "
 android:title="电台" />
<item
 android:id="@+id/tv"
 android:icon="@drawable/tv"
 android:title="电视台" />
</menu>

3、将 BottomNavigationView 控件加入布局
根据底部栏所在的包，添加一个BottomNavigationView 控件，并设置背景、文字颜色、图标颜色等属性

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
tools:context=".activity.StudyActivity">
 <com.google.android.material.bottomnavigation.BottomNavigationView
 android:id="@+id/bottom_nav"
 android:layout_width="match_parent"
 android:layout_height="50dp"
 android:layout_alignParentBottom="true"
 android:background="#ffffff"
 app:itemBackground="@null"
 app:itemIconTint="@drawable/selector_nav"
 app:itemTextColor="@drawable/selector_nav"
 app:labelVisibilityMode="labeled"
 app:menu="@menu/nav_menu" />
</RelativeLayout>

4、添加 BottomNavigationView 点击效果
通常需要将BottomNavigationView 控件与fragement相结合使用。
具体实现说明省略