自己动手撸一个Android中PopupWindow

效果图如下：

GIF.gif

实现流程：

1、编写列表Item布局：area_code_item_view.

很简单，就是一个TeztView

<?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="wrap_content"
    android:orientation="vertical" >
    
    <TextView
        android:id="@+id/area_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:text="123"
        android:textColor="@color/c_black"
        android:textSize="@dimen/text_size_20" />
    
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@color/c_bg_gray_light" />

</LinearLayout>

图片.png

2、编写列表适配器Adapter：JobPopupWindowAdapter

JobPopupWindowAdapter 继承于BaseAdapter，构造方法中将数据源以及选择某一项数据的回调方法传进来

  public JobPopupWindowAdapter(Context context,ArrayList<CodeDataResponse> data, PopupWindowCodeItemSelectInterface selectInterface) {
        mContext = context;
        mData = data;
        mSelectInterface = selectInterface;
    }

PopupWindowCodeItemSelectInterface 是用于选择PopupWindow中列表的某一项

public interface PopupWindowCodeItemSelectInterface {
    //这里按照自己的数据源做更改，我这里的数据源是通过数据字典接口获取，同事需要用到文字对应的编码
    public void onItemSelected(CodeDataResponse item);
}

完整代码如下：

public class JobPopupWindowAdapter extends BaseAdapter {

    private Context mContext;
    private ArrayList<CodeDataResponse> mData;
    private PopupWindowCodeItemSelectInterface mSelectInterface;

    public JobPopupWindowAdapter(Context context,ArrayList<CodeDataResponse> data, PopupWindowCodeItemSelectInterface selectInterface) {
        mContext = context;
        mData = data;
        mSelectInterface = selectInterface;
    }


    @Override
    public int getCount() {
        return mData != null ? mData.size() : 0;
    }

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(R.layout.area_code_item_view, null);
        }

//        String areaCodeStr = mData.get(position);
        CodeDataResponse codeDataResponse = mData.get(position);

        TextView areaCode = (TextView) convertView.findViewById(R.id.area_code);
        areaCode.setText(codeDataResponse.aaa103);
        convertView.setTag(codeDataResponse);
        convertView.setOnClickListener(mOnClickListener);

        return convertView;
    }

    private View.OnClickListener mOnClickListener = new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            if (mSelectInterface != null) {
                CodeDataResponse  mCodeDataResponse = (CodeDataResponse)v.getTag();
//                String code = String.valueOf(v.getTag());
                mSelectInterface.onItemSelected(mCodeDataResponse);
            }
        }
    };

}

3、封装通用的显示PopupWindow的方法：showPupupWindow(JobPopupWindowAdapter amAdapter,View view)

/**
     * 选择的popupwindow
     *  amAdapter   适配器
     *  view        需要在对应的那个控件中显示
     */
    private void showPupupWindow(JobPopupWindowAdapter amAdapter,View view) {
        mView = view;
        //PupupWindow的宽
        int windowWidth = 450;//这里可以修改成动态修改成控件的长度
        //PupupWindow的高
        int windowHeight = 300;
        if (mPopupWindowWindow == null) {
            View contentView = LayoutInflater.from(mContext).inflate(R.layout.popup_window_listview_layout, null);
            mPopupWindowWindow = new PopupWindow(contentView, windowWidth, windowHeight);
            // 设置点击屏幕其它地方弹出框消失
            mPopupWindowWindow.setFocusable(true);
            mPopupWindowWindow.setOutsideTouchable(true);
            mPopupWindowWindow.setBackgroundDrawable(new BitmapDrawable());

            ListView listView = (ListView) contentView.findViewById(R.id.listview);
            listView.setAdapter(amAdapter);
        }
        if (!mPopupWindowWindow.isShowing()) {
            int[] location = new int[2];
            view.getLocationOnScreen(location); // 获取组件在屏幕中的位置

            mPopupWindowWindow.showAsDropDown(view,  0, 0);
        }
    }

4、点击PopupWindow列表中具体某一项，PopupWindow消失的方法 hidePopupWindow()

    /**
     * 点击item清除PopupWindow
     */
    private void hidePopupWindow() {
        if (mPopupWindowWindow == null) {
            LogUtils.d("mPopupWindowWindow == null");
        }
        if (mPopupWindowWindow != null && mPopupWindowWindow.isShowing()) {
            mPopupWindowWindow.dismiss();
            LogUtils.d("hidePopupWindow=====dismiss");
        }
    }

5、调用步骤

首先在对应的Activity和Fragment中实现选择的PopupWindowCodeItemSelectInterface 接口，实现对应的方法

ublic class WriteJobIntentionInfoActivity extends BaseActivity implements PopupWindowCodeItemSelectInterface{
        @Override
    public void onItemSelected(CodeDataResponse item) {
        if (mView.getId() == rltJobs.getId()){
            etJobs.setText(item.aaa103);
            mJobNameNum = item.aaa102;
        }else  if (mView.getId() == rltSalary.getId()){
            etSalary.setText(item.aaa103);
            mSalaryNum = item.aaa102;
        }else  if (mView.getId() == rltWorkTime.getId()){
            etWorkTime.setText(item.aaa103);
        }
        hidePopupWindow();
    }
}

接着在需要展示PopupWindow的地方，调用其方法，我这里是点击EdText的时候，onClick中的代码如下：

if (v.equals(etJobs)){  //求职岗位
            setDataToPopupWindow(mRPCodeLists,this,rltJobs);
        }else if (v.equals(etSalary)){  //薪资要求
            setDataToPopupWindow(mRSCodeLists,this,rltSalary);
        }else if (v.equals(etWorkTime)){  //到岗时间
            setDataToPopupWindow(mWDCodeLists,this,rltWorkTime);
        }

setDataToPopupWindow(mWDCodeLists,this,rltWorkTime);方法对之前的统一封装的PopupWindow展示的方法showPupupWindow（）再做一次封装，为了调用方便

    /**
     * 组装显示poupwindow的方法
     * @param mInterface
     */
    private void setDataToPopupWindow(List<CodeDataResponse> list, PopupWindowCodeItemSelectInterface mInterface, View editTextView){
        mCodes.clear();
        mCodes.addAll(list);
        mJobPopupWindowAdapter = new JobPopupWindowAdapter(mContext,mCodes, mInterface);
        showPupupWindow(mJobPopupWindowAdapter,editTextView);
    }

好了，这样子就应该可以实现上面动图的效果！