无ActionBar时如何添加菜单？需实现类似Chrome浏览器的菜单效果

1. 布局准备（添加菜单触发按钮） #

因为没有ActionBar，需要在主布局中添加一个类似Chrome右上角的三点触发按钮，示例布局如下：

<!-- activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 其他界面元素 -->

    <ImageButton
        android:id="@+id/btn_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_margin="16dp"
        android:src="@drawable/ic_baseline_more_vert_24"
        android:background="?attr/selectableItemBackgroundBorderless"/>

</RelativeLayout>

2. 创建菜单资源文件 #

在res/menu目录下新建menu_chrome_style.xml，定义菜单选项：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_item_new_tab"
        android:title="新建标签页"/>
    <item
        android:id="@+id/menu_item_bookmarks"
        android:title="书签"/>
    <item
        android:id="@+id/menu_item_history"
        android:title="历史记录"/>
    <item
        android:id="@+id/menu_item_settings"
        android:title="设置"/>
</menu>

3. 实现右上角弹出菜单（PopupMenu） #

在Activity中绑定按钮，点击时弹出和Chrome风格一致的菜单：

Kotlin版本 #

import android.os.Bundle
import android.view.MenuItem
import android.view.View
import android.widget.ImageButton
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.PopupMenu

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        supportActionBar?.hide() // 确保隐藏ActionBar
        setContentView(R.layout.activity_main)

        val menuBtn = findViewById<ImageButton>(R.id.btn_menu)
        menuBtn.setOnClickListener { view ->
            showChromeStyleMenu(view)
        }
    }

    private fun showChromeStyleMenu(view: View) {
        val popupMenu = PopupMenu(this, view)
        popupMenu.menuInflater.inflate(R.menu.menu_chrome_style, popupMenu.menu)
        
        popupMenu.setOnMenuItemClickListener { item: MenuItem ->
            when(item.itemId) {
                R.id.menu_item_new_tab -> {
                    // 处理新建标签页逻辑
                    true
                }
                R.id.menu_item_bookmarks -> {
                    // 处理书签逻辑
                    true
                }
                R.id.menu_item_history -> {
                    // 处理历史记录逻辑
                    true
                }
                R.id.menu_item_settings -> {
                    // 处理设置逻辑
                    true
                }
                else -> false
            }
        }
        popupMenu.show()
    }
}

Java版本 #

import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.PopupMenu;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        setContentView(R.layout.activity_main);

        ImageButton menuBtn = findViewById(R.id.btn_menu);
        menuBtn.setOnClickListener(v -> showChromeStyleMenu(v));
    }

    private void showChromeStyleMenu(View view) {
        PopupMenu popupMenu = new PopupMenu(this, view);
        popupMenu.getMenuInflater().inflate(R.menu.menu_chrome_style, popupMenu.getMenu());
        
        popupMenu.setOnMenuItemClickListener(item -> {
            switch (item.getItemId()) {
                case R.id.menu_item_new_tab:
                    // 处理新建标签页逻辑
                    return true;
                case R.id.menu_item_bookmarks:
                    // 处理书签逻辑
                    return true;
                case R.id.menu_item_history:
                    // 处理历史记录逻辑
                    return true;
                case R.id.menu_item_settings:
                    // 处理设置逻辑
                    return true;
                default:
                    return false;
            }
        });
        popupMenu.show();
    }
}

4. 自定义样式（贴近Chrome菜单） #

如果需要更接近Chrome的菜单视觉效果，可以自定义PopupMenu样式：

1. 在styles.xml添加主题：

<style name="ChromePopupMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
    <item name="android:popupBackground">@drawable/rounded_menu_bg</item>
    <item name="android:textColor">@color/black</item>
    <item name="android:textSize">16sp</item>
</style>

2. 创建圆角背景drawable/rounded_menu_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white"/>
    <corners android:radius="12dp"/>
    <padding android:vertical="8dp" android:horizontal="16dp"/>
</shape>

3. 修改PopupMenu初始化代码，指定自定义主题：

// Kotlin
val popupMenu = PopupMenu(this, view, 0, 0, R.style.ChromePopupMenu)

// Java
PopupMenu popupMenu = new PopupMenu(this, view, 0, 0, R.style.ChromePopupMenu);

5. 替代方案：底部弹出菜单（Chrome移动端样式） #

如果想要Chrome移动端底部弹出的菜单效果，可以使用BottomSheetDialog：

1. 创建底部菜单布局layout/bottom_sheet_menu.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/tv_new_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="新建标签页"
        android:paddingVertical="12dp"
        android:textSize="16sp"/>

    <TextView
        android:id="@+id/tv_bookmarks"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="书签"
        android:paddingVertical="12dp"
        android:textSize="16sp"/>

    <TextView
        android:id="@+id/tv_history"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="历史记录"
        android:paddingVertical="12dp"
        android:textSize="16sp"/>

    <TextView
        android:id="@+id/tv_settings"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="设置"
        android:paddingVertical="12dp"
        android:textSize="16sp"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/grey_light"
        android:layout_marginVertical="8dp"/>

    <TextView
        android:id="@+id/tv_close"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="关闭"
        android:paddingVertical="12dp"
        android:textSize="16sp"
        android:textColor="@color/red"/>

</LinearLayout>

2. 在Activity中实现弹出逻辑：

private fun showBottomSheetMenu() {
    val bottomSheetDialog = BottomSheetDialog(this)
    val view = layoutInflater.inflate(R.layout.bottom_sheet_menu, null)
    bottomSheetDialog.setContentView(view)
    
    view.findViewById<TextView>(R.id.tv_new_tab).setOnClickListener {
        // 处理逻辑
        bottomSheetDialog.dismiss()
    }
    // 其他按钮同理添加点击事件
    
    bottomSheetDialog.show()
}

最后将按钮点击事件改为调用showBottomSheetMenu()即可。

内容的提问来源于stack exchange，提问作者Ratan Raj