ActionMenuView溢出按钮与最后一个操作图标重叠问题求解

问题原因 #

你单独使用ActionMenuView时，组件默认不会自动为溢出按钮预留宽度空间，你配置了3个showAsAction="always"的固定显示菜单项，组件计算自身宽度时仅统计了这三个图标的宽度，溢出按钮渲染时就会直接叠加在最后一个图标上。

解决方案 #

可根据需求任选以下一种方案：

方案1：预留溢出按钮空间（最简单，适配性高）

直接修改布局中ActionMenuView的属性，给右侧预留出溢出按钮的标准宽度即可：

<androidx.appcompat.widget.ActionMenuView
    android:id="@+id/main_topbar_menu"
    android:layout_width="wrap_content"
    android:layout_height="56dp"
    android:layout_alignParentRight="true"
    android:gravity="center_vertical|left"
    android:paddingEnd="48dp"
    android:paddingRight="48dp"/>

48dp是Material Design规范中操作按钮的标准宽度，预留后溢出按钮会显示在预留区域内，不会和前面的图标重叠。

方案2：调整菜单项显示策略

如果不需要强制三个图标都固定显示，可将最后一个固定显示的菜单项的showAsAction属性从always改为ifRoom：

<item
    android:id="@+id/letterCommand_ref"
    android:title="Refrences"
    app:showAsAction="ifRoom"
    android:iconTint="#777"
    android:icon="@drawable/ic_reply_gray"/>

当空间不足时，该菜单项会自动收进溢出菜单，自然不会出现重叠问题。

方案3：自定义组件自动适配宽度

如果既要保留三个固定显示的图标，又不想加固定内边距，可自定义ActionMenuView重写测量逻辑，自动加上溢出按钮的宽度：

1. 新建自定义类：

import android.content.Context;
import android.util.AttributeSet;
import androidx.appcompat.widget.ActionMenuView;

public class AutoAdjustActionMenuView extends ActionMenuView {
    public AutoAdjustActionMenuView(Context context) {
        super(context);
    }

    public AutoAdjustActionMenuView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 存在可见的溢出按钮时，自动追加宽度
        if (getOverflowMenu() != null && getOverflowMenu().isVisible()) {
            int totalWidth = getMeasuredWidth() + getOverflowMenu().getMeasuredWidth();
            setMeasuredDimension(totalWidth, getMeasuredHeight());
        }
    }
}

2. 替换布局中的组件声明：

<你的包名.AutoAdjustActionMenuView
    android:id="@+id/main_topbar_menu"
    android:layout_width="wrap_content"
    android:layout_height="56dp"
    android:layout_alignParentRight="true"
    android:gravity="center_vertical|left"/>

内容的提问来源于stack exchange，提问作者Ali.M