尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

XPopup 使用指南:一个依赖搞定确认、选择、快捷菜单与抽屉

XPopup 使用指南:一个依赖搞定确认、选择、快捷菜单与抽屉 XPopup 使用指南一个依赖搞定确认、选择、快捷菜单与抽屉【免费下载链接】XPopupXPopup2.0版本重磅来袭2倍以上性能提升带来可观的动画性能优化和交互细节的提升功能强大交互优雅动画丝滑的通用弹窗可以替代DialogPopupWindowPopupMenuBottomSheetDrawerLayoutSpinner等组件自带十几种效果良好的动画 支持完全的UI和动画自定义(Powerful and Beautiful Popup for Androidcan absolutely replace DialogPopupWindowPopupMenuBottomSheetDrawerLayoutSpinner. With built-in animators , very easy to custom popup view.)项目地址: https://gitcode.com/GitHub_Trending/xpo/XPopupAndroid 里写弹窗总有点烦Dialog 样式难调、样板代码多PopupWindow 定位麻烦还容易崩BottomSheet 只管底部DrawerLayout 得包住整页布局。XPopup 就是一个通用 Android 弹窗库用来替代 Dialog、PopupWindow、PopupMenu、BottomSheet、DrawerLayout、Spinner 这些组件——自带十几种现成动画、手势拖拽和键盘适配内置效果不满意时继承一个类就能自定义。一行依赖接入 XPopup工程根目录的build.gradle加上 jitpack 仓库allprojects { repositories { maven { url https://jitpack.io } } }模块的build.gradle里加依赖注意compileSdkVersion要 29dependencies { implementation com.github.li-xiaojun:XPopup:2.9.19 // XPopup 内部会用到这三个库 implementation androidx.appcompat:appcompat:1.3.1 implementation com.google.android.material:material:1.4.0 implementation androidx.recyclerview:recyclerview:1.2.1 }想先跑通再细看可以git clone https://gitcode.com/GitHub_Trending/xpo/XPopup示例源码都在 app/src/main/java/com/lxj/xpopupdemo/ 下每种弹窗都有可运行的 Demo 页。确认与取消操作别再手写 Dialog 了 场景删除、退出、支付这类需要用户点头的操作加上等待结果的 Loading。// 确认弹窗标题、内容、确定回调就这么多 new XPopup.Builder(this) .asConfirm(提示, 确定要删除这条记录吗, () - doDelete()) .show(); // Loading 弹窗请求期间挡住交互防重复点击 new XPopup.Builder(this).asLoading(加载中...).show();为什么用它居中的半透明蒙层、进出动画、按钮状态都由库处理好了你只关心业务回调。带取消按钮、自定义按钮文案的重载也有签名都能从 XPopup.java 里直接查到。列表选择弹窗从底部选一项 场景分享面板、城市选择、筛选条件——选项在 310 个左右一屏放得下。new XPopup.Builder(this) .asBottomList(请选择, new String[]{选项A, 选项B, 选项C}, (position, text) - toast(选中了 text)) .show();为什么用它上滑关闭手势和嵌套滚动是内置的——你在弹窗里塞个长列表 RecyclerView滚动不会和手势冲突。单选场景再传一个初始选中下标列表自带勾选效果不用自己维护选中态。快捷菜单依附在任意控件上 场景消息列表的「更多」、商品筛选下拉、朋友圈点赞那种小菜单——菜单位置必须贴着被点的控件。// 依附于某个 View new XPopup.Builder(this) .atView(targetView) // 自动判断显示在上方还是下方防止越界 .hasShadowBg(false) // 菜单类弹窗一般不要蒙层 .asAttachList(new String[]{分享, 收藏, 举报}, null, (position, text) - handle(text)) .show();如果要在「触摸的那个点」弹出而不只是控件边界// 必须先于事件发生去 watch 这个 View new XPopup.Builder(this).watchView(targetView); targetView.setOnLongClickListener(v - { XPopup.fixLongClick(v); // 弹窗弹出后阻止下层列表继续滑动 new XPopup.Builder(this).atView(v).hasShadowBg(false) .asAttachList(new String[]{复制, 删除}, null, (p, t) - {}) .show(); return true; });为什么用它坐标计算全交给库控件靠近屏幕边缘时会自动翻方向自己算偏移很容易在全面屏机型上翻车。侧边导航抽屉不用把页面包进 DrawerLayout 场景侧边菜单、左右导航面板。好处是和页面布局解耦——任何页面随时弹不需要改根布局。// 自定义抽屉继承 DrawerPopupView 写好自己的布局见下一节 new XPopup.Builder(this) .asCustom(new MyDrawerPopup(this)) // 默认从左侧滑出 .show(); // 换成右侧 new XPopup.Builder(this) .popupPosition(PopupPosition.Right) .asCustom(new MyDrawerPopup(this)) .show();为什么用它手势拖拽关闭、状态栏阴影这些 DrawerLayout 要自己接的活这里直接内置了。进阶自定义弹窗与动画定制自定义弹窗就两步继承基类、指定布局。以居中弹窗为例public class MyCenterPopup extends CenterPopupView { public MyCenterPopup(Context context) { super(context); } Override protected int getImplLayoutId() { return R.layout.my_center_popup; } Override protected void onCreate() { // 用法和 Activity 的 onCreate 一样 super.onCreate(); findViewById(R.id.btn_ok).setOnClickListener(v - dismiss()); } }new XPopup.Builder(this).asCustom(new MyCenterPopup(this)).show();基类按弹窗位置选居中CenterPopupView、底部BottomPopupView、抽屉DrawerPopupView都在 library/src/main/java/com/lxj/xpopup/core/ 里。选对基类手势和键盘逻辑就自动跟上了这是自定义弹窗成本低的根本原因。动画是独立的两条路// 路线一内置的缩放、淡入、平移动画直接挑 new XPopup.Builder(this) .asConfirm(提示, 内容, () - {}) .popupAnimation(PopupAnimation.Scale) .show();// 路线二自己写。显示/消失各一个方法targetView 就是要动的 View public class MyAnimator extends PopupAnimator { public MyAnimator(View target, int duration) { super(target, duration); } Override public void initAnimator() { } Override public void animateShow() { observerAnimator(targetView.animate().alpha(1).setDuration(getDuration())).start(); } Override public void animateDismiss() { observerAnimator(targetView.animate().alpha(0).setDuration(getDuration())).start(); } } // 替换到任意弹窗上 BasePopupView pv new XPopup.Builder(this).asConfirm(提示, 内容, () - {}); pv.setAnimator(new MyAnimator(pv)); pv.show();为什么要这么拆布局管「内容」、动画器管「动」两者正交你的任何布局都能配任何动画不用为每种效果重写一套弹窗。你可能不知道的隐藏技能拖拽关闭底部弹窗上滑、居中弹窗下滑、抽屉横向拖动都是默认行为不用写手势代码确实不想让用户拖时再设enableDrag(false)。键盘适配弹窗里有 EditText 时会自动坐到软键盘上方moveUpToKeyboard默认开启autoOpenSoftInput(true)还能弹窗即弹键盘评论弹窗这类不想随键盘上移的设moveUpToKeyboard(false)即可。生命周期托管XPopup 自动监听宿主 Activity/Fragment 的生命周期页面销毁时自动释放资源页面直接 finish 的场景也不泄漏一次性弹窗建议加isDestroyOnDismiss(true)关掉即回收对象。后台弹出enableShowWhenAppBackground(true)一行代码需悬浮窗权限适合全局提醒类需求。XPopup 避坑清单现象show() 了但弹窗不出现甚至崩溃 →原因不在主线程调用或 Activity/Fragment 还没就绪 →解决确保主线程、页面可见时再弹Fragment 场景注意 host 传对 Context。现象内存占用持续增长 →原因每次new XPopup.Builder(...)却从不回收 →解决一次性弹窗加isDestroyOnDismiss(true)要复用的弹窗持有引用再次show()而不是新建。现象依附弹窗位置对不上点击处 →原因没有先监视目标 View →解决先watchView(targetView)再在事件回调里atView(v)弹出长按场景补一句XPopup.fixLongClick(v)。现象弹窗位置被键盘顶得怪异 →原因键盘适配策略和场景不匹配 →解决想让弹窗跟着键盘上移就保持默认moveUpToKeyboard(true)弹窗内含滚动区时考虑改false避免二次跳动。现象动画掉帧 →原因布局层级过深或动画期间干了重活 →解决精简弹窗布局嵌套耗时逻辑挪出动画回调选轻量动画器。现象构建报subsampling-scale-image-view版本冲突 →原因项目里也引了这个库 →解决对 XPopup 的依赖做exclude排除即可。写在最后把项目里的弹窗统一换成 XPopup内置能力覆盖八成场景剩下两成一个子类就补上了。先跑通示例工程细节会在用的过程中自然学会。【免费下载链接】XPopupXPopup2.0版本重磅来袭2倍以上性能提升带来可观的动画性能优化和交互细节的提升功能强大交互优雅动画丝滑的通用弹窗可以替代DialogPopupWindowPopupMenuBottomSheetDrawerLayoutSpinner等组件自带十几种效果良好的动画 支持完全的UI和动画自定义(Powerful and Beautiful Popup for Androidcan absolutely replace DialogPopupWindowPopupMenuBottomSheetDrawerLayoutSpinner. With built-in animators , very easy to custom popup view.)项目地址: https://gitcode.com/GitHub_Trending/xpo/XPopup创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表