自定义PopupWindow--可扩展操作

最新推荐文章于 2019-12-31 11:09:27 发布

原创最新推荐文章于 2019-12-31 11:09:27 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

64 篇文章

订阅专栏

本文介绍如何创建自定义的PopupWindow，强调了控件的可扩展性，并提供了从下往上弹出的动画效果实现。在styles文件中定义了动画样式，最终展示出了效果截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在很多人喜欢自定义控件，这样可以满足各种各样的操作，这段时间我也试着弄了一个自定义的popupwindow仅供参考。(drawable包中：mdpi：320x480 hdpi：480x800、480x854 xhdpi：至少960*720 xxhdpi：1280×720 )

1.动画效果：这里使用从下往上弹出的效果，可以自己定义喜欢的效果

2.把效果写入styles文件中：

<!-- 弹框的效果-->
<style name="AnimBottom">
    <item name="android:windowEnterAnimation">@anim/pop_show_anim</item>
    <!-- 指定显示的动画xml -->
    <item name="android:windowExitAnimation">@anim/pop_hidden_anim</item>
    <!-- 指定消失的动画xml -->
</style>

3.这里用到了圆角的TextView，我们可以写一在drawable文件夹写入text_item_bg.xml然后在布局文件xml中使用：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 连框颜色值 -->
    <item>
        <shape>
            <solid android:color="#dddddd" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- 主体背景颜色值 -->
    <item android:bottom="0.6dp" android:right="0.6dp" android:left="0.6dp" android:top="0.6dp">
        <shape>
            <solid android:color="#ffffff" />
            <corners android:radius="8dp" />
            <padding android:left="0.6dp" android:top="0.6dp" android:right="0.6dp"
                     android:bottom="0.6dp" />

        </shape>
    </item>
</layer-list>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:id="@+id/pop_layout">
    <!--android:background="@color/transparent"-->

    <!-- <LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:orientation="vertical"/>-->

    <TextView
        android:background="@drawable/text_item_bg"
        android:id="@+id/tv_action_one"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginBottom="5dp"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="xx"
        android:gravity="center"
        android:textColor="#00ad64"
        android:textSize="18dp"/>

    <TextView
        android:background="@drawable/text_item_bg"
        android:id="@+id/tv_action_two"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="xx"
        android:gravity="center"
        android:textColor="#00ad64"
        android:textSize="18dp"/>

    <TextView
        android:visibility="gone"
        android:background="@drawable/text_item_bg"
        android:id="@+id/tv_action_three"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="xx"
        android:gravity="center"
        android:textColor="#00ad64"
        android:textSize="18dp"/>
    <!--有需要可以自己再添加多个操作项-->

    <TextView
        android:background="@drawable/text_item_bg"
        android:id="@+id/tv_cancel_show"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="15dp"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="取消"
        android:gravity="center"
        android:textColor="#999999"
        android:textSize="18dp"/>

</LinearLayout>

4.开始重写PopupWindow

/**
 * Created by lan.zheng on 2016/8/1.
 */
public class BottomSelectorPopDialog extends PopupWindow {
    private TextView mActionOneTextView;
    private TextView mActionTwoTextView;
    private TextView mActionThreeTextView;
    private TextView mCancelTextView;
    private View mMenuView;
    public BottomSelectorPopDialog(Activity context,String[] nameList, View.OnClickListener itemsOnClick) {
        super(context);
//        super(context,R.style.transparentFrameWindowStyle);
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mMenuView = inflater.inflate(R.layout.popup_dialog_publish, null);
        mActionOneTextView = (TextView) mMenuView.findViewById(R.id.tv_action_one);
        mActionTwoTextView = (TextView) mMenuView.findViewById(R.id.tv_action_two);
        mCancelTextView = (TextView)mMenuView.findViewById(R.id.tv_cancel_show) ;

        if(nameList.length == 3){  //想要更多的操作按钮，可以继续添加
            mActionThreeTextView = (TextView)mMenuView.findViewById((R.id.tv_action_three));
            mActionThreeTextView.setVisibility(View.VISIBLE);
            mActionThreeTextView.setText(nameList[2]);
            mActionThreeTextView.setOnClickListener(itemsOnClick);
        }

        mActionOneTextView.setText(nameList[0]);
        mActionTwoTextView.setText(nameList[1]);
        mActionOneTextView.setOnClickListener(itemsOnClick);
        mActionTwoTextView.setOnClickListener(itemsOnClick);

        //点击取消
        mCancelTextView.setOnClickListener(itemsOnClick);
        //设置SelectPicPopupWindow的View
        this.setContentView(mMenuView);
        //设置SelectPicPopupWindow弹出窗体的宽
        this.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
        //设置SelectPicPopupWindow弹出窗体的高
        this.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
        this.setAnimationStyle(R.style.AnimBottom);
//        设置SelectPicPopupWindow弹出窗体可点击
        this.setFocusable(true);
        //实例化一个ColorDrawable颜色为半透明
//        ColorDrawable dw = new ColorDrawable(0xb0000000);
        //实例化一个ColorDrawable颜色为全透明！！！为了和window底色融合，设置#00ffffff
//         ColorDrawable dw = new ColorDrawable(context.getResources().getColor(R.color.transparent));
        ColorDrawable dw = new ColorDrawable(context.getResources().getColor(R.color.popup_window_color));
        //设置SelectPicPopupWindow弹出窗体的背景
        this.setBackgroundDrawable(dw);
        //mMenuView添加OnTouchListener监听判断获取触屏位置如果在选择框外面则销毁弹出框
        mMenuView.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event) {

                int height = mMenuView.findViewById(R.id.pop_layout).getTop();
                int y=(int) event.getY();
                if(event.getAction()==MotionEvent.ACTION_UP){
                    if(y<height){
                        dismiss();
                    }
                }
                return true;
            }
        });
    }
}

5.使用方法：

private void backgroundAlpha(float b) {
        WindowManager.LayoutParams layoutParams = this.getWindow().getAttributes();
        layoutParams.alpha = b;
        this.getWindow().setAttributes(layoutParams);
    }

    public BottomSelectorPopDialog mBottomSelectorPopDialog;
    private void popupSelectOpration(String[] list) {
        backgroundAlpha(0.8f); 
        mBottomSelectorPopDialog = new BottomSelectorPopDialog(this, list, new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mBottomSelectorPopDialog.dismiss();
                switch (v.getId()) {
                    case R.id.tv_action_one:
                        Log.d("photo","tv_action_one");
                        break;
                    case R.id.tv_action_two:
                        Log.d("photo","tv_action_two");
                        break;
                    case R.id.tv_cancel_show:
                        break;
                    default:
                        break;
                }
            }
        });
        //显示窗口消失后让背景恢复
        mBottomSelectorPopDialog.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                backgroundAlpha(1f);
            }
        });
        mBottomSelectorPopDialog.showAtLocation(this.findViewById(R.id.container), Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0); //设置layout在PopupWindow中显示的位置
    }<pre name="code" class="java">//下面为用到时调用的方法

String[] list = {"从手机选择","拍照"};
popupSelectOpration(list);  //弹框显示选项

效果截图如下：