ToolBar详解和menu结合使用及menu图标不显示问题
2018-12-29 本文已影响50人
wuchao226
Toolbar 引入使用
xml布局中加入
<color name="weixin_bg">#434343</color>
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/weixin_bg"
android:theme="@style/AppTheme.ToolBar"
app:title="@string/app_name"/>
主题改为隐藏ActionBar:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/weixin_bg</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
Activity代码中加入：
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ToolBar 样式：
<style name="AppTheme.ToolBar" parent="AppTheme">
<!--ToolBar 字体颜色改为白色 -->
<item name="titleTextColor">@android:color/white</item>
<!-- 溢出菜单图标颜色 -->
<item name="colorControlNormal">@android:color/white</item>
<!-- 右侧溢出菜单图标自定义 -->
<item name="actionOverflowButtonStyle">@style/ActionButton.Overflow</item>
<!-- 是否覆盖锚点，默认为true，即盖住 Toolbar -->
<item name="overlapAnchor">false</item>
<!-- 弹出层背景颜色 -->
<item name="android:colorBackground">@color/weixin_bg</item>
<!-- 设置弹出菜单文字颜色 -->
<item name="android:textColor">@android:color/white</item>
<!-- 弹出层垂直方向上的偏移，即在竖直方向上距离Toolbar的距离，值为负则会盖住Toolbar -->
<item name="android:dropDownVerticalOffset">0dp</item>
<!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 -->
<item name="android:dropDownHorizontalOffset">0dp</item>
</style>
<!-- 右侧溢出菜单图标自定义 -->
<style name="ActionButton.Overflow" parent="android:Widget.ActionButton.Overflow">
<item name="android:src">@drawable/actionbar_add_icon</item>
</style>
解决菜单Menu添加Icon无效问题，让菜单同时显示图标和文字
在使用过程中发现溢出菜单menu 只显示文字不显示图标：使用反射，要重写一个onMenuOpened（）方法即可解决。
/**
* 利用反射机制调用MenuBuilder的setOptionalIconsVisible方法设置mOptionalIconsVisible为true，
* 给菜单设置图标时才可见 让菜单同时显示图标和文字
*/
@Override
public boolean onMenuOpened(int featureId, Menu menu) {
if (menu != null) {
if (menu.getClass().getSimpleName().equalsIgnoreCase("MenuBuilder")) {
try {
Method method = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
method.setAccessible(true);
method.invoke(menu, true);
} catch (Exception e) {
e.printStackTrace();
}
}
}
return super.onMenuOpened(featureId, menu);
}
ToolBar 属性设置
添加背景色:
<color name="weixin_bg">#434343</color>
android:background="@color/weixin_bg"
基本属性设置
<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="@mipmap/title_bar_back"//左侧图标
app:subtitle="子标题"
app:subtitleTextColor="#fff" //子标题颜色
app:title="标题"
app:titleTextColor="#fff"/> //标题颜色
添加选项菜单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/action_search"
android:icon="@drawable/actionbar_search_icon"
android:title="@string/action_search"
app:actionViewClass="android.widget.SearchView"
app:showAsAction="ifRoom|collapseActionView"/>
<item
android:id="@+id/action_group_chat"
android:icon="@drawable/menu_group_chat_icon"
android:title="@string/menu_group_chat"/>
<item
android:id="@+id/action_add_friend"
android:icon="@drawable/menu_add_icon"
android:title="@string/menu_add_friend"/>
<item
android:id="@+id/action_scan"
android:icon="@drawable/men_scan_icon"
android:title="@string/menu_scan"/>
<item
android:id="@+id/action_feedback"
android:icon="@drawable/menu_feedback_icon"
android:title="@string/menu_feedback"/>
</menu>
showAsAction：属性有五个之：ifRoom、never、always、withText、collapseActionView
- ifRoom：如果有空间，就显示出来
- never：永远不会显示。只在溢出列表中显示，而且只显示标题
- always：无论是否溢出，总会显示
- withText：示意ActionBar要显示文本的标题。ActionBar会尽可能的显示这个标题，但是，如果图标有效并且受到ActionBar空间的限制，文本标题就有可能显示不全
- collapseActionView：声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。否则，这个操作视窗在默认的情况下是可见的，并且即便在用于不适用的时候，也要占还有操作栏的有效空间，一般要配合ifRoom一起使用才有效
代码中重写onCreateOptionsMenu方法加载菜单文件
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu, menu);
return super.onCreateOptionsMenu(menu);
}
左侧返回箭头
想要显示自带的返回箭头，需要去掉之前设定的属性：
app:navigationIcon="@mipmap/title_bar_back"
然后在代码中添加：
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
溢出图标颜色
<!-- 溢出菜单图标颜色-->
<item name="colorControlNormal">@android:color/white</item
自定义右侧溢出图标
<style name="AppTheme.ToolBar" parent="AppTheme">
<!--ToolBar 字体颜色改为白色 -->
<item name="titleTextColor">@android:color/white</item>
<!-- 溢出菜单图标颜色 -->
<item name="colorControlNormal">@android:color/white</item>
<!-- 右侧溢出菜单图标自定义 -->
<item name="actionOverflowButtonStyle">@style/ActionButton.Overflow</item>
</style>
<!-- 右侧溢出菜单图标自定义 -->
<style name="ActionButton.Overflow" parent="android:Widget.ActionButton.Overflow">
<item name="android:src">@drawable/actionbar_add_icon</item>
</style>
更改弹出菜单背景
<!-- toolbar弹出菜单样式背景 -->
<!-- 弹出层背景颜色 -->
<item name="android:colorBackground">@color/weixin_bg</item>
更改弹出菜单文字颜色
<!-- 设置弹出菜单文字颜色 -->
<item name="android:textColor">@android:color/white</item>
修改标题文字大小
添加配置:
app:titleTextAppearance="@style/ToolbarTitleSize"
添加style：
<!-- toolbar标题文字大小 -->
<style name="ToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">28sp</item>
</style>
