XPopup
中文 | English
功能强大，UI简洁，交互优雅的通用弹窗！可以替代Dialog，PopupWindow，PopupMenu，BottomSheet，DrawerLayout，Spinner等组件，自带十几种效果良好的动画，支持完全的UI和动画自定义！它有这样几个特点：
功能强大，内部封装了常用的弹窗，内置十几种良好的动画，将弹窗和动画的自定义设计的极其简单；目前还没有出现XPopup实现不了的弹窗效果。内置弹窗的UI是固定的，但允许你使用项目已有的布局或者自己的布局，同时还能用上XPopup提供的动画，交互和逻辑封装。UI和动画简洁，遵循Material Design，在设计动画的时候考虑了很多细节，过渡，层级的变化；或者说是模拟系统组件的动画，具体可以从Demo中感受交互优雅，实现了优雅的手势交互以及智能的嵌套滚动，具体看Demo适配全面屏，目前适配了小米，华为，谷歌，OPPO，VIVO，三星，魅族，一加全系全面屏手机通用性，项目需求复杂多变，产品经理天马行空，XPopup力求做到交互和动画通用；至于弹窗的UI和逻辑可能需要你自定义易用性，所有的自定义弹窗只需继承对应的类，实现你的布局，然后在onCreate方法写逻辑即可
编写本库的初衷有以下几点：
项目有这样常见需求：中间和底部弹出甚至可拖拽的对话框，指定位置的PopupMenu或者PopupWindow，指定区域阴影的弹出层效果市面上已有的类库要么功能不足够，要么交互效果不完美，有着普遍的缺点，就像BottomSheet存在的问题一样。比如：窗体消失的动画和背景渐变动画不一致，窗体消失后半透明背景仍然停留一会儿
设计思路：综合常见的弹窗场景，我将其分为几类：
Center类型，就是在中间弹出的弹窗，比如确认和取消弹窗，Loading弹窗Bottom类型，就是从页面底部弹出，比如从底部弹出的分享窗体，知乎的从底部弹出的评论列表，我内部会处理好手势拖拽和嵌套滚动Attach类型，就是弹窗的位置需要依附于某个View或者某个触摸点，就像系统的PopupMenu效果一样，但PopupMenu的自定义性很差，淘宝的商品列表筛选的下拉弹窗也属于这种，微信的朋友圈点赞弹窗也是这种。DrawerLayout类型，就是从窗体的坐边或者右边弹出，并支持手势拖拽；好处是与界面解耦，可以在任何界面显示DrawerLayout大图浏览类型，就像掘金那样的图片浏览弹窗，带有良好的拖拽交互体验，内部嵌入了改良的PhotoView全屏弹窗，弹窗是全屏的，就像Activity那样，可以设置任意的动画器；适合用来实现登录，选择性的界面效果。自由定位弹窗(Position)，弹窗是自由的，你可放在屏幕左上角，右下角，或者任意地方，结合强大的动画器，可以实现各种效果。
ScreenShot
快速体验
扫描二维码下载Demo：
如果二维码图片不可见，点我下载Demo体验
Gradle
首先需要添加Gradle依赖：
implementation 'com.lxj:xpopup:1.8.6' //for androidx. implementation 'com.lxj:xpopup:1.8.6-x'
必须添加的依赖库：
//版本号在26以及以上即可 implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support:recyclerview-v7:28.0.0' implementation 'com.android.support:design:28.0.0'
使用文档
具体使用方法全在WIKI中，请查看下面各个章节：
混淆
-dontwarn com.lxj.xpopup.widget.**
-keep class com.lxj.xpopup.widget.**{*;}
谁在用XPopup
我本人很希望您能点击这里附上使用这个库的App名或者公司名，这样会给我更大的动力和热情去维护这个类库。
根据热心朋友提供的信息，目前使用XPopup的产品和公司有：
打个赏
如果你觉得我帮助到了你，节省了你的时间，可以对我进行打赏（打赏时可以附上自己的大名和Github地址），金额随意，以表支持。打赏名单
深入CSS——盒子模型
大家在初学CSS时，一定都接触过盒子模型，这也是必考必问的前端知识点，但是大部分人可能只是知道HTML中的所有标签在浏览器中都会被渲染成盒子形状，但可能对两种盒子模型的概念盒使用不是很熟悉。在这篇文章，将带大家深入理解盒子模型。
什么是CSS盒子模型？
CSS盒子模型是浏览器在渲染HTML元素时使用的一种布局模型。它将每个HTML元素表示为一个矩形盒子，并通过盒子的不同部分（content、padding、border、margin）来控制元素的大小和位置。
一个典型的盒子模型包括以下几个部分：
如图所示，这就是个 标准盒子 模型的示意图。
盒模型的类型
盒子模型又分为两种。而最常见的就是标准盒模型。
标准盒模型
标准盒模型也是谷歌的模型，如果我们没有去定义是什么类型的话，默认就是标准盒模型。(box-sizing: content-box)
在标准盒模型中，元素的width属性只包括内容的宽度，不包括内边距和边框，总宽度计算方式如下：总宽度 = content(width) + padding + border + margin
这里我们讲解一种比较易错的点。在标准盒模型中，当容器的宽度固定时，设置内边距会增加元素的实际宽度，因为内边距和边框会被加在内容宽度上。当我们定死了元素的 width 后，再加 padding 或 margin 整个元素占的面积会被撑大，就像建房子时，墙壁往外建的效果一样。
>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标准盒模型示例title>
<style>
.standard-box {
width: 200px; /* 固定宽度 */
padding: 20px; /* 内边距 */
border: 10px solid black; /* 边框 */
margin: 30px; /* 外边距 */
box-sizing: content-box; /* 标准盒模型 */
background-color: lightblue;
}
style>
head>
<body>
<div class="standard-box">标准盒模型div>
body>
html>
在这个示例中，.standard-box元素的内容区宽度是200px，再加上padding和border，其实际宽度会变为：
200px (内容宽度) + 2 * 20px (内边距) + 2 * 10px (边框) = 260px
IE盒模型（怪异盒模型）
要将布局调整为 IE盒模型的话，那就要 (box-sizing: border-box) ，如果不切换成 IE盒模型，那默认就是标准盒模型。在IE盒模型中，元素的width属性包含了内容、内边距和边框的总和。总宽度计算方式如下：总宽度 = width (content + padding + border) + margin
示例如下图所示：
而IE模型中的易错点就是，当容器的宽度固定时，设置内边距不会改变可用内容区的宽度，内边距会从总宽度中扣除。再举个不恰当的例子就是，在建房子的时候被规定了只能在一定的面积里建房子，墙壁不能建在范围外面，那房子的墙壁就会挤占整个面积。而在IE盒子模型就是 padding 会和 其他两个去抢占面积。
下面是代码示例：
>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IE盒模型示例title>
<style>
.ie-box {
width: 200px; /* 固定宽度 */
padding: 20px; /* 内边距 */
border: 10px solid black; /* 边框 */
margin: 30px; /* 外边距 */
box-sizing: border-box; /* IE盒模型 */
background-color: lightgreen;
}
style>
head>
<body>
<div class="ie-box">IE盒模型div>
body>
html>
在这个示例中，.ie-box元素的总宽度依然是200px，即使加了padding和border，它们都会在200px的宽度内进行调整，不会超出这个宽度。
可以看到，content 不是外面设置的 200px了。而是从已经设置的 border 和 padding 抢占的。
而我们如果不设置边框的话
content 就抢占的更多了，也更大了。
应用场景标准盒模型
适用于需要精确控制内容区尺寸的场景，例如：
IE盒模型
适用于需要固定整体大小的场景，例如：
总结
通过本文的介绍，我们详细了解了CSS盒子模型的基础概念及其在不同浏览器中的实现差异。标准盒模型和IE盒模型在处理宽度和内边距时有显著不同，这种理解对于精确控制网页布局非常重要。标准盒模型将宽度定义为内容区的宽度，而IE盒模型将宽度包括内容、内边距和边框。通过使用CSS属性box-sizing，我们可以在不同盒模型之间进行切换，以满足具体布局需求。如果这篇文章对你有帮助的话，可以点个赞哦！
