Android中的菜单实现汇总

前言

菜单是许多应用类型中常见的用户界面组件,实现的方法有很多,本篇中对一些常用的控件或方法进行一个汇总。

三种基本菜单

Google在API开发指南中关于Menu的用法推荐了三种基本菜单的实现方法:选项菜单(OptionsMenu)、上下文菜单(ContextMenu)和弹出菜单(PopupMenu)。

选项菜单(OptionsMenu)

选项菜单是某个 Activity 的主菜单项, 供您放置对应用产生全局影响的操作,如“搜索”、“撰写电子邮件”和“设置”。

选项菜单(OptionsMenu)

上下文菜单(ContextMenu)

上下文菜单是用户长按某一元素时出现的浮动菜单, 它提供的操作将影响所选内容或上下文框架。

上下文菜单(ContextMenu)

弹出菜单(PopupMenu)

弹出菜单将以垂直列表形式显示一系列项目,这些项目将锚定到调用该菜单的视图中。 它特别适用于提供与特定内容相关的大量操作,或者为命令的另一部分提供选项。 弹出菜单中的操作不会直接影响对应的内容,而上下文操作则会影响。 相反,弹出菜单适用于与您 Activity 中的内容区域相关的扩展操作。

弹出菜单(PopupMenu)

关于以上三种菜单的用法可以参看我的另一篇博客——Android推荐的三种基本菜单

AlertDialog

AlertDialog是Dialog的一个子类,能够提供最多三个Button的显示(PositiveButton、NeutralButton和NegativeButton)。同时,AlertDialog还提供了列表、单选、多选等样式,并且支持自定义布局。对话框不会填充屏幕,通常用于需要用户采取行动才能继续执行的模式事件。

AlertDialog

主要代码如下:

    private TextView mAlertDialog;
    mAlertDialog = findViewById(R.id.tv_alert_dialog);
    mAlertDialog.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            showAlertDialog();
        }
    });
    private void showAlertDialog() {
        String[] menuItems = new String[]{"Option1","Option2","Option3"};
        AlertDialog.Builder alertDialog = new AlertDialog.Builder(mContext);
        alertDialog.setItems(menuItems, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                Toast.makeText(mContext,"Option " + (i + 1),Toast.LENGTH_SHORT).show();
            }
        });
        alertDialog.show();
    }

具体用法详见android 8种对话框(Dialog)使用方法汇总中列表Dialog的写法。

DialogFragment

DialogFragment是一种特殊的Fragment,用于在Activity的窗口之上显示一个对话框窗口。通常被用来展示警告框,输入框,确认框等等。DialogFragment作为Fragment的子类,与Fragment有着一样的生命周期,由FragmentManager统一管理。

DialogFragment

主要代码如下:

//派生DialogFragment并重写onCreateDialog方法,实现自定义的MenuDialogFragment 
public class MenuDialogFragment extends DialogFragment {
    private final static String TAG = "MenuDialogFragment";

    private Context mContext;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mContext = getContext();
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        String[] menuItems = new String[]{"Option1","Option2","Option3"};
        AlertDialog.Builder alertDialog = new AlertDialog.Builder(mContext);
        alertDialog.setItems(menuItems, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                Toast.makeText(mContext,"Option " + (i + 1),Toast.LENGTH_SHORT).show();
            }
        });

        return alertDialog.create();
    }
}

//点击TextView的时候显示
private TextView mDialogFragment;
mDialogFragment = findViewById(R.id.tv_dialog_fragment);
mDialogFragment.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        showDialogFragment();
    }
});

private void showDialogFragment() {
    MenuDialogFragment menuDialogFragment = new MenuDialogFragment();
    menuDialogFragment.show(getFragmentManager(),"menu_dialog_fragment");
}

更多细节可以参看鸿神的博客Android 官方推荐 : DialogFragment 创建对话框。另,附上别人封装的DialogFragment,有兴趣可以学习一下——Android 撸起袖子,自己封装 DialogFragment

PopupWindow

PopupWindow是一个显示在当前Activity上面的、能够显示任意视图的弹出窗口。PopupWindow可以根据点击事件指定显示位置的,更加灵活。虽然能用PopupWindow来实现Menu,但是显示不够美观,也缺少必要的过度动画,最起码的水波纹效果都要自己在布局中添加,实现起来不如前面介绍的几种方法简单。

PopupWindow

主要代码如下:
PopupWindow的布局popup_window_menu.xml

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

    <TextView
        android:id="@+id/tv_option1"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center"
        android:background="?android:attr/selectableItemBackground"
        android:text="Option1"/>
    <TextView
        android:id="@+id/tv_option2"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center"
        android:background="?android:attr/selectableItemBackground"
        android:text="Option2"/>
    <TextView
        android:id="@+id/tv_option3"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center"
        android:background="?android:attr/selectableItemBackground"
        android:text="Option3"/>
</LinearLayout>
    private TextView mPopupWindow;
    mPopupWindow = findViewById(R.id.tv_popup_window);
    mPopupWindow.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            showPopupWindow();
        }
    });

    private void showPopupWindow() {
        final PopupWindow popupWindow = new PopupWindow(mContext);

        View view = LayoutInflater.from(mContext).inflate(R.layout.popup_window_menu,null);
        TextView menuItem1 = view.findViewById(R.id.tv_option1);
        menuItem1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(mContext,"Option 1",Toast.LENGTH_SHORT).show();
                if(popupWindow != null) {
                    popupWindow.dismiss();
                }
            }
        });
        TextView menuItem2 = view.findViewById(R.id.tv_option2);
        menuItem2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(mContext,"Option 2",Toast.LENGTH_SHORT).show();
                if(popupWindow != null) {
                    popupWindow.dismiss();
                }
            }
        });
        TextView menuItem3 = view.findViewById(R.id.tv_option3);
        menuItem3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(mContext,"Option 3",Toast.LENGTH_SHORT).show();
                if(popupWindow != null) {
                    popupWindow.dismiss();
                }
            }
        });

        popupWindow.setContentView(view);
        popupWindow.setWidth(480);
        popupWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
        popupWindow.setBackgroundDrawable(new ColorDrawable(0xffffffff));
        popupWindow.setTouchable(true);
        popupWindow.setOutsideTouchable(true);
        if(!popupWindow.isShowing()) {
            popupWindow.showAtLocation(mPopupWindow,Gravity.CENTER,0,0);
        }
    }

BottomSheetDialog

BottomSheetDialog是一种显示在底部的Dialog,默认宽度是屏幕宽度,常被用来展示列表。除了点击空白区域,在BottomSheetDialog 区域中向下滑动也可以对话框消失。

image.png

主要代码逻辑如下:

    private TextView mBottomSheetDialog;
    mBottomSheetDialog  = findViewById(R.id.tv_bottom_sheet_dialog);
    mBottomSheetDialog.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            showBottomSheetDialog();
        }
    });

    private void showBottomSheetDialog() {
        final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(mContext);
        View view = LayoutInflater.from(mContext).inflate(R.layout.popup_window_menu, null);
        TextView menuItem1 = view.findViewById(R.id.tv_option1);
        menuItem1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(mContext,"Option 1",Toast.LENGTH_SHORT).show();
                if(bottomSheetDialog != null) {
                    bottomSheetDialog.dismiss();
                }
            }
        });
        TextView menuItem2 = view.findViewById(R.id.tv_option2);
        menuItem2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(mContext,"Option 2",Toast.LENGTH_SHORT).show();
                if(bottomSheetDialog != null) {
                    bottomSheetDialog.dismiss();
                }
            }
        });
        TextView menuItem3 = view.findViewById(R.id.tv_option3);
        menuItem3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(mContext,"Option 3",Toast.LENGTH_SHORT).show();
                if(bottomSheetDialog != null) {
                    bottomSheetDialog.dismiss();
                }
            }
        });
        bottomSheetDialog.setContentView(view);
        bottomSheetDialog.setCancelable(true);
        bottomSheetDialog.setCanceledOnTouchOutside(true);
        bottomSheetDialog.show();
    }

与ListView或RecyclerView配合使用向上滑动还能显示更多内容。


初始状态

向上滑动后的状态

BottomSheetDialog的布局文件bottom_sheet_dialog_menu.xml

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

    <ListView
        android:id="@+id/lv_bottom_sheet_dialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>
</LinearLayout>
    private TextView mBottomSheetDialog;
    mBottomSheetDialog  = findViewById(R.id.tv_bottom_sheet_dialog);
    mBottomSheetDialog.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            showBottomSheetDialogWithListView();
        }
    });

    private void showBottomSheetDialogWithListView() {
        final BottomSheetDialog dialog=new BottomSheetDialog(mContext);
        View view = LayoutInflater.from(mContext)
                .inflate(R.layout.bottom_sheet_dialog_menu,null);
        ListView listView= view.findViewById(R.id.lv_bottom_sheet_dialog);
        String[] array=new String[]{"item-0","item-1","item-2","item-3","item-4","item-5","item-6","item-7","item-8",
                "item-9","item-10","item-11","item-12","item-13","item-14","item-15"};
        ArrayAdapter adapter=new ArrayAdapter(mContext,android.R.layout.simple_list_item_1,array);
        listView.setAdapter(adapter);
        dialog.setContentView(view);
        dialog.show();
    }

其它方法

  • Spinner

Spinner实现菜单

具体用法详见——Android:控件Spinner实现下拉列表

小结

本文对常用的菜单的实现方法进行了汇总,对于每种方法都给出了最简单的demo示例,每个控件都有其各自的优缺点,能实现的效果也各不相同,这些差异化就不在本文中讨论了。当然了,方法不仅限于文中提到的这几种,还有其它方法,欢迎补充。

Demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,928评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,192评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,468评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,186评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,295评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,374评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,403评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,186评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,610评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,755评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,393评论 3 320
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2 351

推荐阅读更多精彩内容