Material Design实战之ToolBar

Toolbar

1.简介

​​Toolbar​​​ 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 非常推荐大家使用 ​​Toolbar​​ 来作为Android客户端的导航栏，以此来取代之前的 ​​Actionbar​​​ 。与 ​​Actionbar​​​ 相比，​​Toolbar​​​ 明显要灵活的多。它不像 ​​Actionbar​​​ 一样，一定要固定在​​Activity​​的顶部，而是可以放到界面的任意位置。

2.ActionBar从哪来的呢？

其实是根据项目中指定的主题来显示的

3.Toolbar的组成

对应xml文件

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:logo="@mipmap/ic_launcher"
        app:title="标题"
        app:titleTextColor="#fff"
        app:subtitle="副标题"
        app:subtitleTextColor="#fff"
        app:navigationIcon="@drawable/ic_menu"
        app:popupTheme="@style/toolBar_pop_item"
        >

4.最基本使用

①首先更改主题，把主题改成​​Theme.AppCompat.Light.NoActionBar​​或者​​Theme.AppCompat.NoActionBar​​。

• 区别：
  ​​​Theme.AppCompat.Light.NoActionBar​​​表示浅色主题，它会将界面的主体颜色设成浅色，陪衬颜色设成深色。​​Theme.AppCompat.NoActionBar​​表示深色主题，它会将界面的主体颜色设深色，陪衬颜色设成浅色。
• Material Design的一些theme

Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar

反正总之就是​​NoActionBar​​

有时候也设置它

关于其他属性是什么意思，我们看下面一张图

②然后我们修改​​MainActivity​​的xm文件

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/mToolBar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/purple_500"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

</FrameLayout>

为了方便，我们将布局改成​​FrameLayout​​​，然后添加了​​Toolbar​​​控件。里面的其他属性好说，就是最后两个属性。 ​​android:theme​​​是为了能让​​ToolBar​​​单独使用深色主题， ​​app:popupTheme​​是为了单独将弹出来的菜单项指定成浅色主题（​​popup​​​的意思是弹出）
③然后我们在​​MainActivity​​中调用

setSupportActionBar(findViewById(R.id.mToolBar));

效果

这样，具备实现​​MaterialDesign​​​效果能力的​​ToolBar​​就出来了。上面显示的文字可以在

这里进行更改。

5.添加菜单选项

我们可以给它加一些菜单选项。
①首先准备几张图片，然后右击​​res​​目录，新建​​Directory​​，创建名为​​menu​​的文件夹，然后新建​​Menu resource file​​，创建一个​​toolbar.xml​​文件，并编写如下代码

<?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/backup"
        android:icon="@mipmap/ic_backup"
        android:title="Backup"
        app:showAsAction="always"/>
    <item
        android:id="@+id/delete"
        android:icon="@mipmap/ic_delete"
        android:title="Delete"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/settings"
        android:icon="@mipmap/ic_settings"
        android:title="Settings"
        app:showAsAction="never"/>
</menu>

• ​​app:showAsAction​​​的​​always​​​表示永远显示在​​ToolBar​​​中，如果屏幕空间不够则不显示。​​ifRoom​​​表示屏幕空间足够的情况下显示在​​Toolbar​​​中，不够的话就显示在菜单当中。​​never​​表示永远显示在菜单当中。

注意：​​Toolbar​​​中的​​action​​​按钮只会显示图标，菜单中的​​action​​​按钮只会显示文字。
②然后在​​MainActivity​​中解析​​menu​​文件以及对​​item​​添加点击事件

//加载toolbar.xml这个菜单文件
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    //给各个按钮添加点击事件
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.backup:
                Toast.makeText(this,"你点击了backup",Toast.LENGTH_LONG).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"delete",Toast.LENGTH_LONG).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"settings",Toast.LENGTH_LONG).show();
                break;
                
        }
        return true;
    }

也就是添加这两个方法，具体功能都写了注释，不难理解的

运行效果

6.注意点

我们在更改​​Toolbar​​属性的时候，一定要注意两个问题

①分清是​​android​​作用域还是​​app​​作用域

比如这里是​​app​​​作用域的就不需要加前缀，是​​android​​作用域的就需要加前缀

②分清设置的位置

7.一些常用的用法：

（1）对​​NavigationIcon​​设置点击监听

​​NavigationIcon​​就是左上角的那个默认是返回箭头的键的图标

（2）自定义​​Toolbar​​弹出菜单样式

①首先定义菜单样式的​​theme​​

<!--自定义toolbar菜单样式-->
<style name="toolbarMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
 
    <!-- 是否覆盖锚点，默认为true，即盖住Toolbar -->
    <item name="overlapAnchor">false</item>
    <!-- 弹出层背景颜色 -->
    <item name="android:popupBackground">@color/material_deep_teal_500</item>
    <!-- 弹出层垂直方向上的偏移，负值会覆盖toolbar -->
    <item name="android:dropDownVerticalOffset">5dp</item>
    <!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 -->
    <item name="android:dropDownHorizontalOffset">-2dp</item>
    <!--文字颜色-->
    <item name="android:textColor">@color/white</item>
    
</style>

②然后在​​Toolbar​​​的​​theme​​中进行指定

③最后在​​Toolbar​​控件中进行引用

整体一对一效果

（3）一些常用的属性汇总

app:navigationIcon 设置navigation button
app:logo 设置logo 图标
app:title 设置标题
app:titleTextColor 设置标题文字颜色
app:subtitle 设置副标题
app:subtitleTextColor 设置副标题文字颜色
app:popupTheme Reference to a theme that should be used to inflate popups - shown by
widgets in the toolbar.
app:titleTextAppearance 设置title text 相关属性，如：字体,颜色，大小等等
app:subtitleTextAppearance 设置subtitletext相关属性，如：字体,颜色，大小等等
app:logoDescription logo 描述
android:background Toolbar 背景
android:theme 主题