Android 仿微信右上角点击加号弹出菜单

今天在做仿微信点击右上角加号弹出菜单出现了一点问题，故记录下来 需要也能对你有用
先来看效果图：

欧克，上面的实现效果主要时使用PopupWindow实现的，其中有趣的知识点是1.点击加号按钮弹出菜单，整体颜色变灰，2.再次点击加号按钮，收起菜单，3.开启菜单时点击外部实现收起菜单
好了，废话不多说让我们来看代码

首先，声明一个类继承自PopupWindow （这里你也可以在使用的activity/Fragment中使用new PopupWindow方式来实现）

public class DevicePopWindow extends PopupWindow {
     
    public DevicePopWindow(){
     
        super(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
        //这里要注意设置setOutsideTouchable之前要设置 setBackgroundDrawable()
        //否则点击外部无法关闭pop
        setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        setOutsideTouchable(true);
        //获取焦点设置为true 这样再次点击菜单时 就隐藏菜单
        setFocusable(true);
        View inflate = LayoutInflater.from(BaseApplication.getAppContext()).inflate(R.layout.pop_window_device, null);
        setContentView(inflate);

        //设置窗口进入和退出的动画
        setAnimationStyle(R.style.pop_add);
    }
}

R.layout.pop_window_device.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >


    <LinearLayout
        android:padding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:background="@drawable/shape_device_pop"
        android:orientation="vertical"
        android:paddingBottom="20dp"
        android:paddingEnd="16dp"
        android:paddingStart="26dp"
        android:paddingTop="20dp">
        <TextView
            android:id="@+id/tv_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="发起群聊"
            android:textColor="@color/colorBlack"
            android:textSize="16sp"/>

        <TextView
            android:id="@+id/tv_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="添加朋友"
            android:textColor="@color/colorBlack"
            android:textSize="16sp"/>

        <TextView
            android:id="@+id/tv_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="扫一扫"
            android:textColor="@color/colorBlack"
            android:textSize="16sp"/>

        <TextView
            android:id="@+id/tv_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="收付款"
            android:textColor="@color/colorBlack"
            android:textSize="16sp"/>

        <TextView
            android:id="@+id/tv_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="帮助与反馈"
            android:textColor="@color/colorBlack"
            android:textSize="16sp"/>
    </LinearLayout>

</LinearLayout>

R.style.pop_add 样式

  <style name="pop_add" parent="android:Animation">
    <item name="android:windowEnterAnimation">@anim/pop_add_show</item>
    <item name="android:windowExitAnimation">@anim/pop_add_hide</item>
</style>

@anim/pop_add_show.xml pop弹出动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
    <scale
        android:duration="300"
        android:fromXScale="0"
        android:fromYScale="0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:pivotX="85%"
        android:pivotY="0%"
        android:toXScale="1.0"
        android:toYScale="1.0"/>

</set>

@anim/pop_add_hide.xml pop隐藏动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
    android:duration="300"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"/>
<scale
    android:duration="300"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:pivotX="85%"
    android:pivotY="0%"
    android:toXScale="0"
    android:toYScale="0"/>
</set>

在我们的页面中进行使用

class DeviceFragment : Fragment() {
     

    lateinit var devicePopWindow: DevicePopWindow
    lateinit var rootView: View
    lateinit var successView:View
   
    override fun onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState): View {
     
        rootView =  inflater.inflate(R.layout.base_device_fragment_layout,container,false)
        initView(inflater)
        initListener()
        return rootView
    }


    fun initView(inflate: View) {
     
        devicePopWindow = DevicePopWindow()
    }

 

     fun initListener() {
     
        rootView.findViewById<ImageView>(R.id.device_head_add).setOnClickListener {
     
                //设置pop显示位置
                devicePopWindow.showAsDropDown(it,-150,10)
                backgroundAlpha(0.8f)
        }
        //pop消失的监听
        devicePopWindow.setOnDismissListener {
     
            backgroundAlpha(1.0f)
        }

    }


    /**
     * 此方法用于改变背景的透明度，从而达到“变暗”的效果
     */
    private fun backgroundAlpha(bgAlpha: Float) {
     
        val lp: WindowManager.LayoutParams = activity!!.window.attributes
        // 0.0-1.0
        lp.alpha = bgAlpha
        activity!!.window.attributes = lp
        // everything behind this window will be dimmed.
        // 此方法用来设置浮动层，防止部分手机变暗无效
        activity!!.window.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND)
    }
}

欧克。到这里就结束了，东西都挺简单的 详细的注释也在代码里 就不再累赘了