简单介绍一下自己，大三学生党一枚！主攻Android开发，对于Web和后端均有了解。
个人语录：取乎其上，得乎其中，取乎其中，得乎其下，以顶级态度写好一篇的博客。
菜单在Android中可谓必不可少，为了节约布局的控件，采用菜单能够节省空间。淘宝，QQ，微信等软件中，都有菜单的身影，那么如何才能够设计出一套美观实用的菜单呢？我们先要对菜单有一个总体上的认知。
菜单全解
一.菜单的基础知识
从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上，只要做的漂亮美观使用，使用其他方法，效果更佳！感谢您的阅读，您的评论和赞是我最大的动力！
相关阅读：