当我们使用 Material Design 中的 Toolbar 作为顶部导航栏时，我们可能会遇到一个问题：当在 Toolbar 中使用菜单时，在某些手机上点击菜单弹出时，菜单会出现在 MenuOverflow 上方而不是下方，导致用户体验不佳。如下图所示：
这是一个令人困惑的问题，特别是因为某些设备上的菜单会在不同的位置出现。这篇文章将介绍一种解决该问题的方法，并提供相关的示例代码。
推荐的解决方法
要解决这个问题，我们需要在 Toolbar 菜单的样式中使用 app:popupTheme 属性。popupTheme 可以让我们设置菜单弹出时的样式。
我们需要创建一个主题，该主题仅包含我们需要的样式。我们可以让菜单始终显示在 Toolbar 下方，通过在主题中设置 overlapAnchor 为 false。
<style name="PopupOverlayTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">@color/white</item>
<item name="android:textColor">@color/black</item>
<item name="overlapAnchor">false</item>
</style>接下来，在 Toolbar 中使用 app:popupTheme 属性设置主题。
-- -------------------- ---- -------
----------------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
-------------------------------------
------------------------------------------
---------
-----------------------------------
------------------------------------
--------------------- ------ --
------------------------------------这样就解决了菜单弹出问题。
示例代码
以下是一个完整的示例代码，包括在 Toolbar 中使用菜单和解决菜单弹出问题的代码。
activity_main.xml：
-- -------------------- ---- -------
---------------
----------------------------------------------------------
---------------------------------------------------
-----------------------------------
-------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
-------------------------------------
------------------------------------------
---------
-----------------------------------
------------------------------------
--------------------- ------ --
------------------------------------
---------
----------------------
-----------------------------------
------------------------------------
-----------------------------------
------------------- ------- --
-----------------MainActivity.java：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- --------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------- - ---------------------------
-----------------------------
------
--------------------------------------
-------------------------------------- --------------------------------- -
---------
------ ------- ------------------------ ----- -
------ ------------------ -
---- ---------------------
--------------------------------- --------- --------- ---------------------------
------ -----
---- ---------------------
--------------------------------- --------- --------- ---------------------------
------ -----
-
------ ------
-
---
-
-menu_main.xml：
-- -------------------- ---- -------
----- ----------------------------------------------------------
----------------------------------------------------
-----
---------------------------------
-----------------------------------------------
--------------------------------
------------------------ --
-----
---------------------------------
-----------------------------------------------
--------------------------------
------------------------ --
-------总结
为了解决 Material Design 中使用 Toolbar 的菜单弹出在 MenuOverflow 的问题，我们可以设置 Toolbar 菜单的样式 app:popupTheme 属性，并创建一个主题来控制菜单的弹出。
本文提供了一个具体的解决方案，可以帮助开发者更好的掌握该技能。同时，我们应该注意到其中的细节，以及其他可能存在的变体问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647da896968c7c53b0876d43