前言
本篇文章，尽可能地总结 Toolbar 的知识点和用法，
正文
一、概述
Toolbar 是 Android 5.0 之后被谷歌放出来的，是为了替代之前的 ActionBar ，
Toolbar 不仅继承了 ActionBar 的所有功能，而且灵活性很高，可以配合其他控件来实现一些 Meterial Design 效果。
二、使用
1. 新建一个项目，看 styles.xml
<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 背景为深色的主题
本人喜欢浅色主题，如下所示：
<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 的布局文件中修改如下：
<?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 中的代码如下：
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
4. 添加标题、子标题、右侧 menu 、左侧导航栏图标、logo
1. 添加标题、子标题、、左侧导航栏图标、logo
- 在 Activity 中进行设置，如下所示：
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);
}
image
2. 设置右侧 menu 菜单
- 第一步：右键点击 res 文件夹，创建 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/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 方法，填充布局：
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}
- 第三步：重写 Activity 中的 onOptionsItemSelected 方法，响应 menu 菜单的点击事件
@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 中添加以下代码：
<!--无标题栏***浅色背景主题-->
<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
<?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("");
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
- 第一步：布局文件设置如下：
<?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
<?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 如下所示：
<?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 中的操作：
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)
<!--设置状态栏为透明的-->
<item name="android:windowTranslucentStatus">true</item>
或者在 activity 中添加如下代码
//设置透明状态栏
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 中添加这么一条属性
//因为状态栏的高度是 25dp
android:paddingTop="25dp"
-
在 API 19 上显示为：
image -
在 API 21 上显示为：
image
