Android菜单详解——实战微信菜单

简单介绍一下自己，大三学生党一枚！主攻Android开发，对于Web和后端均有了解。

个人语录：取乎其上，得乎其中，取乎其中，得乎其下，以顶级态度写好一篇的博客。

菜单在Android中可谓必不可少，为了节约布局的控件，采用菜单能够节省空间。淘宝，QQ，微信等软件中，都有菜单的身影，那么如何才能够设计出一套美观实用的菜单呢？我们先要对菜单有一个总体上的认知。

菜单全解

• 一.菜单的基础知识
• 1.1 菜单分类
• 1.2 不同菜单创建的方法
• 1.2.1 menu主要方法说明
• 1.2.2 选项菜单
• 1.2.3 上下文菜单
• 1.2.4 子菜单
• 1.3 创建菜单注意事项
• 二.创建菜单的两种方式
• 2.1 通过代码
• 2.2 通过xml
• 三.实战微信菜单
• 三.菜单高级进阶
• 总结

一.菜单的基础知识

从Android3.0开始，Android并不要求手机设备上必须提供MENU按钮，即使没有该按钮，用户依然可以通过ActionBar右边的折叠图标来打开选项菜单。

1.1 菜单分类

选项菜单：Android 3.0前MENU按钮关联的菜单，3.0后ActionBar右边图标关联的菜单





上下文菜单(ContextMenu)：与某一控件关联的菜单，当点击该控件时，菜单就会显示出来

子菜单(SubMenu)：子菜单就是菜单选项对应的仍是一个菜单。

1.2 不同菜单创建的方法

上面三种是原生菜单，创建也比较简单，有固定的步骤。

1.2.1 menu主要方法说明

//通过资源文件添加一个新的菜单项
MenuItem add(int titleRes);
//通过传入字符串添加一个新的菜单项
MenuItem add(CharSequence ch)
//添加一个新的处于groupId组的菜单项
//groupId:组Id,我们可以将几个选项归为一组，这样就可以针对不同的组操作
//itemId:选项Id，必须要唯一，因为要想知道具体点击某个item怎么响应得靠它
//order:选项在菜单中得排列顺序
//打个比方，我们在饭店看到的菜单，有汤有菜，属于不同的group,每一个菜都有自己得编号，也就是itemId,同样的菜也有排序，就是order,最后菜有名称，就是charsequence
MenuItem add(int groupId,int itemId,int order,CharSequence charsequence)
//添加一个新的子菜单
SubMenu addSubMenu(int titleRes)
//设置菜单头的图标
SubMenu setHeaderIcon(Drawable icon | int resId)
//设置子菜单的标题
SubMenu setHeaderTitle(Charsequence ch | int titleId)
//使用View来设置菜单头
SubMenu setHeaderView(View view)

1.2.2 选项菜单

选项菜单在3.0之前是通过MENU按钮触发，3.0之后通过ActionBar中的图标触发。

1.Theme要设置为

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

2.在代码中重写onCreateOptionMenu(Menu menu)方法

@Override
    public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
        menu.add("发起群聊");
        menu.add("添加好友");
        menu.add("扫一扫");
        menu.add("收付款");
        menu.add("帮助与反馈");
        super.onCreateContextMenu(menu, v, menuInfo);
    }

3.点击上面的省略号图标即可触发选项菜单

1.2.3 上下文菜单

1.重写onCreateContextMenu()方法

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        menu.add("发起群聊");
        menu.add("添加好友");
        menu.add("扫一扫");
        menu.add("收付款");
        menu.add("帮助与反馈");
        return super.onCreateOptionsMenu(menu);
    }

2.绑定控件，比如Button,长按button则会弹出上下文菜单

registerForContextMenu(btn_context_menu)

1.2.4 子菜单

1.子菜单依附在选项菜单或是上下文菜单中

SubMenu subMenu = menu.addSubMenu("子菜单");
        subMenu.add("子菜单一");
        subMenu.add("子菜单二");
        subMenu.add("子菜单三");

1.3 创建菜单注意事项

总结一下，创建菜单的步骤，可以根据需要选择创建上下文菜单和选项菜单，选择重写onCreateContextMenu()和onCreateOptionMenu()方法，有两个注意点：
1.如果创建选项菜单，要使用带有ActionBar的Style
2.如果使用上下文菜单，要绑定到某个控件，该控件必须能够响应点击事件。

二.创建菜单的两种方式

2.1 通过代码

只需要在代码中重写方法即可，代码如下：

package com.ibuyi.android.utils.view;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.ContextMenu;
import android.view.Menu;
import android.view.SubMenu;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.ibuyi.android.R;
import com.ibuyi.android.common.Activity;

import org.xutils.view.annotation.ContentView;
import org.xutils.view.annotation.ViewInject;

@ContentView(R.layout.activity_menu)
public class MenuActivity extends Activity {

    @ViewInject(R.id.btn_context_menu)
    public Button btn_context_menu;

    @Override
    public void initWidget() {
           registerForContextMenu(btn_context_menu);
    }

    @Override
    public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
        menu.add("发起群聊");
        menu.add("添加好友");
        menu.add("扫一扫");
        menu.add("收付款");
        menu.add("帮助与反馈");
        menu.setHeaderIcon(R.mipmap.add);
        super.onCreateContextMenu(menu, v, menuInfo);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        menu.add("发起群聊");
        menu.add("添加好友");
        menu.add("扫一扫");
        menu.add("收付款");
        menu.add("帮助与反馈");
        return true;

     }
}

2.2 通过xml

1.首先需要在res目录下创建menu资源

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:title="群聊" android:icon="@drawable/more"></item>
    <item android:title="添加好友" android:icon="@drawable/more"></item>
    <item android:title="扫一扫" android:icon="@drawable/more"></item>
    <item android:title="收付款" android:icon="@drawable/more"></item>
    <item android:title="帮助与反馈" android:icon="@drawable/more"></item>
</menu>

2.通过 getMenuInflater().inflate(R.menu.menu, menu);将资源文件转换成菜单选项

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;

     }

3.如果要想让设置的icon生效，还需要通过反射进行设置

@Override
    public boolean onMenuOpened(int featureId, Menu menu) {
        if (menu != null) {
            if (menu.getClass().getSimpleName().equalsIgnoreCase("MenuBuilder")) {
                try {
                    Method method = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    method.setAccessible(true);
                    method.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return super.onMenuOpened(featureId, menu);
    }

效果图如下：

三.实战微信菜单

下面我们来实现微信菜单的效果，真实图如下




先讨论一下如何实现，我们可以摈弃Menu的传统思想，使用自定义View,动态的添加View来实现微信菜单栏的效果。


代码如下：

btn_context_menu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (view == null) {
                    String[] des = new String[]{"发起群聊", "添加好友", "扫一扫", "收付款", "帮助与反馈"};
                    int[] photos = new int[]{R.drawable.talks, R.drawable.addnew, R.drawable.scan, R.drawable.pay, R.drawable.msg};
                    view = getLayoutInflater().inflate(R.layout.menu_layout, null);
                    RecyclerView recyclerView = view.findViewById(R.id.menu_recyclerview);
                    MenuAdapter adapter = new MenuAdapter(photos, des, getApplicationContext());
                    recyclerView.setAdapter(adapter);
                    LinearLayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());

                    recyclerView.setLayoutManager(layoutManager);
                    DividerItemDecoration mDivider = new
                            DividerItemDecoration(getApplicationContext(),DividerItemDecoration.VERTICAL);

                    recyclerView.addItemDecoration(mDivider);
                    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(600, LinearLayout.LayoutParams.WRAP_CONTENT);
                    //设置gravity
                    layoutParams.gravity =Gravity.RIGHT;
                    //获得屏幕宽度的像素数
                    int widthPixel = getResources().getDisplayMetrics().widthPixels;
                    int marginLeft = widthPixel-600;
                    //设置布局
                    layoutParams.setMargins(marginLeft,0,0,0);
                    addContentView(view, layoutParams);
                }else{
                    view.setVisibility(View.VISIBLE);
                }
            }
        });

menu_layout.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:padding="8dp"
    android:background="@color/deep">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/menu_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

menu_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:orientation="horizontal"
    android:layout_marginTop="8dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="80dp">
    <ImageView
        android:id="@+id/menu_imageview"
        android:layout_gravity="center_vertical"
        android:src="@drawable/addnew"
        android:layout_width="32dp"
        android:layout_height="32dp">
    </ImageView>
    <TextView
        android:id="@+id/menu_des"
        android:text="发起群聊"
        android:layout_marginLeft="20dp"
        android:textSize="18sp"
        android:textColor="#FFFFFF"
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </TextView>
</LinearLayout>

MenuAdapter.java

class MenuAdapter extends RecyclerView.Adapter<ViewHolder>{
        private int[] photos;
        private String[] des;
        private Context context;
        public MenuAdapter(int[] photos,String[] des,Context context){
            this.photos=photos;
            this.des =des;
            this.context=context;
        }


        @NonNull
        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(context).inflate(R.layout.menu_item,null);
            ViewHolder viewHolder = new ViewHolder(view);
            return viewHolder;
        }

        @Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
            holder.imageView.setImageDrawable(getResources().getDrawable(photos[position]));
            holder.des.setText(des[position]);

        }

        @Override
        public int getItemCount() {
            return photos.length;
        }


    }

    class ViewHolder extends RecyclerView.ViewHolder{
        ImageView imageView;
        TextView des;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.menu_imageview);
            des = itemView.findViewById(R.id.menu_des);

        }
    }

效果图如下

虽然未得精髓，但是还是有点像的。

三.菜单高级进阶

除了自定义View设计菜单，我们还可以通过动画来进行设计，比如说，点击某个按钮，就会展现出，以该按钮为圆心，某个距离为半径的圆弧，圆弧为90度在上下左右四个角落，每隔30度展现一个带有图标的按钮，每隔按钮都相当于是一个菜单选项。
具体代码会在后续的属性动画章节中给出。

总结

菜单其实就是为了节约空间的做法，没必要拘泥在menu上，只要做的漂亮美观使用，使用其他方法，效果更佳！感谢您的阅读，您的评论和赞是我最大的动力！

相关阅读：

不起眼的暴利小生意

暴利小生意

抖音快速涨粉