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

简单介绍一下自己,大三学生党一枚!主攻Android开发,对于Web和后端均有了解。
个人语录取乎其上,得乎其中,取乎其中,得乎其下,以顶级态度写好一篇的博客。

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

一.菜单的基础知识

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

1.1 菜单分类

选项菜单:Android 3.0MENU按钮关联的菜单,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.如果创建选项菜单,要使用带有ActionBarStyle
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上,只要做的漂亮美观使用,使用其他方法,效果更佳!感谢您的阅读,您的评论和赞是我最大的动力!

先别走,我有一个资源学习群要推荐给你,它是白嫖党的乐园,小白的天堂!
在这里插入图片描述
别再犹豫,一起来学习!
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读