前言:本文的重头戏在第4部分,主要讲解新手接触Toolbar时遇到的困惑和如何随心所欲地定制Toolbar,例如,
. 如何正确地使用Toolbar
. xml中设置属性无效
. 导航按钮的间距问题
. 自定义标题文字的大小和颜色
. 自定义ActoinView的文字大小和颜色
. 自定义溢出菜单的弹出窗口的背景、弹出位置
. 标题居中
...
1.Toolbar的组成
Toolbar是Android5.0(API 21)引入的,取代之前的ActionBar,它的本质是一个View,使用起来更加灵活,功能也更加强大。Toolbar的组成如下:
①为Toolbar,继承ViewGroup,是个普通的容器。
②为导航按钮,类型为ImageButton,可设置点击事件,用于返回上个页面或者滑出侧滑菜单。
xml属性:app:navigationIcon 对应方法:setNavigationIcon(Drawable d) ,setNavigationIcon(int resId)
③为Logo展示图,类型为ImageView,不响应事件,仅仅作为展示。
xml属性:app:logo 对应方法:setLogo(Drawable d) ,setLogo(int resId)
④为主标题,类型为TextView
xml属性:app:title 对应方法:setTitle(CharSequence title),setTitle(int resId)
⑤为副标题,类型为TextView
xml属性:app:subtitle 对应方法:setSubtitle(CharSequence title),setSubtitle(int resId)
⑥为普通子View,标题和ActionMenuView之间是留给我们添加子View的区域
⑦为ActionMenuView,负责管理选项菜单
2.在布局文件中使用Toolbar
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical"
tools:context="coder.zzq.toolbardemo.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:navigationIcon="@drawable/nav_icon"
app:logo="@drawable/logo_icon"
app:title="主标题"
app:subtitle="副标题">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:padding="4dp"
android:text="普通子View"
android:id="@+id/free_child"
android:layout_gravity="center"
android:background="#ffffff"/>
</android.support.v7.widget.Toolbar>
</LinearLayout>
Toolbar的高度我们使用当前主题下ActionBar的高度,Toolbar默认没有背景,通常使用@color/colorPrimary
3.在代码中处理Toolbar
//像获取普通控件那样获取Toolbar
mToolbar = (Toolbar) findViewById(R.id.toolbar);
//以下四个方法分别用来设置导航按钮、Logo、主标题和副标题
//如果xml文件中没有设置这些属性或者想覆盖xml文件中设置的值可调用这些方法
mToolbar.setNavigationIcon(R.drawable.nav_icon);
mToolbar.setLogo(R.drawable.logo_icon);
mToolbar.setTitle("主标题");
mToolbar.setSubtitle("副标题");
//设置导航按钮的点击事件
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "点击了导航按钮!", Toast.LENGTH_SHORT).show();
}
});
//生成选项菜单
mToolbar.inflateMenu(R.menu.action_menu_main);
//设置选项菜单的菜单项的点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
Toast.makeText(MainActivity.this, "点击了菜单项" + item.getTitle(), Toast.LENGTH_SHORT).show();
return true;
}
});
//获取选项菜单,可增加,减少菜单项
Menu menu = mToolbar.getMenu();
menu.add("测试菜单项");
menu.removeItem(R.id.item_04);
//设置溢出菜单的icon,显示、隐藏溢出菜单弹出的窗口
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this,android.R.drawable.ic_menu_more));
mToolbar.showOverflowMenu();
mToolbar.dismissPopupMenus();
选项菜单如下:
<?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:title="item_01"
android:id="@+id/item_01"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always"/>
<item android:title="item_02"
android:id="@+id/item_02"
/>
<item android:title="item_03"
android:id="@+id/item_03"/>
<item android:title="item_04"
android:id="@+id/item_04"/>
</menu>
看一下运行效果:
4.解决Toolbar中的困惑以及定制Toolbar
①如何正确地使用Toolbar
Toolbar是Android5.0(API 21)引入的,为了兼容低版本,我们不要使用android.widget.Toolbar,而是android.support.v7.widget.Toolbar。v7库最低兼容API 7,咱们一般的应用兼容到API 15足够,即便是开发第三方SDK,一般也只兼容到API 10,所以我们完全不用担心低版本的兼容问题。
Toolbar也可以如此使用,转化成ActionBar
setSupportActionBar(mToolbar);
这样一来,选项菜单就得按照之前ActionBar的方式设置,在Activity中重写下列方法,
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.action_menu_main,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
Toast.makeText(MainActivity.this, "点击了菜单项" + item.getTitle(), Toast.LENGTH_SHORT).show();
return true;
}
Toolbar的出现就是为了取代ActionBar,所以我们强烈建议不要按上述方式使用Toolbar,将其与ActionBar纠缠在一起。Toolbar无论在灵活上、功能上都把AcionBar甩好几条街。交织在一起,使用不当的话,反而引入稀奇古怪的Bug,真是得不偿失。
②.xml中设置属性无效
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:navigationIcon="@drawable/nav_icon"
android:logo="@drawable/logo_icon"
android:title="主标题"
android:subtitle="副标题"/>
上面的设置中,id,layout_width,layout_height,background有效,而后四个属性无效。解决办法是将后四个属性的命名空间改成app。
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:navigationIcon="@drawable/nav_icon"
app:logo="@drawable/logo_icon"
app:title="主标题"
app:subtitle="副标题"/>
这是为什么?
前四个属性是非兼容库中SDK本身就有的属性,他们的命名空间是android,而后四个属性是Toolbar的专有属性,我们使用的是支持库中的Toolbar,所以要用自定义命名空间,所以需要使用app。
③导航按钮的左右间距问题
Toolbar的布局规则:默认状况下,上下左右的内边距皆为0,导航按钮和选项菜单分别紧靠Toolbar的左右两端,其他内容插入他们二者之间。
我们去主题中看一下导航按钮的默认样式,
<style name="Base.Widget.AppCompat.Toolbar.Button.Navigation" parent="android:Widget">
<item name="android:minWidth">56dp</item>
<item name="android:scaleType">center</item>
</style>
显示导航图标的ImageButton本身是紧靠Toolbar左边缘,无外边距的,不过它的最小宽度是56dp,缩放类型为只居中不缩放,所以在视觉效果上,跟Toolbar边缘有一定距离。有的时候这种距离并不合适,我们可以这样改变它。
第一步,自定义一个样式
<style name="toolbar_nav_button" parent="Widget.AppCompat.Toolbar.Button.Navigation">
<item name="android:minWidth">0dp</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
</style>
第二步,在主题中指定toolbarNavigationButtonStyle使用上面定义的样式
<style name="AppTheme" 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>
<item name="toolbarNavigationButtonStyle">@style/toolbar_nav_button</item>
</style>
我们把ImageButton的最小宽度设为0。如果美工切给你的图本身周边有空白的透明区域,你可以把左右内边距设置为0或其他合适的值进行调整。如果没有,设置为16dp即可。
不要通过给ImageButton设置外边距的方式形成间距,虽然视觉效果一样,但是导航按钮是响应用户点击的,内边距依然是View的一部分,依然在响应触碰的范围内,这样用户的体验较好,避免图标过小时,用户“不易”触发点击事件。
其他内容插入导航按钮和选项菜单之间时,受四个xml属性的影响:contentInsetStart、contentInsetStartWithNavigation、contentInsetEnd、contentInsetEndWithActions;
<style name="Base.Widget.AppCompat.Toolbar" parent="android:Widget">
<item name="contentInsetStart">16dp</item>
<item name="contentInsetStartWithNavigation">72dp</item>
</style>
contentInsetStart默认值为16dp,contentInsetStartWithNavigation默认值为72dp,其他两个属性的默认值为0。
导航按钮存在,内容插入的左间距取contentInsetStart和contentInsetStartWithNavigation的最大值,否则取contentInsetStart的值。
也就是说contentInsetStartWithNavigation只在导航按钮存在时有效,contentInsetStart无论是否存在都有效。
同理,选项菜单存在,内容插入的右间距取contentInsetEnd和contentInsetEndWithActions的最大值,否则取contentInsetEnd的值。
也就是说,contentInsetEndWithActions只在选项菜单存在时有效,contentInsetEnd无论是否存在都有效。
所以,如果改变导航按钮右间距,只需如此设置,
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:navigationIcon="@drawable/nav_icon"
app:logo="@drawable/logo_icon"
app:title="主标题"
app:subtitle="副标题"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
/>
因为前面我们已经给导航按钮设置了16dp的右内边距,所以这里设为0dp就可以了。
④.标题文字的大小和颜色
以主标题为例,如果仅需改变字体颜色,可以通过app:titleTextColor="#ffffff"设置。如果需要改变大小,自定义一个样式,
<style name="toolbar_title_style">
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">20sp</item>
</style>
然后设置app:titleTextAppearance="@style/toolbar_title_style"。倘若app:titleTextColor与app:titleTextAppearance中均指定了字体颜色,前者会覆盖后者。另外,主题中title上下左右均有4pd的外边距,可通过app:titleMargin,app:titleMarginStart,app:titleMarginEnd,app:titleMarginTop,app:titleMarginBottom来改变。主题中的默认值如下,
<style name="Base.Widget.AppCompat.Toolbar" parent="android:Widget">
<item name="titleMargin">4dp</item>
</style>
⑤.定制Toolbar选项菜单项
选项菜单项在Toolbar上显示时,有可能是图标,也有可能是文字,我们可以自定义他们的字体大小,颜色以及他们之间的间距。先看看它的默认样式,
<style name="Base.Widget.AppCompat.ActionButton" parent="RtlUnderlay.Widget.AppCompat.ActionButton">
<item name="android:minWidth">48dp</item>
<item name="android:minHeight">48dp</item>
<item name="android:scaleType">center</item>
<item name="android:gravity">center</item>
<item name="android:maxLines">2</item>
<item name="textAllCaps">true</item>
</style>
<style name="RtlUnderlay.Widget.AppCompat.ActionButton" parent="android:Widget">
<item name="android:paddingLeft">12dp</item>
<item name="android:paddingRight">12dp</item>
</style>
values-v21
<style name="Widget.Material.ActionButton">
<item name="paddingStart">12dp</item>
<item name="paddingEnd">12dp</item>
</style>
自定义一个样式,
<style name="toolbar_action_button_style" parent="@style/Widget.AppCompat.ActionButton">
<item name="android:textAllCaps">false</item>
<item name="android:textSize">16sp</item>
<item name="android:minWidth">0dp</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
<item name="android:paddingStart">5dp</item>
<item name="android:paddingEnd">5dp</item>
</style>
注意,在API 21以下,资源文件定义了paddingLeft和paddingRight,API 21及以上定义了paddingStart和paddingEnd,这里为了适配同时指定了四个属性。字体颜色在这里指定是无效的,需在主题中指定android:actionMenuTextColor的值。
在主题中使用该样式,并指定android:actionMenuTextColor的值,
<style name="AppTheme" 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>
<item name="toolbarNavigationButtonStyle">@style/toolbar_nav_button</item>
<item name="android:actionButtonStyle">@style/toolbar_action_button_style</item>
<item name="android:actionMenuTextColor">#ffffff</item>
</style>
⑥.溢出按钮的样式
溢出按钮的样式,通过在主题中设置android:actionOverflowButtonStyle来指定,不过一般我们不会自定义它的样式,另外,通过代码可以替换溢出按钮的图标,setOverflowIcon(Drawable d)
<style name="AppTheme" 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>
<item name="toolbarNavigationButtonStyle">@style/toolbar_nav_button</item>
<item name="android:actionButtonStyle">@style/toolbar_action_button_style</item>
<item name="android:actionMenuTextColor">#ffffff</item>
<item name="android:actionOverflowButtonStyle">@style/toolbar_overflow_button_style</item>
</style>
<style name="toolbar_overflow_button_style" parent="Widget.AppCompat.Light.ActionButton.Overflow">
</style>
⑦.自定义弹出的溢出菜单的背景、弹出位置
看看默认样式,
<style name="Base.Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">true</item>
<item name="android:dropDownHorizontalOffset">-4dip</item>
</style>
自定义样式,
<style name="toolbar_action_menu_overflow" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<!-- 是否覆盖锚点,为true则盖住Toolbar -->
<item name="overlapAnchor">false</item>
<!-- 弹出层水平方向上的偏移,即距离屏幕左边的距离,负值会导致右边出现空隙 -->
<item name="android:dropDownHorizontalOffset">-2dp</item>
<!-- 弹出层垂直方向上的偏移,即在竖直方向上距离Toolbar的距离,值为负则会盖住Toolbar -->
<item name="android:dropDownVerticalOffset">4dp</item>
<!-- 弹出层背景颜色 -->
<item name="android:popupBackground">@color/colorPrimary</item>
</style>
在主题中指定使用该样式,
<style name="AppTheme" 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>
<item name="toolbarNavigationButtonStyle">@style/toolbar_nav_button</item>
<item name="android:actionButtonStyle">@style/toolbar_action_button_style</item>
<item name="android:actionMenuTextColor">#ffffff</item>
<item name="android:actionOverflowButtonStyle">@style/toolbar_overflow_button_style</item>
<item name="actionOverflowMenuStyle">@style/toolbar_action_menu_overflow</item>
</style>
字体的颜色和大小通过Toolbar的xml属性app:popupTheme="@style/toolbar_pop_theme"指定
<style name="toolbar_pop_theme">
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">16sp</item>
</style>
⑧标题居中问题
很少有产品经理设计标题居中的了,但如果有,可以如此解决,
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:navigationIcon="@drawable/nav_icon"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标题"
android:textColor="#ffffff"
android:textSize="20sp"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
效果如下,
5.最后送上所有源码
package coder.zzq.toolbardemo;
import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
import programmer.zzq.toolbardemo.R;
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//像获取普通控件那样获取Toolbar
mToolbar = (Toolbar) findViewById(R.id.toolbar);
//以下四个方法分别用来设置导航按钮、Logo、主标题和副标题
//如果xml文件中没有设置这些属性或者想覆盖xml文件中设置的值可调用这些方法
mToolbar.setNavigationIcon(R.drawable.nav_icon);
mToolbar.setLogo(R.drawable.logo_icon);
mToolbar.setTitle("主标题");
mToolbar.setSubtitle("副标题");
//设置导航按钮的点击事件
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "点击了导航按钮!", Toast.LENGTH_SHORT).show();
}
});
//生成选项菜单
mToolbar.inflateMenu(R.menu.action_menu_main);
//设置选项菜单的菜单项的点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
Toast.makeText(MainActivity.this, "点击了菜单项" + item.getTitle(), Toast.LENGTH_SHORT).show();
return true;
}
});
//获取选项菜单,可增加,减少菜单项
Menu menu = mToolbar.getMenu();
menu.add("测试菜单项");
menu.removeItem(R.id.item_04);
//设置溢出菜单的icon,显示、隐藏溢出菜单弹出的窗口
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this,android.R.drawable.ic_menu_more));
mToolbar.showOverflowMenu();
mToolbar.dismissPopupMenus();
}
}
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical"
tools:context="coder.zzq.toolbardemo.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:navigationIcon="@drawable/nav_icon"
app:logo="@drawable/logo_icon"
app:title="主标题"
app:subtitle="副标题"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:titleTextAppearance="@style/toolbar_title_style"
app:subtitleTextAppearance="@style/toolbar_subtitle_style"
app:popupTheme="@style/toolbar_pop_theme"
/>
</LinearLayout>
菜单资源
<?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/item_01"
android:title="item_01"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always"/>
<item
android:id="@+id/item_02"
android:title="item_02"
app:showAsAction="always"
/>
<item
android:id="@+id/item_03"
android:title="item_03"/>
<item
android:id="@+id/item_04"
android:title="item_04"/>
</menu>
样式资源
<resources>
<!-- Base application theme. -->
<style name="AppTheme" 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>
<item name="toolbarNavigationButtonStyle">@style/toolbar_nav_button</item>
<item name="android:actionButtonStyle">@style/toolbar_action_button_style</item>
<item name="android:actionMenuTextColor">#ffffff</item>
<item name="android:actionOverflowButtonStyle">@style/toolbar_overflow_button_style</item>
<item name="actionOverflowMenuStyle">@style/toolbar_action_menu_overflow</item>
</style>
<style name="toolbar_nav_button" parent="@style/Widget.AppCompat.Toolbar.Button.Navigation">
<item name="android:minWidth">0dp</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
</style>
<style name="toolbar_title_style" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">20sp</item>
</style>
<style name="toolbar_subtitle_style" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">16sp</item>
</style>
<style name="toolbar_action_button_style" parent="@style/Widget.AppCompat.ActionButton">
<item name="android:textAllCaps">false</item>
<item name="android:textSize">16sp</item>
<item name="android:minWidth">0dp</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
<item name="android:paddingStart">5dp</item>
<item name="android:paddingEnd">5dp</item>
</style>
<style name="toolbar_overflow_button_style" parent="Widget.AppCompat.Light.ActionButton.Overflow">
</style>
<style name="toolbar_action_menu_overflow" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<!-- 是否覆盖锚点,为true则盖住Toolbar -->
<item name="overlapAnchor">false</item>
<!-- 弹出层水平方向上的偏移,即距离屏幕左边的距离,负值会导致右边出现空隙 -->
<item name="android:dropDownHorizontalOffset">-2dp</item>
<!-- 弹出层垂直方向上的偏移,即在竖直方向上距离Toolbar的距离,值为负则会盖住Toolbar -->
<item name="android:dropDownVerticalOffset">4dp</item>
<!-- 弹出层背景颜色 -->
<item name="android:popupBackground">@color/colorPrimary</item>
</style>
<style name="toolbar_pop_theme">
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">16sp</item>
</style>
</resources>
最终的运行效果:
后期追加:
有的时候,我们想要显示溢出菜单项的图标,就像微信这样:
通过一行代码即可实现:
((MenuBuilder) mToolbar.getMenu()).setOptionalIconsVisible(true);
效果图:
布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="coder.zzq.toolbardemo.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:titleTextColor="#ffffff"
app:title="显示溢出菜单项的图标"
app:popupTheme="@style/toolbar_pop_theme"/>
</LinearLayout>
菜单资源:
<?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/item_01"
android:title="item_01"
android:icon="@android:drawable/ic_menu_add"
/>
<item android:id="@+id/item_02"
android:title="item_02"
android:icon="@android:drawable/ic_menu_call"
/>
<item android:id="@+id/item_03"
android:title="item_03"
android:icon="@android:drawable/ic_menu_camera"
/>
<item android:id="@+id/item_04"
android:title="item_04"
android:icon="@android:drawable/ic_menu_help"
/>
</menu>
主题设置:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" 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>
<item name="actionOverflowMenuStyle">@style/action_overflow_menu</item>
</style>
<style name="action_overflow_menu" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
<!--设置溢出菜单背景-->
<item name="android:popupBackground">@color/colorPrimary</item>
<!--不覆盖Toolbar-->
<item name="overlapAnchor">false</item>
<item name="android:dropDownVerticalOffset">4dp</item>
</style>
<style name="toolbar_pop_theme">
<!--文字颜色-->
<item name="android:textColor">#ffffff</item>
<!--文字大小-->
<item name="android:textSize">18sp</item>
<!--文字风格-->
<item name="android:textStyle">bold|italic</item>
<!--图标与文字的间距-->
<item name="android:drawablePadding">10dp</item>
</style>
</resources>