将圆形彩色背景应用于 Material PopupMenu 组件的正确方法是啥？

Posted 2023-02-22

【中文标题】将圆形彩色背景应用于 Material PopupMenu 组件的正确方法是啥？

【英文标题】：What is the correct way to apply a round, colored background to a Material PopupMenu Component?将圆形彩色背景应用于 Material PopupMenu 组件的正确方法是什么？

【发布时间】：2021-10-01 23:28:02

【问题描述】：

我正在尝试制作一个带有圆角和自定义字体的弹出菜单。我正在使用来自 material.io 的材质菜单。我想实现这样的目标：

到目前为止，我尝试的是使用 PopupMenu 并使用自定义背景可绘制对象添加样式参数：

在question 中看到答案后，我使用了 ContextThemeWrapper 以便我的样式真正生效。没有这个，样式更改将不起作用

    private fun showAddGoalsMenu(view: View) 
        val wrapper = ContextThemeWrapper(context, R.style.PopupMenu)
        val popupMenu = PopupMenu(wrapper, view)
        popupMenu.inflate(R.menu.menu_add_goals)

        ...
    

从这个material.io menu theming example，我尝试在主应用程序样式中设置属性popupMenuBackground，并尝试在个人样式中设置android:popupBackground。但背景不适用：

从其他答案（question 1、question 2、question 3）中，我发现了其他属性，如background、android:background、itemBackground、android:itemBackground。由此，

background 和 android:background 仅适用于设置颜色。如果我将自定义可绘制对象设置为背景，它也会弄乱项目：

itemBackground 和 android:itemBackground 只为单个项目设置背景。因此，如果我应用圆形背景，结果如下所示：

我的样式代码目前看起来像这样。根据我到目前为止所阅读的内容，这应该可行。但是....叹息。我已经注释掉了我所做的所有实验。

    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorSecondary">@color/colorSecondary</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="bottomNavigationStyle">@style/Widget.App.BottomNavigationView</item>

        <!--<item name="textAppearanceLargePopupMenu">@style/TextAppearance.App.Subtitle1</item>-->
        <!--<item name="textAppearanceSmallPopupMenu">@style/TextAppearance.App.Subtitle1</item>-->
        <!--<item name="popupMenuBackground">@drawable/custom_popup_background</item>-->
        <item name="popupMenuStyle">@style/PopupMenu</item>
    </style>

    <style name="PopupMenu" parent="Widget.MaterialComponents.PopupMenu">
        <item name="android:dropDownHorizontalOffset">-4dp</item>
        <item name="android:dropDownVerticalOffset">4dp</item>
        <item name="android:popupBackground">@drawable/custom_popup_background</item>
        <!--<item name="android:itemBackground">@drawable/black_popup_background</item>-->
        <item name="popupMenuBackground">@drawable/custom_popup_background</item>
        <!--<item name="background">@color/colorPrimary</item>-->
        <!--<item name="android:background">@drawable/custom_popup_background</item>-->
        <item name="android:background">@color/colorPrimary</item>-->
<!--        <item name="itemBackground">@drawable/black_popup_background</item>-->
        <item name="textAppearanceLargePopupMenu">@style/TextAppearance.App.Subtitle1</item>
        <item name="textAppearanceSmallPopupMenu">@style/TextAppearance.App.Subtitle1</item>
    </style>


    <style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
        <item name="fontFamily">@font/amaranth</item>
        <item name="android:fontFamily">@font/amaranth</item>
        <item name="android:textColor">#1E2D58</item>
    </style>

这是我的自定义背景可绘制对象

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorPrimary"/>
    <corners
        android:radius="16dp"/>
    <padding
        android:bottom="8dp"
        android:top="8dp"/>
</shape>

为了测试 itemBackground，我创建了一个 black_popup_background.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorSecondary"/>
    <corners
        android:radius="16dp"/>
    <padding
        android:bottom="8dp"
        android:top="8dp"/>
</shape>

我得到的输出是：

我不知道我做错了什么。提前感谢所有帮助！

【参考方案1】：

对于以后遇到此问题的任何人。

我犯的错误是在我的代码中使用 android.widget.PopupMenu 而不是 androidx.appcompat.widget.PopupMenu。一旦我替换了这种用法，样式就起作用了。

最终，我的风格看起来和提到的here一样。