Android 5.0 以上Toolbar上添加按钮和菜单

2019-01-15  本文已影响0人  大川的川

1. menu_main.xml的文件内容:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_setting1"
        android:orderInCategory="100"
        android:title="菜单1"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_setting2"
        android:title="菜单2"
        app:showAsAction="never"/>
    <item
        android:id="@+id/action_setting3"
        //android:icon="@drawable/shop_car"
        android:orderInCategory="90"
        android:title="菜单3"
        app:showAsAction="ifRoom"/>
</menu>
app:showAsAction的属性值:
alaways:这个值会使菜单项一直显示在ActionBar上。
ifRoom:     如果有足够的空间,这个值会使菜单显示在ActionBar上。
never:       这个值菜单永远不会出现在ActionBar是。
withText:   这个值使菜单和它的图标,菜单文本一起显示。
android:orderInCategory 设置优先级,值越大优先级越低(菜单中会根据值排序)
菜单2:会显示在菜单1的上方,因为android:orderInCategory的优先级
菜单3:会显示在Toolbar的上面,不会隐藏在菜单按钮中。

2.MainActivity.java的代码实现,主要实现2个重写函数

onCreateOptionsMenu()实现绑定menu菜单
onOptionsItemSelected()实现点击事件

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            Toast.makeText(this,"这里是菜单1",Toast.LENGTH_SHORT).show();
        }else if(id == R.id.history){
            Toast.makeText(this,"这里是菜单2",Toast.LENGTH_SHORT).show();
        }else{
            Toast.makeText(this,"这里是菜单3",Toast.LENGTH_SHORT).show();
        }
        return super.onOptionsItemSelected(item);
    }
菜单3显示到了toolbar上.gif

3.可能有人会想,如果我想改变Toolbar自带的图标(返回和菜单),很好,那我们就试着改变

改变“返回”图标
<android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:titleTextColor="@color/white"
                app:navigationIcon="@drawable/yn"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"/>

app:navigationIcon="@drawable/yn",就是我们改变“返回”键的图标

改变“菜单”内容的图标
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_setting1"
        android:orderInCategory="100"
        android:icon="@drawable/shop_car"
        android:title="菜单1"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_setting2"
        android:icon="@drawable/shop_car_empty"
        android:title="菜单2"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_setting3"
        android:icon="@drawable/shop_car_empty"
        android:orderInCategory="90"
        android:title="菜单3"
        app:showAsAction="ifRoom"/>
</menu>

我们将menu中所有的item项修改成 app:showAsAction="ifRoom"
android:icon="@drawable/shop_car"这样,我们就看到了想要的菜单图标,如图:

菜单内容图标和显示.png
改变自带菜单三点图标的两种方式

1、toolbar.setOverflowIcon(getResources().getDrawable(android.R.drawable.ic_menu_share));
2、Toolbar控件中 使用的样式 android:theme="@style/ToolBarTheme"

<style name="ToolBarTheme" parent="@style/ThemeOverlay.AppCompat.Light">
        <item name="android:textColorSecondary">菜单内容字体颜色</item>
        <item name="android:colorBackground">菜单内容背景颜色</item>
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
        <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
    </style>
    <!--设置toolbar弹出菜单的位置-->
    <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>  <!--设置为false即可使menu位置位于toolbar之下-->
    </style>
    <!--修改toolbar弹出剩余隐藏菜单条目按钮的样式-->
    <style name="OverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">
        <item name="android:src">@android:drawable/ic_menu_share</item>
    </style>

如图:

menu.gif
上一篇下一篇

猜你喜欢

热点阅读