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

作者: Android架构师丨小熊 | 来源:发表于2019-08-12 22:14 被阅读18次

模仿微信右上角弹出的菜单
YCXMenu设置透明的方法
我爱e生活下载页面
[开源APP推荐] LXFWeChat – Swift 3.0
【Android开源库】一步搞定手机QQ右上角弹出菜单
解决简书账号微信占用无法绑定问题
微信右上角的菜单(PopupWindow)
Swift-右上角弹出菜单
野鸟装备安装企业包
右上角+号菜单，仿微信

首先来看一下效果图：

废话不多说直接贴码分析。打开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>

最后
最后我准备了一些面试的知识汇总，数据结构，计算机网络等等都有。自己整理和分类的，还请尊重知识产出。
分享给大家的资料包括高级架构技术进阶脑图、Android开发面试专题资料，还有高级进阶架构资料包括但不限于【高级UI、性能优化、移动架构师、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术】希望能帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也是可以分享给身边好友一起学习的！
资料免费领取方式：私信回复“架构资料”即可获取

image