The overflow menu OverflowMenu in the navigation bar in Android

Toolbar series article navigation

Last time we talked about the use of Toolbar, this time we talked about the use of overflow menu. What is an overflow menu? The simple point is the collection of icons on the right side of the Toolbar. It's similar to the context menu mentioned before, but this time there is an additional showAsAction option, so let's list the optional values of this attribute first.

Placement type	Description
always	Always show the menu icon on the navigation bar
ifRoom	If there is space on the right side of the navigation bar, the item will be displayed directly on the navigation bar, and no overflow menu will be placed
never	Never display directly on the navigation bar, always in the overflow menu list
withText	If it can be displayed on the navigation bar, in addition to the icon, the text description of the item should also be displayed
collapseActionView	The operation view should be collapsed into a button, click the button to expand the operation view, mainly used for SearchView

The sample code is as follows:

First, we create a menu_overflow.xml file in the res--menu package, the code is as follows

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" >

    <item
        android:id="@+id/menu_refresh"
        android:orderInCategory="1"
        android:icon="@mipmap/ic_refresh"
        app:showAsAction="never"
        android:title="刷新"/>

    <item
        android:id="@+id/menu_about"
        android:orderInCategory="8"
        android:icon="@mipmap/ic_about"
        app:showAsAction="never"
        android:title="关于"/>
    
    <item
        android:id="@+id/menu_quit"
        android:orderInCategory="9"
        android:icon="@mipmap/ic_quit"
        app:showAsAction="never"
        android:title="退出"/>
    
    
</menu>

Then we continue to write in Activity after the Toolbar was introduced last time, adding the following code

    @Override
    public boolean onMenuOpened(int featureId, Menu menu) {
        // 显示菜单项左侧的图标
        setOverflowIconVisible(featureId, menu);
        return super.onMenuOpened(featureId, menu);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 从menu_overflow.xml中构建菜单界面布局
        getMenuInflater().inflate(R.menu.menu_overflow, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == android.R.id.home) { // 点击了工具栏左边的返回箭头
            finish();
        } else if (id == R.id.menu_refresh) { // 点击了刷新图标
            Toast.makeText(this,"刷新了",Toast.LENGTH_SHORT).show();
            return true;
        } else if (id == R.id.menu_about) { // 点击了关于菜单项
            Toast.makeText(this, "这个是工具栏的演示demo", Toast.LENGTH_LONG).show();
            return true;
        } else if (id == R.id.menu_quit) { // 点击了退出菜单项
            finish();
        }
        return super.onOptionsItemSelected(item);
    }

    // 显示OverflowMenu的Icon
    public static void setOverflowIconVisible(int featureId, Menu menu) {
        // ActionBar的featureId是8，Toolbar的featureId是108
        if (featureId % 100 == Window.FEATURE_ACTION_BAR && menu != null) {
            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
                try {
                    // setOptionalIconsVisible是个隐藏方法，需要通过反射机制调用
                    Method m = menu.getClass().getDeclaredMethod(
                            "setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    }

In this way, we can write the overflow menu, and click events are responded to in the onOptionsItemSelected method.

The overflow menu OverflowMenu in the navigation bar in Android

Guess you like