模仿微信右上角弹出的菜单

 

最近在看《Android精彩编程200例》这本书，但是书中很多例子都存在一些问题，因此我在这里就对书中的实例进行修改。希望能对一些和我一样的初学者有所帮助。

首先来看一下效果图：

废话不多说直接贴码分析。打开AS新建一个项目命名为 WeiMenu 。

这里我采用自己定义的标题栏，与书中使用一张图来代替标题栏不一样，我这样对屏幕的兼容和适配更加合理。新建一个 layout 文件命名为 title.xml 文件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="15dp"
    android:background="#000">

    <TextView
        android:id="@+id/title_name"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="@string/text_title"
        android:layout_gravity="center_horizontal"
        android:textColor="#FFFFFF"
        android:textSize="25sp" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"/>
    <Button
        android:id="@+id/btn_menu"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_gravity="center_horizontal"
        android:focusable="true"
        android:background="@drawable/btn_add"/>

</LinearLayout>

接着在 MainActivity 这个类中输入以下代码，我采用自己定义的标题栏，因此在这里我隐藏系统的标题栏。

package com.mryzj.weimenu;

import android.os.Bundle;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //隐藏系统自带的标题栏
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.hide();
        }
    }
}

紧接着定义右上角菜单的有哪些选项内容，新建一个 layout 布局命名为 menu.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="match_parent"
    android:gravity="right"
    android:orientation="vertical">
    <!--菜单发起群聊按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:background="#333333"
        android:drawableLeft="@drawable/icon_group"
        android:drawablePadding="10dip"
        android:paddingLeft="20dip"
        android:paddingRight="58dp"
        android:text="@string/text_group"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        />
    <!--菜单添加好友按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:background="#333333"
        android:drawableLeft="@drawable/icon_add"
        android:drawablePadding="10dip"
        android:paddingLeft="20dip"
        android:paddingRight="58dp"
        android:text="@string/text_add"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        />
    <!--菜单扫一扫按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:background="#333333"
        android:drawableLeft="@drawable/icon_scan"
        android:drawablePadding="10dip"
        android:paddingLeft="20dip"
        android:paddingRight="76dp"
        android:text="@string/text_sweep"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        />
    <!--菜单收付款按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:background="#333333"
        android:drawableLeft="@drawable/icon_card"
        android:drawablePadding="10dip"
        android:paddingLeft="20dip"
        android:paddingRight="76dp"
        android:text="@string/text_collect"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        />
    <!--菜单帮助与反馈按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:background="#333333"
        android:drawableLeft="@drawable/icon_help"
        android:drawablePadding="10dip"
        android:paddingLeft="20dip"
        android:paddingRight="40dp"
        android:text="@string/text_help"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        />

</LinearLayout>

新建一个Java类来实现自定义的标题栏功能，命名为 TitleLayout.java 文件。

package com.mryzj.weimenu;

import android.app.ActionBar;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.PopupWindow;


public class TitleLayout extends LinearLayout {

    private Button menuBtn;
    PopupWindow popupWindow;

    public TitleLayout(Context context){
        super(context);
    }
    public TitleLayout(final Context context, AttributeSet attributeSet){
        super(context, attributeSet);

        LayoutInflater.from(context).inflate(R.layout.title, this);
        menuBtn = findViewById(R.id.btn_menu);

        menuBtn.setOnClickListener(new View.OnClickListener(){
            @Override
            public  void onClick(View view){
                // 获取自定义的菜单布局文件
                View popupWindow_view = LayoutInflater.from(context).inflate(R.layout.menu, null,false);
                // 创建PopupWindow实例,设置菜单宽度和高度为包裹其自身内容
                popupWindow = new PopupWindow(popupWindow_view, ActionBar.LayoutParams.WRAP_CONTENT,
                        ActionBar.LayoutParams.WRAP_CONTENT, true);
                //设置菜单显示在按钮的下面
                popupWindow.showAsDropDown(findViewById(R.id.btn_menu),0,0);
                // 点击其他地方消失
                popupWindow_view.setOnTouchListener(new View.OnTouchListener() {
                    @Override
                    public boolean onTouch(View v, MotionEvent event) {
                        //如果菜单存在并且为显示状态，就关闭菜单并初始化菜单
                        if (popupWindow != null && popupWindow.isShowing()) {
                            popupWindow.dismiss();
                            popupWindow = null;
                        }
                        return false;
                    }
                });
            }
        });
    }
}

最后一步，在 activity_main.xml 布局中引入定义好的标题栏。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mryzj.weimenu.MainActivity">

    <com.mryzj.weimenu.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.mryzj.weimenu.TitleLayout>

</RelativeLayout>

如有错误，欢迎指出！

这里是上述实例的源码，喜欢的朋友给颗星，谢谢：https://github.com/MrYZJ/wechat_title_menu