Android Menuitem 各種坑

ToolBar上添加Menu，除搜索圖標外其他的都收起來。修改ToolBar背景色為深灰色，然后才發現MenuItem里面的背景色還是原來白色。

修改顏色后，ToolBar為深灰，有搜索和菜單圖標

toolbar.png

打開菜單后

overflow.png

修改MenuItem背景顏色

原來 res/values/styles.xml 的配置

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorWeChatGray</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

修改后

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorWeChatGray</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="actionOverflowMenuStyle">@style/optionMenu</item>
    </style>

    <style name="optionMenu" parent="Widget.AppCompat.ActionBar.Overflow">
        <item name="android:popupBackground">@color/colorWeChatGray</item>
    </style>

</resources>

這樣MenuItem的背景顏色就修改了

bg_overflow.png

但這看起來明顯不對勁：

• 菜單把ToolBar的兩個圖標遮住
• 背景色改變后和文字顏色不協調

修改文字顏色

我們先處理文字的顏色，添加 android:textColor 和對應的顏色即可

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorWeChatGray</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="actionOverflowMenuStyle">@style/optionMenu</item>
        <item name="android:textColor">@color/colorWhite</item>
    </style>

    <style name="optionMenu" parent="Widget.AppCompat.ActionBar.Overflow">
        <item name="android:popupBackground">@color/colorWeChatGray</item>
    </style>

</resources>

bg_text_overflow.png

遮蔽ToolBar圖標

遮蔽圖標的問題比較好解決，

把 parent="Widget.AppCompat.ActionBar.Overflow"> 的 .Overflow 去掉

bg_text_good.png

MenuItem圖標顯示

上面的圖片中MenuItem的Icon本來是不顯示的，需要加入以下代碼。在Android 5.0手機上測試可以用，Android 4.4及之前的還不清楚。

@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);
}

 

來自：http://www.jianshu.com/p/c2973461b30e