Android PopupWindow实现带背景阴影的下滑选择框

先上图:

效果还是很丝滑的，这里动画主要用到了属性动画。实现逻辑很简单，动画都是在popupwindow调用showAsDropDown() 和dismiss()时执行。这里主要是注意退出动画的实现，在dismiss()中执行动画是无效的，需要在动画执行完毕后再执行super.dismiss(); 可拓展能力强，可以结合自身需求实现不同的效果。

以下是源码：

PopupWindow :

public class TypeSelectWindow extends PopupWindow {    private Activity activity;    private BDBaseAdapter bdBaseAdapter = null;    View contentView;//弹出框的根布局，可以监听其点击事件，达到点击阴影消失弹框的效果    GridView gridView;    public TypeSelectWindow(Activity activity){        this.activity = activity;        initDatas();        initView();    }    private void initView(){        this.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);        this.setHeight(ViewGroup.LayoutParams.MATCH_PARENT);        contentView = LayoutInflater.from(activity).inflate(R.layout.join_popup_layout,null);        gridView =  contentView.findViewById(R.id.gridView);        bdBaseAdapter = new BDBaseAdapter<String>(activity,listDatas,R.layout.join_select_item) {            @Override            public void convert(BDViewHolder helper, String item, int position) {                ((TextView)helper.getView(R.id.text)).setText(item);            }        };        gridView.setAdapter(bdBaseAdapter);        this.setContentView(contentView);//设置布局        this.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));        this.setAnimationStyle(R.style.SelectPopupWindow);        this.setOutsideTouchable(true);        this.setFocusable(true);    }    /**     * 模拟数据     */    List<String> listDatas = new ArrayList<>();    private void initDatas(){        listDatas.clear();        for (int i = 0;i<10;i++){            listDatas.add("menu"+i);        }    }    //显示    public void showPopupWindow(View parent) {        if (!this.isShowing()) {            this.showAsDropDown(parent,0,0);            //执行进入动画，这里主要是执行列表下滑，背景变半透明在setAnimationStyle(R.style.SelectPopupWindow);中实现            AnimationUtil.createAnimation(true,contentView,gridView,null);        } else {            dismissPopup();        }    }    //消失    public void dismissPopup(){        super.dismiss();// 调用super.dismiss(),如果直接dismiss()会一直会调用下面的dismiss()    }    @Override    public void dismiss() {        //执行推出动画，列表上滑退出，同时背景变透明        AnimationUtil.createAnimation(false,contentView,gridView , new AnimationUtil.AnimInterface() {            @Override            public void animEnd() {                dismissPopup();//动画执行完毕后消失            }        });    }}

AnimationUtil：

public class AnimationUtil {    //动画持续时间    public final static int ANIMATION_IN_TIME=500;    public final static int ANIMATION_OUT_TIME=500;    /**     * @param isIn  动画类型，进入或消失     * @param rootView  根布局，主要用来设置半透明背景     * @param target    要移动的view     * @param animInterface  动画执行完毕后的回调     */    public static void createAnimation(final boolean isIn, final View rootView, final View target,                                       final AnimInterface animInterface){        final int toYDelta = ViewUtils.getViewMeasuredHeight(target);//测量布局高度        ValueAnimator valueAnimator = ValueAnimator.ofFloat(isIn?-toYDelta:0,isIn?0:-toYDelta);        valueAnimator.setDuration(isIn?ANIMATION_IN_TIME:ANIMATION_OUT_TIME);        valueAnimator.setRepeatCount(0);        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                float currentValue = (Float) animation.getAnimatedValue();                target.setY(currentValue);                if (!isIn){//因为在setAnimationStyle(R.style.SelectPopupWindow);设置了进入动画,所以执行进入动画时不再设置                    rootView.setAlpha(1-Math.abs(currentValue)/animation.getDuration());                }            }        });        valueAnimator.addListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                super.onAnimationEnd(animation);                if (animInterface!=null){                    animInterface.animEnd();                }            }        });        valueAnimator.start();    }    public interface AnimInterface{        void animEnd();    }}

ViewUtils

public class ViewUtils {    /**     * 获取控件的高度     */    public static int getViewMeasuredHeight(View view) {        calculateViewMeasure(view);        return view.getMeasuredHeight();    }    /**     * 获取控件的宽度     */    public static int getViewMeasuredWidth(View view) {        calculateViewMeasure(view);        return view.getMeasuredWidth();    }    /**     * 测量控件的尺寸     */    private static void calculateViewMeasure(View view) {        int w = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);        int h = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);        view.measure(w, h);    }}

style.xml
这里我只设置了进入的背景渐变的动画，列表的滑动动画我在AnimationUtil中实现了，在上面的AnimationUtil中也可以实现进入动画，这样也更统一，看个人喜好。

  <style name="SelectPopupWindow">        <item name="android:windowEnterAnimation">@anim/p_in</item>    </style>

p_in.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <alpha        android:duration="500"        android:fromAlpha="0"        android:toAlpha="1"/></set>

布局部分就是简单的gridview，布局可以有多种方式来实现。可以直接用View标签来实现阴影效果。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:orientation="vertical"    android:background="#88000000"    android:layout_height="match_parent">    <GridView        android:id="@+id/gridView"        android:scrollbars="none"        android:numColumns="3"        android:background="@color/white"        android:layout_width="match_parent"        android:layout_height="wrap_content"/></RelativeLayout>

执行：

JoinTypeSelectWindow joinTypeSelectWindow = new JoinTypeSelectWindow(getActivity());                joinTypeSelectWindow.showPopupWindow(targetView);

————— 完 ——————

一个小小的源码链接