系列文章:
创造者:李晓俊
GitHub:junixapp/XPopupGitee:XPopup: 🔥XPopup2.0版本重磅来袭
学习文档:强大,美观,优雅的通用弹窗XPopup!-玩Android - wanandroid.com
可能需要的知识: 探索 Material 3:全新设计系统和组件库的介绍-CSDN博客
一、概述
(一)简介
🔥XPopup2.0版本重磅来袭,可以替代Dialog,PopupWindow,PopupMenu,BottomSheet,DrawerLayout,Spinner等组件,自带十几种效果良好的动画, 支持完全的UI和动画自定义!
(二)设计思路
常见的弹窗场景 | ||
---|---|---|
Center类型 | 在中间弹出 | 比如确认和取消弹窗,Loading弹窗 |
Bottom类型 | 从页面底部弹出 | 分享窗体,知乎的从底部弹出的评论列表 |
Attach类型 | 弹窗的位置需要依附于某个View或者某个触摸点 | 类似系统的PopupMenu效果一样,但PopupMenu的自定义性很差 |
DrawerLayout类型 | 从窗体的左/右边弹出,并支持手势拖拽; | 好与界面解耦,可以在任何界面显示DrawerLayout |
(三)动画设计
为了增加交互的趣味性,遵循Material Design,在设计动画的时候考虑了很多细节,过渡,层级的变化。具体可以从Demo中感受。
二、使用步骤
添加依赖
1.build.grade(Module:app)
//确保compileSdk >= 29
compileSdk 33
……
//XPopup 版本最新
implementation 'com.github.li-xiaojun:XPopup:2.3.4'
//必须添加的依赖库,版本可以不一致
implementation 'androidx.appcompat:appcompat:1.6.1'
implementation 'com.google.android.material:material:1.9.0'
implementation 'androidx.recyclerview:recyclerview:1.3.0'
2.build.grade(Project:项目名称)
allprojects {
repositories {
google()
mavenCentral()
maven { url 'https://jitpack.io' }
}
}
//同时确保注释掉settings.grade
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
}
}
3. 冲突(有则改,无则忽略)
XPopup依赖了subsampling-scale-image-view,如果项目中也依赖了这个库并且版本冲突,可以做个exclude:
implementation ('com.github.li-xiaojun:XPopup:2.3.4'){
exclude group: "com.davemorrissey.labs",
module: "subsampling-scale-image-view-androidx"
}
接下来分类型说明不同类型的弹窗的使用
(一)内置弹窗
基本设置方法 | 介绍 |
---|---|
hasNavigation() | 导航栏:默认显示,true为隐藏 |
isViewMode() | 实现方式:默认Dialog实现,true为View实现 区别: 1.Dialog实现:独立Window渲染,性能是View实现的2倍以上,但部分与输入法交互的效果无法实现(如根据输入进行联想搜索,原因:输入法也是一个Dialog,Android中无法实现2个Dialog同时获取焦点,但View可以轻松实现) |
isDestoryOnDismiss() | 在弹窗消失后立即释放资源,来杜绝内存泄漏 true开启,弹窗只使用一次 false关闭,弹窗对象复用 |
hasBlurBg() | 设置背景为高斯模糊背景 默认false |
dismissOnTouchOutside() | 点击弹窗外面关闭弹窗 默认为true |
autoDismiss() | 当前操作完成后自动关闭弹窗, 默认为true |
popupAnimation() | 弹窗动画器,默认情况下,已经设置了最佳动画,若不喜欢。可以修改 PopAnimation.NoAnimation |
show() 、dismiss() | 展示、关闭弹窗 |
asConfirm | |
title | 标题 |
content | 内容 |
cancelBtnText | "取消"按钮文本(左边按钮文本) |
confirmBtnText | "确认"按钮文本(右边按钮文本) |
cancelListener | "取消"按钮点击事件(左边按钮点击事件) |
cancelBtnListener | "确认"按钮点击事件(右边按钮点击事件) |
isHideCancel | 是否隐藏左侧按钮(设置单个点击按钮使用) |
为了方便使用,作者已经写好了集中常见的弹窗,我们直接调用就好