简介
qmui 提供一个浮层，支持自定义浮层的内容，支持在指定 View 的任一方向旁边展示该浮层，支持自定义浮层出现/消失的动画。
开始使用
qmui
- 引入库
请确保配置了 JCenter 仓库源，然后直接引用:
implementation "com.qmuiteam:qmui:2.0.0-alpha10" 至此，QMUI 已被引入项目中。 - 配置主题
把项目的 theme 的 parent 指向 QMUI.Compat，至此，QMUI 可以正常工作。
<style name="Theme.QMUIDemo" parent="QMUI.Compat.NoActionBar"></style>
普通 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() {
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() {
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() {
public void onDismiss() {
Toast.makeText(PopupActivity.this, "onDismiss", Toast.LENGTH_SHORT).show();
}
})
.show(view);
// 这里只是演示，实际情况应该考虑数据加载完成而 Popup 被 dismiss 的情况
textView.postDelayed(new Runnable() {
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() {
public void onBlankClick(QMUIFullScreenPopup popup) {
Toast.makeText(PopupActivity.this, "点击到空白区域", Toast.LENGTH_SHORT).show();
}
})
.onDismiss(new PopupWindow.OnDismissListener() {
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() {
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() {
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() {
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() {
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() {
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() {
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() {
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() {
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() {
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() {
public void onClick(QMUIQuickAction quickAction, QMUIQuickAction.Action action, int position) {
quickAction.dismiss();
Toast.makeText(PopupActivity.this, "查询成功", Toast.LENGTH_SHORT).show();
}
}
))
.show(view);
}
