简单定制Android控件（3） - 打造通用的PopupWindow（二）

在上一篇文章，我们初步定制了一个顶级Popup父类，这次我们就继承这个父类开始我们的第一个popup

首先我们制定一下XML

popup_normal.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:id="@+id/click_to_dismiss"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/popup_bg"
        android:paddingLeft="25dp"
        android:paddingRight="25dp"
        >

        <LinearLayout
            android:id="@+id/popup_anima"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_centerInParent="true"
            android:background="@android:color/white"
            >
            <TextView
                android:id="@+id/tx_1"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:gravity="center"
                android:text="test1"/>
            <View
                style="@style/line_style"/>
            <TextView
                android:id="@+id/tx_2"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:gravity="center"
                android:text="test2"/>
            <View
                style="@style/line_style"/>
            <TextView
                android:id="@+id/tx_3"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:gravity="center"
                android:text="test3"/>

        </LinearLayout>
    </RelativeLayout>

</RelativeLayout>

其中的一些参数这里写一下：

line_style:

    <style name="line_style">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">0.5dp</item>
        <item name="android:background">@color/line_bg</item>
        <item name="android:layout_margin">2dp</item>
    </style>

colors:

<color name="popup_bg">#8f000000</color>
<color name="line_bg">#CDCDCD</color>

效果如图：

可以看到，我们有一个主体的窗口，也就是选择窗口，里面有三个item，然后背景是透明灰色，这一切我们都可以自定义。

然后写上我们的NormalPopup

/**
 * Created by 大灯泡 on 2016/1/15.
 * 普通的popup
 */
public class NormalPopup extends BasePopupWindow implements View.OnClickListener{

    private View popupView;

    public NormalPopup(Activity context) {
        super(context);
        bindEvent();
    }



    @Override
    public Animation getAnimation() {
        return getDefaultScaleAnimation();
    }

    @Override
    public AnimationSet getAnimationSet() {
        return null;
    }

    @Override
    public View getInputView() {
        return null;
    }

    @Override
    public View getDismissView() {
        return popupView.findViewById(R.id.click_to_dismiss);
    }

    @Override
    public View getPopupView() {
        popupView= LayoutInflater.from(mContext).inflate(R.layout.popup_normal,null);
        return popupView;
    }

    @Override
    public View getAnimaView() {
        return popupView.findViewById(R.id.popup_anima);
    }

    private void bindEvent() {
        if (popupView!=null){
            popupView.findViewById(R.id.tx_1).setOnClickListener(this);
            popupView.findViewById(R.id.tx_2).setOnClickListener(this);
            popupView.findViewById(R.id.tx_3).setOnClickListener(this);
        }

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.tx_1:
                ToastUtils.ToastMessage(mContext,"click tx_1");
                break;
            case R.id.tx_2:
                ToastUtils.ToastMessage(mContext,"click tx_2");
                break;
            case R.id.tx_3:
                ToastUtils.ToastMessage(mContext,"click tx_3");
                break;
            default:
                break;
        }

    }
}

可以看到，代码看起来十分的清晰

ps:在这次我添加了一个抽象方法，getDismissView();

添加这个方法的原因是因为很多时候我们需要点击灰色地方自动消掉popup，但是因为我们默认是mathc_parent，因此点击灰色部分其实是属于点击popup里面的，因此是无法消掉popup，所以我们添加这个方法，在父类构造器加入点击事件，我们手动将其dismiss掉，就达到了这种效果了

父类更改如下：

    public BasePopupWindow(Activity context) {
        mContext = context;

        mPopupView = getPopupView();
        mPopupView.setFocusableInTouchMode(true);
        //默认占满全屏
        mPopupWindow =
            new PopupWindow(mPopupView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        //指定透明背景，back键相关
        mPopupWindow.setBackgroundDrawable(new ColorDrawable());
        mPopupWindow.setFocusable(true);
        mPopupWindow.setOutsideTouchable(true);
        //无需动画
        mPopupWindow.setAnimationStyle(0);

        //=============================================================为外层的view添加点击事件，并设置点击消失
        if (getDismissView()!=null) {
            getDismissView().setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dismiss();
                }
            });
            getAnimaView().setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                }
            });
        }
    }

animaView也给一个clickListener是为了顺利的把事件传递下去。

至于如何展示。。。。那就更简单了。。。

new NormalPopup(context).showPopupWindow();

一句话完事

效果图：

下一篇，咱们弄一个从底部弹上来的popup