【Kevin Learn QMUI】--＞ QMUIPopup

简介

qmui 提供一个浮层，支持自定义浮层的内容，支持在指定 View 的任一方向旁边展示该浮层，支持自定义浮层出现/消失的动画。

开始使用

qmui

引入库请确保配置了 JCenter 仓库源，然后直接引用: implementation "com.qmuiteam:qmui:2.0.0-alpha10" 至此，QMUI 已被引入项目中。
配置主题把项目的 theme 的 parent 指向 QMUI.Compat，至此，QMUI 可以正常工作。

普通 PopupWindow

1. 效果图

2. 代码

private void showNormalPop(View view) {
        TextView textView = new TextView(App.CONTEXT);
        textView.setLineSpacing(QMUIDisplayHelper.dp2px(this, 4), 1.0f);
        int padding = QMUIDisplayHelper.dp2px(this, 20);
        textView.setPadding(padding, padding, padding, padding);
        textView.setText("QMUIPopup 可以设置其位置以及显示和隐藏的动画");
        textView.setTextColor(Color.BLUE);
        QMUIPopups.popup(this, QMUIDisplayHelper.dp2px(this, 250))
                .preferredDirection(QMUIPopup.DIRECTION_BOTTOM)
                .view(textView)
                .skinManager(QMUISkinManager.defaultInstance(this))
                .edgeProtection(QMUIDisplayHelper.dp2px(this, 20))
                .offsetX(QMUIDisplayHelper.dp2px(this, 20))
                .offsetYIfBottom(QMUIDisplayHelper.dp2px(this, 5))
                .shadow(true)
                .arrow(true)
                .animStyle(QMUIPopup.ANIM_GROW_FROM_CENTER)
                .onDismiss(new PopupWindow.OnDismissListener() {
                    @Override
                    public void onDismiss() {
                        Toast.makeText(PopupActivity.this, "onDismiss", Toast.LENGTH_SHORT).show();
                    }
                }).show(view);
    }

带遮罩层 PopupWindow

1. 效果图

2. 代码

private void showPop(View view) {
        TextView textView = new TextView(this);
        textView.setLineSpacing(QMUIDisplayHelper.dp2px(this, 4), 1.0f);
        int padding = QMUIDisplayHelper.dp2px(this, 20);
        textView.setPadding(padding, padding, padding, padding);
        textView.setText("通过 dimAmount() 设置背景遮罩");
        textView.setTextColor(Color.BLUE);

        QMUIPopups.popup(this, QMUIDisplayHelper.dp2px(this, 250))
                .preferredDirection(QMUIPopup.DIRECTION_BOTTOM)
                .view(textView)
                .edgeProtection(QMUIDisplayHelper.dp2px(this, 20))
                .dimAmount(0.6f)
                .animStyle(QMUIPopup.ANIM_GROW_FROM_CENTER)
                .skinManager(QMUISkinManager.defaultInstance(this))
                .onDismiss(new PopupWindow.OnDismissListener() {
                    @Override
                    public void onDismiss() {
                        Toast.makeText(PopupActivity.this, "onDismiss", Toast.LENGTH_SHORT).show();
                    }
                })
                .show(view);
    }

动态更新 PopupWindow

1. 代码

private void showLoadingPop(View view) {
        final TextView textView = new TextView(this);
        textView.setLineSpacing(QMUIDisplayHelper.dp2px(this, 4), 1.0f);
        int padding = QMUIDisplayHelper.dp2px(this, 20);
        textView.setPadding(padding, padding, padding, padding);
        textView.setText("加载中...");
        textView.setTextColor(ContextCompat.getColor(this, R.color.app_color_description));
        QMUIPopups.popup(this, QMUIDisplayHelper.dp2px(this, 250))
                .preferredDirection(QMUIPopup.DIRECTION_BOTTOM)
                .view(textView)
                .edgeProtection(QMUIDisplayHelper.dp2px(this, 20))
                .dimAmount(0.6f)
                .skinManager(QMUISkinManager.defaultInstance(this))
                .animStyle(QMUIPopup.ANIM_GROW_FROM_CENTER)
                .onDismiss(new PopupWindow.OnDismissListener() {
                    @Override
                    public void onDismiss() {
                        Toast.makeText(PopupActivity.this, "onDismiss", Toast.LENGTH_SHORT).show();
                    }
                })
                .show(view);

        // 这里只是演示，实际情况应该考虑数据加载完成而 Popup 被 dismiss 的情况
        textView.postDelayed(new Runnable() {
            @Override
            public void run() {
                textView.setText("使用 Popup 最好是一开始就确定内容宽高，" +
                        "如果宽高位置会变化，系统会有一个的移动动画不受控制，体验并不好");
            }
        }, 2000);
    }

带关闭按钮 PopupWindow

1. 效果图

2. 代码

private void showPopupWindow(View view) {
        QMUISkinValueBuilder builder = QMUISkinValueBuilder.acquire();
        QMUIFrameLayout frameLayout = new QMUIFrameLayout(this);
        frameLayout.setBackground(
                QMUIResHelper.getAttrDrawable(this, R.attr.qmui_skin_support_popup_bg));
        builder.background(R.attr.qmui_skin_support_popup_bg);
        QMUISkinHelper.setSkinValue(frameLayout, builder);
        frameLayout.setRadius(QMUIDisplayHelper.dp2px(this, 12));
        int padding = QMUIDisplayHelper.dp2px(this, 20);
        frameLayout.setPadding(padding, padding, padding, padding);

        TextView textView = new TextView(this);
        textView.setLineSpacing(QMUIDisplayHelper.dp2px(this, 4), 1.0f);
        textView.setPadding(padding, padding, padding, padding);
        textView.setText("这是自定义显示的内容");
        textView.setTextColor(Color.BLUE);

        builder.clear();
        builder.textColor(R.attr.app_skin_common_title_text_color);
        QMUISkinHelper.setSkinValue(textView, builder);
        textView.setGravity(Gravity.CENTER);

        builder.release();

        int size = QMUIDisplayHelper.dp2px(this, 200);
        FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(size, size);
        frameLayout.addView(textView, lp);

        QMUIPopups.fullScreenPopup(this)
                .addView(frameLayout)
                .closeBtn(true)
                .skinManager(QMUISkinManager.defaultInstance(this))
                .onBlankClick(new QMUIFullScreenPopup.OnBlankClickListener() {
                    @Override
                    public void onBlankClick(QMUIFullScreenPopup popup) {
                        Toast.makeText(PopupActivity.this, "点击到空白区域", Toast.LENGTH_SHORT).show();
                    }
                })
                .onDismiss(new PopupWindow.OnDismissListener() {
                    @Override
                    public void onDismiss() {
                        Toast.makeText(PopupActivity.this, "onDismiss", Toast.LENGTH_SHORT).show();
                    }
                })
                .show(view);
    }

快捷菜单 PopupWindow

1. 效果图

2. 代码

private void showMenuPopup(View view) {
        QMUIPopups.quickAction(this,
                QMUIDisplayHelper.dp2px(this, 56),
                QMUIDisplayHelper.dp2px(this, 56))
                .shadow(true)
                .skinManager(QMUISkinManager.defaultInstance(this))
                .edgeProtection(QMUIDisplayHelper.dp2px(this, 20))
                .addAction(new QMUIQuickAction.Action().icon(R.drawable.icon_quick_action_copy).text("复制").onClick(
                        new QMUIQuickAction.OnClickListener() {
                            @Override
                            public void onClick(QMUIQuickAction quickAction, QMUIQuickAction.Action action, int position) {
                                quickAction.dismiss();
                                Toast.makeText(PopupActivity.this, "复制成功", Toast.LENGTH_SHORT).show();
                            }
                        }
                ))
                .addAction(new QMUIQuickAction.Action().icon(R.drawable.icon_quick_action_line).text("划线").onClick(
                        new QMUIQuickAction.OnClickListener() {
                            @Override
                            public void onClick(QMUIQuickAction quickAction, QMUIQuickAction.Action action, int position) {
                                quickAction.dismiss();
                                Toast.makeText(PopupActivity.this, "划线成功", Toast.LENGTH_SHORT).show();
                            }
                        }
                ))
                .addAction(new QMUIQuickAction.Action().icon(R.drawable.icon_quick_action_share).text("分享").onClick(
                        new QMUIQuickAction.OnClickListener() {
                            @Override
                            public void onClick(QMUIQuickAction quickAction, QMUIQuickAction.Action action, int position) {
                                quickAction.dismiss();
                                Toast.makeText(PopupActivity.this, "分享成功", Toast.LENGTH_SHORT).show();
                            }
                        }
                ))
                .show(view);
    }

快捷菜单（多 Item） PopupWindow

1. 效果图 2. 代码

private void showMoreMenuPopup(View view) {
        QMUIPopups.quickAction(this,
                QMUIDisplayHelper.dp2px(this, 56),
                QMUIDisplayHelper.dp2px(this, 56))
                .shadow(true)
                .skinManager(QMUISkinManager.defaultInstance(this))
                .edgeProtection(QMUIDisplayHelper.dp2px(this, 20))
                .addAction(new QMUIQuickAction.Action().icon(R.drawable.icon_quick_action_copy).text("复制").onClick(
                        new QMUIQuickAction.OnClickListener() {
                            @Override
                            public void onClick(QMUIQuickAction quickAction, QMUIQuickAction.Action action, int position) {
                                quickAction.dismiss();
                                Toast.makeText(PopupActivity.this, "复制成功", Toast.LENGTH_SHORT).show();
                            }
                        }
                ))
                .addAction(new QMUIQuickAction.Action().icon(R.drawable.icon_quick_action_line).text("划线").onClick(
                        new QMUIQuickAction.OnClickListener() {
                            @Override
                            public void onClick(QMUIQuickAction quickAction, QMUIQuickAction.Action action, int position) {
                                quickAction.dismiss();
                                Toast.makeText(PopupActivity.this, "划线成功", Toast.LENGTH_SHORT).show();
                            }
                        }
                ))
                .addAction(new QMUIQuickAction.Action().icon(R.drawable.icon_quick_action_share).text("分享").onClick(
                        new QMUIQuickAction.OnClickListener() {
                            @Override
                            public void onClick(QMUIQuickAction quickAction, QMUIQuickAction.Action action, int position) {
                                quickAction.dismiss();
                                Toast.makeText(PopupActivity.this, "分享成功", Toast.LENGTH_SHORT).show();
                            }
                        }
                ))
                .addAction(new QMUIQuickAction.Action().icon(R.drawable.icon_quick_action_delete_line).text("删除划线").onClick(
                        new QMUIQuickAction.OnClickListener() {
                            @Override
                            public void onClick(QMUIQuickAction quickAction, QMUIQuickAction.Action action, int position) {
                                quickAction.dismiss();
                                Toast.makeText(PopupActivity.this, "删除划线成功", Toast.LENGTH_SHORT).show();
                            }
                        }
                ))
                .addAction(new QMUIQuickAction.Action().icon(R.drawable.icon_quick_action_dict).text("词典").onClick(
                        new QMUIQuickAction.OnClickListener() {
                            @Override
                            public void onClick(QMUIQuickAction quickAction, QMUIQuickAction.Action action, int position) {
                                quickAction.dismiss();
                                Toast.makeText(PopupActivity.this, "打开词典", Toast.LENGTH_SHORT).show();
                            }
                        }
                ))
                .addAction(new QMUIQuickAction.Action().icon(R.drawable.icon_quick_action_share).text("圈圈").onClick(
                        new QMUIQuickAction.OnClickListener() {
                            @Override
                            public void onClick(QMUIQuickAction quickAction, QMUIQuickAction.Action action, int position) {
                                quickAction.dismiss();
                                Toast.makeText(PopupActivity.this, "查询成功", Toast.LENGTH_SHORT).show();
                            }
                        }
                ))
                .addAction(new QMUIQuickAction.Action().icon(R.drawable.icon_quick_action_dict).text("查询").onClick(
                        new QMUIQuickAction.OnClickListener() {
                            @Override
                            public void onClick(QMUIQuickAction quickAction, QMUIQuickAction.Action action, int position) {
                                quickAction.dismiss();
                                Toast.makeText(PopupActivity.this, "查询成功", Toast.LENGTH_SHORT).show();
                            }
                        }
                ))
                .show(view);
    }

【Kevin Learn QMUI】--＞ QMUIPopup

最近更新

热门博客

[ 申请 ]友情链接：