使用PopupWindow优化显示效果

在ListView里点击项弹出Dialog这样的状况是比较常见的，但当一个按钮在视图的左上方，点击出现管理菜单时，如果也有Dialog显示，第一，觉得比较丑，第二还得设置ListView项，或其它的东西，它还有一层灰色遮罩层遮住下面的内容，于是我就用了PopupWindow来处理。
用PopupWindow有一个问题，当你想要它关闭时，通常会想像Dialog那样，在它的范围外点击也关闭，所以要在Activity里面添加一些代码：

@Override
     public boolean dispatchTouchEvent(MotionEvent event) {
         if (mPopupWindow==null||!mPopupWindow.isShowing()) {
             return super.dispatchTouchEvent(event);
         }
         boolean isOut=isOutOfBounds(event);
         Log.d(TAG, "isOut:"+isOut+" event.getAction():"+event.getAction());
         if (event.getAction()==MotionEvent.ACTION_DOWN&&isOut) {
             mPopupWindow.dismiss();
             return true;
         }

         return false;
     }

     /**
      * 计算是否在PopupWindow外面点击
      *
      * @param event
      * @return
      */
     private boolean isOutOfBounds(MotionEvent event) {
         final int x=(int) event.getX();
         final int y=(int) event.getY();
         final int slop=ViewConfiguration.get(Activity2.this).getScaledWindowTouchSlop();
         final View decorView=mPopupWindow.getContentView();
         return (x<-slop)||(y<-slop)
             ||(x>(decorView.getWidth()+slop))
             ||(y>(decorView.getHeight()+slop));
     }

 Activity2里面有mPopupWindow。

这样就可以了，当你点击PopupWindow外的区域，会关闭的，注意有一点，如果使用ActivityGroup，在切换标签时，有时不会关闭，所以我只能在onPause里把它手动关闭了。

剩下的就是PopupWindow了，用这个词搜索，多数的代码总是有那么一段是相同的，而且没有讲到重点。

点击左右上方的按钮，调用显示PopupWindow：
private void showPopupWindow(View parent) {
        if (null==mPopupWindow) {
            initPopuptWindow();
        }

        if (groupId==-1||groupId==-2) {
            editGroup.setVisibility(View.GONE);
            addGroupMember.setVisibility(View.GONE);
            delGroupMember.setVisibility(View.GONE);
            delGroup.setVisibility(View.GONE);
        } else {
            editGroup.setVisibility(View.VISIBLE);
            addGroupMember.setVisibility(View.VISIBLE);
            delGroupMember.setVisibility(View.VISIBLE);
            delGroup.setVisibility(View.VISIBLE);
        }
        mPopupWindow.showAsDropDown(parent);
parent就是点击的按钮，showAsDropDown这个方法会自动计算显示的位置在parent下面。
    }

private void initPopuptWindow() {
        View popupWindow_view=getLayoutInflater().inflate(
            R.layout.popup_win, null, false);

        mPopupWindow=new PopupWindow(popupWindow_view);
        mPopupWindow.setWindowLayoutMode(ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.WRAP_CONTENT);

这点很重要，如果你用的是PopupWindow(width,height)这样的构造方法，出现的东西就是固定高宽的，显示不是所需要的。设置这样的布局参数后，会自动处理布局的大小。

        //mPopupWindow.setOutsideTouchable(false); 这句似乎没有太多效果，查看源码，没发现什么好处。

        addContact=(Button) popupWindow_view.findViewById(R.id.add_contact);
        addGroup=(Button) popupWindow_view.findViewById(R.id.add_group);
        editGroup=(Button) popupWindow_view.findViewById(R.id.edit_group);
        addGroupMember=(Button) popupWindow_view.findViewById(R.id.add_group_member);
        delGroupMember=(Button) popupWindow_view.findViewById(R.id.del_group_member);
        delGroup=(Button) popupWindow_view.findViewById(R.id.del_group);
        
        addContact.setOnClickListener(popupItemClickListener);
        addGroup.setOnClickListener(popupItemClickListener);
        editGroup.setOnClickListener(popupItemClickListener);
        addGroupMember.setOnClickListener(popupItemClickListener);
        delGroupMember.setOnClickListener(popupItemClickListener);
        delGroup.setOnClickListener(popupItemClickListener);
    }

然后就是一个监听器了：
mPopupWindow.dismiss();
            switch (view.getId()){
                case R.id.add_contact: //添加
                    break;
                
                case R.id.add_group:  //创建
                    break;
｝
、。。。。。。。。。。
｝

这样处理有点傻，因为我的布局文件 里存着固定的按钮。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:gravity="center"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:background="@drawable/management_menu_bg" android:layout_margin="0dip">

    <Button android:id="@+id/add_contact" android:textColor="@color/white"
        android:text="@string/add_contact" android:background="@drawable/popup_bg"
        android:layout_width="wrap_content" android:layout_height="36dip"
        android:padding="4dip"/>

    <Button android:id="@+id/add_group" android:textColor="@color/white"
        android:text="@string/add_group" android:background="@drawable/popup_bg"
        android:layout_width="fill_parent" android:layout_height="36dip"
        android:padding="4dip"/>

    <Button android:id="@+id/edit_group" android:textColor="@color/white"
        android:text="@string/edit_group_name" android:background="@drawable/popup_bg"
        android:layout_width="fill_parent" android:layout_height="36dip"
        android:padding="4dip"/>

    <Button android:id="@+id/add_group_member" android:textColor="@color/white"
        android:text="@string/group_add_member" android:background="@drawable/popup_bg"
        android:layout_width="fill_parent" android:layout_height="36dip"
        android:padding="4dip"/>

    <Button android:id="@+id/del_group_member" android:textColor="@color/white"
        android:text="@string/group_del_member" android:background="@drawable/popup_bg"
        android:layout_width="fill_parent" android:layout_height="36dip"
        android:padding="4dip"/>

    <Button android:id="@+id/del_group" android:textColor="@color/white"
        android:text="@string/del_group" android:background="@drawable/popup_bg"
        android:layout_width="fill_parent" android:layout_height="36dip"
        android:padding="4dip"/>
</LinearLayout>  

因为功能相对固定，所以一次性把所有的按钮添加到布局文件中，在初始化时控制着显示与隐藏了。有点弱弱。
效果图如下：

评论

1 楼 Will.Du 2013-07-05  

dialog背景可以设为全透明。。。。