目录

toolbarstyle配置toolbar布局 NavigationIconNavigationIcon常用方法具体使用 titleMenumenu的创建menu点击事件menu不同状态时操作menu菜单图标+标题同时显示fragment使用menu菜单 style的配置style的基本配置app:theme & app:popupTheme修改toolbar的字体修改menu的字体颜色修改menu显示位置

toolbar

style配置

<style name="toolbar"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:minHeight">?attr/actionBarSize</item> <item name="android:background">@color/colorPrimary</item> <item name="android:fitsSystemWindows">true</item> </style> <style name="base_toolbar" parent="toolbar"/></style> <!-- ToolBar样式.--> <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light"> <!--修改toolbar的Title(大标题)颜色--> <item name="android:textColorPrimary">@android:color/holo_red_dark</item> <!--修改toolbar的subtitle(小标题)颜色--> <item name="subtitleTextColor">@android:color/holo_red_dark</item> <!--修改toolbar的图标颜色.--> <item name="colorControlNormal">@android:color/holo_red_dark</item> </style> <!-- ToolBar菜单样式.--> <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light"> <!--设置背景--> <item name="android:background">@android:color/white</item> <!--设置字体颜色--> <item name="android:textColor">@android:color/holo_red_dark</item> <!--设置不覆盖锚点--> <item name="overlapAnchor">false</item> </style>

toolbar布局

<android.support.v7.widget.Toolbar android:id="@+id/tl_costom" style="@style/base_toolbar" app:theme="@style/toolbar_theme" app:popupTheme="@style/popup_theme" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> </android.support.v7.widget.Toolbar>

NavigationIcon

NavigationIcon常用方法

//设置是否添加显示NavigationIcon. void setDisplayHomeAsUpEnabled(boolean showHomeAsUp); //设置NavigationIcon的icon.可以是Drawable ,也可以是ResId void setNavigationIcon(@Nullable Drawable icon); void setNavigationIcon(@DrawableRes int resId) //设置NavigationIcon的点击监听. void setNavigationOnClickListener(OnClickListener listener);

具体使用

Toolbar mToolbar = (Toolbar)findViewById(R.id.toolbar); //设置Toolbar setSupportActionBar(mToolbar); //显示NavigationIcon,这个方法是ActionBar的方法.Toolbar没有这个方法. getSupportActionBar().setDisplayHomeAsUpEnabled(true); //设置icon mToolbar.setNavigationIcon(drawable); //设置监听.必须在setSupportActionBar()之后调用 mToolbar.setNavigationOnClickListener(clickListener);

注意： 必须先 setSupportActionBar(mToolbar). setDisplayHomeAsUpEnabled(true)是ActionBar的方法. setNavigationOnClickListener()必须要在setSupportActionBar()之后调用才能生效. 因为setSupportActionBar(Toolbar),会将Toolbar转换成Acitionbar.点击监听也会重新设置.

title

//是否显示 getSupportActionBar().setDisplayShowTitleEnabled(boolean showTitle); //设置title. getSupportActionBar().setTitle(title); //设置title. Toolbar.setTitle(title); //设置Margin边距. Toolbar.setTitleMargin(); //设置字体. Toolbar.setTitleTextAppearance(); //设置字的颜色 Toolbar.setTitleTextColor(int color);

Menu

menu的创建

@Override public boolean onCreateOptionsMenu(Menu menu) { //写一个menu的资源文件.然后创建就行了. getMenuInflater().inflate(R.menu.menu,menu); return super.onCreateOptionsMenu(menu); } <menu 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" tools:context="com.example.acctionbaractivitydemo.MainActivity"> <item android:id="@+id/menu1" android:icon="@mipmap/ic_launcher_菜单选项的图标" android:title="菜单选项的名字" app:showAsAction="withText|ifRoom"/> <item android:id="@+id/menu2" android:icon="@mipmap/ic_launcher" android:title="哈哈" app:showAsAction="withText"/> <item android:id="@+id/menu3" android:icon="@mipmap/ic_launcher" android:title="呵呵" app:showAsAction="withText"/> </menu> <!-- showAsAction这个属性的值有： 1、always：使菜单项一直显示在ToolBar上。 2、ifRoom：如果有足够的空间，这个值会使菜单项显示在ToolBar上。 3、never：使菜单项永远都不出现在ToolBar上,在…的子项中显示。 4、withText：使菜单项和它的图标，菜单文本一起显示。 -->

menu点击事件

/** * 菜单项被点击时调用，也就是菜单项的监听方法。 * 通过这几个方法，可以得知，对于Activity，同一时间只能显示和监听一个Menu 对象. */ @Override public boolean onOptionsItemSelected(MenuItem item) { return super.onOptionsItemSelected(item); } /** * 通过设置toolbar进行监听,在setSupportActionBar(Toolbar toolbar)之前设置可能会失效. */ Toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { return false; } });

menu不同状态时操作

/** * 每次菜单被关闭时调用. * 菜单被关闭有三种情形: * 1.展开menu的按钮被再次点击 * 2.back按钮被点击 * 3.用户选择了某一个菜单项 */ @Override public void onOptionsMenuClosed(Menu menu) { super.onOptionsMenuClosed(menu); } /** * 在onCreateOptionsMenu执行后，菜单被显示前调用; * 如果菜单已经被创建，则在菜单显示前被调用; * 同样的，返回true则显示该menu,false 则不显示; * 可以通过此方法动态的改变菜单的状态，比如加载不同的菜单等 */ @Override public boolean onPrepareOptionsMenu(Menu menu) { return super.onPrepareOptionsMenu(menu); } /** * 显示menu的icon,通过反射,设置Menu的icon显示. * @param view * @param menu * @return */ @Override protected boolean onPrepareOptionsPanel(View view, Menu menu) { if (menu != null) { if (menu.getClass().getSimpleName().equals("MenuBuilder")) { try{ Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE); m.setAccessible(true); m.invoke(menu, true); } catch (Exception e) { Log.e(getClass().getSimpleName(), "onMenuOpened...unable to set icons for overflow menu", e); } } } return super.onPrepareOptionsPanel(view, menu); }

menu菜单图标+标题同时显示

在menu布局文件中指定单独的布局，app:actionLayout="@layout/broad_menu_filtrate" 具体的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/item_filtrate" android:icon="@drawable/ic_search_white_36dp" android:title="筛选" app:showAsAction="ifRoom" app:actionLayout="@layout/broad_menu_filtrate"> </item> <item android:id="@+id/item_add" android:icon="@drawable/ic_add_white" android:title="添加广播" app:showAsAction="always|withText"> <menu> <item android:id="@+id/item_add_1" android:title="添加应急广播" app:showAsAction="never" /> <item android:id="@+id/item_add_2" android:title="添加日常广播" android:actionLayout="@layout/toolbar_text_view" app:showAsAction="never" /> <item android:id="@+id/item_add_3" android:title="添加演练广播" app:showAsAction="never" /> <item android:id="@+id/item_add_4" android:title="创建实时广播" app:showAsAction="never" /> </menu> </item> </menu> <!-- broad_menu_filtrate.xml布局文件 --> <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="@dimen/dp_10" android:paddingRight="@dimen/dp_10" android:gravity="center" android:text="筛选" android:drawableLeft="@drawable/ic_search_white_36dp" android:textColor="@color/c_ffffff" android:textSize="@dimen/dp_18" android:clickable="true" />

在onCreateOptionsMenu()和onOptionsItemSelected()方法创建菜单，注册菜单选项点击事件

private void initToolBar() { setHasOptionsMenu(true); // 设置支持option menu，否则导航菜单item注册的点击事件无效 ((HostActivity) getActivity()).setSupportActionBar(toolbar); // 支持工具栏的菜单，它填充了活动的选项菜单和导航按钮 toolbar.setNavigationOnClickListener(v -> getHostActivity().openRightLayout()); toolbar.inflateMenu(R.menu.broad_toolbar_menu); toolbar.setOnMenuItemClickListener(item -> { switch (item.getItemId()) { case R.id.item_add_1: startCreateDialog(Config.EmergenciesFragmentCode); break; case R.id.item_add_2: startCreateDialog(Config.EverydayFragmentCode); break; ... } return false; }); } @Override public boolean onOptionsItemSelected(MenuItem item) { new BroadFiltrationDialog(mContext, () -> { requestJson = getRequestJson(); requestData(requestJson); refreshLayout.autoRefresh(); }); return false; } @Override public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { inflater.inflate(R.menu.broad_toolbar_menu, menu); final MenuItem filtrateItem = menu.findItem(R.id.item_filtrate); filtrateItem.getActionView().setOnClickListener(v1 -> { onOptionsItemSelected(filtrateItem); }); super.onCreateOptionsMenu(menu, inflater); }

fragment使用menu菜单

但如果是viewpager+多frgament这种.会造成错乱.其他的frgament也会有menu的style配置无效 直接代码设置示例如下，以下代码在setSupportActionBar()之前调用。

//设置popupstyle.比如是否覆盖描点,背景,字体颜色什么的.必须在inflateMenu()之前设置 mToolbar.setPopupTheme(R.style.popup_theme); //用Toolbar创建menu mToolbar.inflateMenu(R.menu.main_home_menu); //拿到Menu Menu menu = mToolbar.getMenu(); //下面的这段代码是为了让menu菜单折叠样式时,展开能显示icon图标.不然icon图标不会显示. if (menu != null) { if (menu.getClass().getSimpleName().equals("MenuBuilder")) { try { MenuBuilder menuBuilder = (MenuBuilder) menu; menuBuilder.setOptionalIconsVisible(true); } catch (Exception e) { e.printStackTrace(); } } }

style的配置

style的基本配置

<style name="toolbar"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> //设置toolbar的最小高度.这样设置的意义,就是解决适配的问题,标准md高度. <item name="android:minHeight">?attr/actionBarSize</item> <item name="android:background">@color/colorPrimary</item> //设置沉浸式, <item name="android:fitsSystemWindows">true</item> </style> <style name="base_toolbar" parent="toolbar"></style>

style的使用

style="@style/base_toolbar"

app:theme & app:popupTheme

app:theme ------------------toolbar的主题 app:popupTheme------------弹出的menu的主题.

这两种style都继承的是ThemeOverlay.AppCompat

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark"> <item name="android:colorBackground">#1B2F36</item> <!--这里可以改变菜单的背景色--> <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item><!--新增一个item，用于控制menu--> <item name="android:textColor">@android:color/white</item> <item name="android:textSize">@dimen/dp_18</item> </style> <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light"> <!--修改toolbar的Title(大标题)颜色--> <item name="android:textColorPrimary">@android:color/white</item> <!--修改toolbar的subtitle(小标题)颜色--> <item name="subtitleTextColor">@android:color/white</item> <!--修改toolbar的图标颜色.--> <item name="colorControlNormal">@android:color/white</item> <item name="android:textColor">@android:color/white</item> <item name="android:textSize">@dimen/dp_18</item> </style>

如果使用的是Dark系列的主题,那么字体就是白色的.menu菜单背景是黑色 如果使用的是Light系列的主题,那么字体和图标就是黑色的.menu菜单背景是白色

修改toolbar的字体

<!-- ToolBar样式 .--> <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light"> <!--修改toolbar的Title颜色.--> <item name="android:textColorPrimary">@android:color/holo_red_dark</item> <!--修改toolbar的subtitle(小标题)颜色.--> <item name="subtitleTextColor">@android:color/holo_red_dark</item> <!-- 修改Toolbar的menu折叠图标和NavigationIcon的颜色 --> <item name="android:colorControlNormal">@android:color/holo_red_dark</item> <item name="colorControlNormal">@android:color/holo_red_dark</item> </style>

修改menu的字体颜色

<!-- ToolBar菜单样式.--> <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light"> <!--设置背景--> <item name="android:background">@android:color/white</item> <!--设置字体颜色--> <item name="android:textColor">@android:color/holo_red_dark</item> </style>

修改menu显示位置

默认显示位置 可以直接在app:popupTheme的style里面设置overlapAnchor这个属性。但是，一定是要在app:popupTheme的style里面设置，而不是app:theme的style里面设置。

<!--设置不覆盖锚点--> <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light"> <item name="overlapAnchor">false</item> </style> <!-- ToolBar菜单样式.--> <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light"> <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> </style> <style name="OverflowMenuStyle"parent="Widget.AppCompat.Light.PopupMenu.Overflow"> <item name="overlapAnchor">false</item> </style>

参考文章： Toolbar设置详解----掉坑总结 动态更新Toolbar Menu以及Menu中同时显示文字和图标