Android 之 Toolbar 汇总

发表于 | 分类于 | | 阅读次数 | 浏览 次

前言

本篇文章，尽可能地总结 Toolbar 的知识点和用法，肯定没有概括完，会不断地查漏补缺。

正文

一、概述

  • Toolbar 是 Android 5.0 之后被谷歌放出来的，是为了替代之前的 ActionBar ，

  • Toolbar 不仅继承了 ActionBar 的所有功能，而且灵活性很高，可以配合其他控件来实现一些 Material Design 效果。

二、使用

1. 新建一个项目，看 styles.xml
1
2
3
4
5
6
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

  • 系统默认使用主题 ： Theme.AppCompat.Light.DarkActionBar

  • 我们之前所有的项目中 自带的 ActionBar 就是因为指定了这个主题才出现的。

2. 修改主题
1.首先要指定一个不带 ActionBar 的主题：

  • Theme.AppCompat.Light.NoActionBar 背景为浅色的主题

  • Theme.AppCompat.NoActionBar 背景为深色的主题

  • 本人喜欢浅色主题，如下所示：

1
2
3
4
5
6
<style name="AppTheme2" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>
2. 主题中各个属性的含义：
  • colorPrimary 标题栏的颜色
  • colorPrimaryDark 状态栏的颜色
  • colorAccent 指定一个按钮的颜色，某些控件的选中状态也会选择这个颜色
3. 代码中简单使用
1. 在主 Activity 的布局文件中修改如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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_width="match_parent"
    android:layout_height="match_parent"
   >
   <android.support.v7.widget.Toolbar
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@color/colorPrimaryDark"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
       >
   </android.support.v7.widget.Toolbar>
</FrameLayout>
2. Acticity 中的代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package io.github.adsuper.meterialtext;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import butterknife.BindView;
import butterknife.ButterKnife;
public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}
  • 这里必须使用 findViewById ，我试过 ButterKnife ，效果显示不出来

image

3. 实现效果与 ActionBar 一样，但是这是 toolbar
  • 在 Activity 中进行设置，如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("title");//设置标题
        toolbar.setSubtitle("suntitle");//设置子标题
        toolbar.setLogo(R.mipmap.ic_launcher);//设置logo
        setSupportActionBar(toolbar);
        //设置导航栏图标要在 setSupportActionBar 之后
        toolbar.setNavigationIcon(R.drawable.back6);
    }

还可以通过 setTitleTextColor 、 setTitleTextAppearance 、 setSubtitleTextColor 、 setSubtitleTextAppearance 来设置不同的颜色
image

  • 还可以通过在 xml 文件中设置，如下所示：
1
2
3
4
5
6
7
8
//注意命名空间
   <android.support.v7.widget.Toolbar
       ...
       app:logo="@mipmap/ic_launcher"
       app:title="Title"
       app:subtitle="Sub Title"
       app:titleTextColor="#ffffff">
   </android.support.v7.widget.Toolbar>
2. 设置右侧 menu 菜单
  • 第一步：右键点击 res 文件夹，创建 Menu resource file ，命名为 toolbar.xml，内容如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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/set1"
        android:icon="@drawable/setting"
        android:title="11111"
        app:showAsAction="always"></item>
    <item
        android:id="@+id/set2"
        android:icon="@drawable/setting"
        android:title="22222"
        app:showAsAction="ifRoom"></item>
    <item
        android:id="@+id/set3"
        android:icon="@drawable/setting"
        android:title="33333"
        app:showAsAction="never"></item>
</menu>

其中，always 表示总是显示在标题栏，ifRoom 表示控件足够的话显示在标题栏 ，never 表示不显示在标题栏

  • 第二步：重写 Activity 中的 onCreateOptionsMenu 方法，填充布局：
1
2
3
4
5
6
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar,menu);
    return  true;
}
  • 第三步：重写 Activity 中的 onOptionsItemSelected 方法，响应 menu 菜单的点击事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.set1:
            Toast.makeText(getApplicationContext(),"set1",Toast.LENGTH_SHORT).show();
            break;
        case R.id.set2:
            Toast.makeText(getApplicationContext(),"set2",Toast.LENGTH_SHORT).show();
            break;
        case R.id.set3:
            Toast.makeText(getApplicationContext(),"set3",Toast.LENGTH_SHORT).show();
            break;
        case android.R.id.home:
            Toast.makeText(getApplicationContext(),"左侧导航栏图标",Toast.LENGTH_SHORT).show();
            break;
    }
    return true;
}

其中：android.R.id.home 是左侧导航栏图标的 id

  • 第四步：运行结果如下：

image

由于第三个图标设置的是 never 所以没有显示出来 ，点击最右侧的如表之后，显示如下：

image

其中，显示 33333 是因为 item 中的这条属性：android:title=”33333”

三、扩展

1. 最后边的按钮点击之后显示出来的 item ，将其放在 toolbar 下方

在 styles.xml 中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--无标题栏***浅色背景主题-->
 <style name="AppTheme2" parent="Theme.AppCompat.Light.NoActionBar">
     <!-- Customize your theme here. -->
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
     <item name="colorAccent">@color/colorAccent</item>
     <!--修改 popup menu 的位置，使其位于 Toolbar 的下方-->
     <item name="actionOverflowMenuStyle">@style/MenuStyle</item>
 </style>
 
 <style name="MenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
     <item name="overlapAnchor">false</item>  <!--把该属性改为fals-->
 </style>

其中，AppTheme2 是我们自己用的主题，添加的代码看注释即可

运行效果如下所示：

image

2. 标题居中样式：
  • 由于 Toolbar 继承于 ViewGroup ，所以可以在其内部放入一个 TextView
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
27
28
29
30
31
32
<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        <!--自定义控件-->
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:gravity="center"
            android:textStyle="bold"
            android:text="自定义标题"
            android:textSize="30dp" />
    </android.support.v7.widget.Toolbar>
</RelativeLayout>
  • 在 Activity 中设置 toolbar.setTitle(“”);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.drawable.back6);
    }
  • 效果如下：

image

3. 左侧显示 menu 菜单

左侧显示 menu 主要是使用 android.support.v7.widget.ActionMenuView

  • 第一步：布局文件设置如下：
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
27
28
29
30
31
32
33
34
35
36
37
38
<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--android:paddingTop="25dp" 是状态栏的高度，-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:minHeight="?attr/actionBarSize"
        android:paddingTop="25dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        <!--加入 ActionMenuView-->
        <android.support.v7.widget.ActionMenuView
            android:id="@+id/action_menu_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
        <!--自定义控件-->
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:gravity="center"
            android:textStyle="bold"
            android:text="自定义标题"
            android:textSize="20dp" />
    </android.support.v7.widget.Toolbar>
</RelativeLayout>
  • 第二步：在 menu 菜单中 创建一个文件用于填充左侧 menu ，命名为：toolbar_left_menu.xml
1
2
3
4
5
6
7
8
9
10
11
<?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/left_text_btn"
        android:title=""
        app:actionLayout="@layout/menu_left_text"
        app:showAsAction="always"/>
</menu>

其中，app:actionLayout 属性表示新建一个 style 布局，填充这个 item ，主要作用是设置这个 item 的个性， @layout/menu_left_text 如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" 
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textview"
        android:text="关闭"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:textColor="@color/colorAccent"
        />
</RelativeLayout>
  • 第三步，Activity 中的操作：
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
27
28
29
30
31
32
33
34
35
36
37
public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        
        ActionMenuView actionMenuView = (ActionMenuView) toolbar.findViewById(R.id.action_menu_view);
        //填充 menu 布局
        getMenuInflater().inflate(R.menu.toolbar_left_menu, actionMenuView.getMenu());
        //设置 item 的点击事件(没有填充布局的 item )
        actionMenuView.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
//                Toast.makeText(getApplicationContext(),"关闭",Toast.LENGTH_SHORT).show();
                return true;
            }
        });
        // 找到 id 找到对应的 item
        MenuItem menuItem = actionMenuView.getMenu().findItem(R.id.left_text_btn);
        //设置 对应 item 填充布局的点击事件
        menuItem.getActionView().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"关闭",Toast.LENGTH_SHORT).show();
            }
        });
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
    }
  • 运行效果如下所示：
    image

点击关闭按钮会响应对应的 toast

4. Toolbar 之状态栏适配方案

详情参考：帅比张

  • Android 5.0 之前的版本，状态栏是黑色的，之后的状态栏是半透明的
1. 在使用的主题文件下添加如下代码：(要求 API 大于等于 19)
1
2
<!--设置状态栏为透明的-->
<item name="android:windowTranslucentStatus">true</item>

或者在 activity 中添加如下代码

1
2
3
4
5
//设置透明状态栏
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }

但是在代码里声明更有效！

2. 在 Toolbar 中添加这么一条属性
1
2
3
4
5
6
//因为状态栏的高度是 25dp
android:paddingTop="25dp"
// 但是在 Toolbar 配合 Drawerlayout 嵌套 NavigationView 使用的时候，会出现问题，改为   
android:fitsSystemWindows="true"

  • 在 API 19 上显示为：
    image

  • 在 API 21 上显示为：
    image