Android控件 PopupWindow自定义实现

自定义PopupWindow的样式、现实淡入淡出效果以及点击内容的实现。

实现效果展示:
在这里插入图片描述
Step 1 :
新建Layout文件,编写想要实现 popup window 的布局样式,以下为参考
在这里插入图片描述
代码实现:

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

    <TextView
        android:id="@+id/choose"
        android:layout_width="65dp"
        android:layout_height="28dp"
        android:background="#E6000000"
        android:gravity="center"
        android:text="choose"
        android:textColor="#ffffff" />

    <View
        android:layout_width="1dp"
        android:layout_height="28dp"
        android:background="#ccffffff"/>

    <TextView
        android:id="@+id/copy"
        android:layout_width="65dp"
        android:layout_height="28dp"
        android:background="#E6000000"
        android:gravity="center"
        android:text="copy"
        android:textColor="#ffffff" />

    <View
        android:layout_width="1dp"
        android:layout_height="28dp"
        android:background="#ccffffff"/>

    <TextView
        android:id="@+id/paste"
        android:layout_width="65dp"
        android:layout_height="28dp"
        android:background="#E6000000"
        android:gravity="center"
        android:text="paste"
        android:textColor="#ffffff" />

</LinearLayout>

Step 2 :
新建animation文件夹,创建animation resource file,定义Popup Window的弹出与消失动画。
在这里插入图片描述
window_dismiss.xml 代码实现:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <!--    interpolator 动画加速器-->
    <!--    fromXDelta 属性为动画起始时 X坐标上的位置-->
    <!--    toXDelta   属性为动画结束时 X坐标上的位置-->
    <!--    fromYDelta 属性为动画起始时 Y坐标上的位置-->
    <!--    toYDelta   属性为动画结束时 Y坐标上的位置-->
    <!--    注意:-没有指定,默认是以自己为相对参照物-->
    <!--    duration  属性为动画持续时间-->
    <translate
        android:interpolator="@android:anim/linear_interpolator"
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="0"
        android:toYDelta="20"
        android:duration="200"
        />

    <!--    fromAlpha 属性为动画起始时 透明度-->
    <!--    toAlpha   属性为动画结束时 透明度-->
    <!--    duration  属性为动画持续时间-->
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0"
        android:duration="200"  />

</set>

window_show.xml 代码实现:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:interpolator="@android:anim/linear_interpolator"
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="20"
        android:toYDelta="0"
        android:duration="200"
        />
        
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="200"  />

</set>

Step 3 :
在style.xml中定义风格,引用刚才的动画。

<style name="translate_anim">
        <item name="android:windowEnterAnimation">@anim/window_show</item>
        <item name="android:windowExitAnimation">@anim/window_dismiss</item>
    </style>

Step 4 :
代码实现部分

//PopupWindow
public void popupWindow(View view) {
    //1.准备弹窗所需要的视图对象
    View v = LayoutInflater.from(this).inflate(R.layout.popup_window, null);
    //2.实例化对象
    //参数1:用在弹窗中的View
    //参数2、3:弹窗的宽高
    //参数4(focusable):能否获取焦点
    final PopupWindow popupWindow = new PopupWindow(v, 600, 135, true);
    //3.设置(背景、动画)
    //设置背景
    popupWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    //设置能响应外部的点击事件
    popupWindow.setOutsideTouchable(true);
    //设置能响应点击事件
    popupWindow.setTouchable(true);
    //设置动画
    popupWindow.setAnimationStyle(R.style.translate_anim);
    //4.显示
    //参数1(anchor):锚
    //参数2、3:相对于锚在x、y方向上的偏移量
    popupWindow.showAsDropDown(view, -190,0);
    //5.为弹窗中的文本添加点击事件
    v.findViewById(R.id.choose).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "choose", Toast.LENGTH_SHORT).show();
            popupWindow.dismiss();
        }
    });

    v.findViewById(R.id.copy).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "copy", Toast.LENGTH_SHORT).show();
            popupWindow.dismiss();
        }
    });

    v.findViewById(R.id.paste).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "paste", Toast.LENGTH_SHORT).show();
            popupWindow.dismiss();
        }
    });
}

动画效果参数设置可以参考此文章:
https://blog.csdn.net/echome123/article/details/24523913?utm_source=blogxgwz3

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值