Android自定义toolbar的menu

一、Toobar的简介
可以说Toobar是ActionBar升级版，每个活动最顶部的那个标题栏其实就是ActionBar。不过ActionBar由于其设计的原因，被限定只能位于活动的顶部，从而不能实现一些Material Design的效果，因此官方现在已经不再建议使用ActionBar了，而是推荐使用的Toolbar。
二、设置主题
1、使用Toolbar来替代ActionBar，因此需要指定一个不带ActionBar的主题，通常有Theme.AppCompat.NoActionBar和Theme.AppCompat.Light.NoActionBar这两种主题可选。其中Theme.AppCompat.NoActionBar表示深色主题，它会将界面的主体颜色设成深色，陪衬颜色设成淡色。而Theme.AppCompat.Light.NoActionBar表示淡色主题，它会将界面的主体颜色设成淡色，陪衬颜色设成深色。
2、代码

   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     <!-- Customize your theme here. -->
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
     <item name="colorAccent">@color/colorAccent</item>
   </style>

具体的toolbar自定义案例：https://gitee.com/zyd_gitee/material-design-all.git
三、自定义menu
1、在xml布局里

<!--    引用自定义app:popupTheme="@style/OverflowMenuStyle"-->
<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="0dp"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/OverflowMenuStyle"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

</androidx.appcompat.widget.Toolbar>

2.在theme.xml是添加自定义弹出]菜单样式

<!--溢出[弹出]菜单样式 parent相当于继承【可以不要parent】-->
<style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
    <!-- 是否覆盖锚点，默认为true，即盖住Toolbar -->
    <item name="overlapAnchor">false</item>
    <item name="android:dropDownWidth">wrap_content</item>
    <item name="android:paddingRight">5dp</item>
    <!-- 弹出层背景颜色 -->
    <item name="android:popupBackground">@color/white</item>
    <!-- 弹出层垂直方向上的偏移，即在竖直方向上距离Toolbar的距离，值为负则会盖住Toolbar -->
    <item name="android:dropDownVerticalOffset">5dp</item>
    <!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 -->
    <item name="android:dropDownHorizontalOffset">0dp</item>
    <!-- 设置弹出菜单文字颜色 -->
    <item name="android:textColor">@color/black</item>
</style>

3.需添加到theme.xml的自定义appTheme中,之后再添加到Toolbar的app:popupTheme中

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <!-- 加入toolbar溢出【弹出】菜单的风格 -->
    <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
</style>

4.在res目录下创建”Android resource directory”，类型选择为”menu”,名字可以使用默认名字“menu”
在新建的menu目录下创建“Menu resource file”,命名为“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/settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:showAsAction="ifRoom">

        <!-- item包含menu表示该menu是item下的子菜单 -->
        <menu>
            <!-- 将group中的菜单项放于一个组里面 -->
            <group>
                <item android:id="@+id/menu_item1"
                    android:title="登录"
                    android:icon="@drawable/ic_backup"
                    app:showAsAction="ifRoom"
                    />
                <item android:id="@+id/menu_item2"
                    android:title="注册"
                    android:icon="@drawable/ic_delete"
                    app:showAsAction="ifRoom"
                    />
                <item android:id="@+id/menu_item3"
                    android:title="设置"
                    android:icon="@drawable/batterys"
                    app:showAsAction="ifRoom"
                    />
            </group>
        </menu>
    </item>
</menu>

5.在Activity中设置toolbar和menu

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_custom_popup_menu);
    Toolbar toolbar = findViewById(R.id.toolbar);
    //主标题
    toolbar.setTitle("主标题");
    setSupportActionBar(toolbar);
    //设置标题居中
    setTitleCenter(toolbar);
}
/**
 * 创建菜单对象和加载布局
 * @param menu
 * @return
 */
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    //得到MenuInflater对象，再调用它的inflate()方法就可以给当前活动创建菜单
    getMenuInflater().inflate(R.menu.menu, menu);
    return true;
}

/**
 * 处理菜单子级点击事件
 * @param item
 * @return
 */
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.menu_item1:
            Toast.makeText(this, "点击了弹出菜单1", Toast.LENGTH_SHORT).
                    show();
            break;
        case R.id.menu_item2:
            Toast.makeText(this, "点击了弹出菜单2", Toast.LENGTH_SHORT).
                    show();
            break;
        case R.id.menu_item3:
            Toast.makeText(this, "点击了弹出菜单3", Toast.LENGTH_SHORT).
                    show();
            break;
        default:
    }
    return true;
}

效果图

1.png
本文相关代码https://gitee.com/zyd_gitee/material-design-all.git