JXPopupView:一个轻量级的自定义视图弹出框架

# 前言 随着APP业务增多,各种五花八门的弹框也增多,各种细节都需要得到不同的定制。最后就沉淀出JXPopupView这个库,可以应对多类需求,轻巧灵活,不再为弹框忧愁了。 最近看了一篇文章[阿里云的这群疯子](https://yq.aliyun.com/articles/653511),深有感触,很多牛逼的东西都是逼出来的,而不是一个天才凭一己之力创造出来的。就像文章里面说的,随着淘宝业务剧增,云服务再不升级,就会因为技术瓶颈导致业务停滞,也可能导致淘宝的失败。 对于我们普通开发者来说,不可能一来就写出兼容任何需求的代码(随着经验增加,可以写出扩展性强的代码)。我们要做的是,在业务不断变化的时候,也在不断思考,不断优化代码,沉淀出一个经得起考验的框架。 说了一点鸡汤哈,下面来看看JXPopupView的细节效果。 # Github 下载源码,一睹为快![JXPopupView](https://github.com/pujiaxin33/JXPopupView) # 特性 - 默认提供丰富的动画效果,而且可以灵活的扩展配置,只要遵从并实现`JXPopupViewAnimationProtocol`协议即可; - 使用灵活,通过view封装,可以在任何view上面展示,并不局限于UIViewController; - 背景配置方便,借鉴了`MBProgressHUD`对背景视图的处理逻辑,可以灵活配置; - 交互细节可配置,提供了`isDismissible`、`isInteractive`、`isPenetrable`属性进行配置 # 预览 ## 动画效果 动画效果 | GIF ----------|-------------- | 渐隐渐现 | ![FadeInOut.gif](https://upload-images.jianshu.io/upload_images/1085173-51e70cc478c9cdd2.gif?imageMogr2/auto-orient/strip) | | 缩放 | ![ZoomInOut.gif](https://upload-images.jianshu.io/upload_images/1085173-c676973c505136c9.gif?imageMogr2/auto-orient/strip) | | 往左 | ![Leftward.gif](https://upload-images.jianshu.io/upload_images/1085173-14ff0fba64959f7a.gif?imageMogr2/auto-orient/strip) | | 往右 | ![Rightward.gif](https://upload-images.jianshu.io/upload_images/1085173-6e9690de577df84b.gif?imageMogr2/auto-orient/strip) | | 往下 | ![Downward.gif](https://upload-images.jianshu.io/upload_images/1085173-92749ad23be58d20.gif?imageMogr2/auto-orient/strip) | | 往上 | ![Upward.gif](https://upload-images.jianshu.io/upload_images/1085173-6fa18efae0f5e1ee.gif?imageMogr2/auto-orient/strip) | | 部分自定义-弹性动画 | ![Spring.gif](https://upload-images.jianshu.io/upload_images/1085173-2020052bad72b0fa.gif?imageMogr2/auto-orient/strip) | | 完全自定义动画 | ![CustomAnimation.gif](https://upload-images.jianshu.io/upload_images/1085173-ddb2660aceab0f50.gif?imageMogr2/auto-orient/strip) | ## 背景风格 背景风格 | GIF ----------|-------------- | 固定色值 | ![FadeInOut.gif](https://upload-images.jianshu.io/upload_images/1085173-51e70cc478c9cdd2.gif?imageMogr2/auto-orient/strip) | | blur light | ![Blurlight.gif](https://upload-images.jianshu.io/upload_images/1085173-21c7c4046c9732f7.gif?imageMogr2/auto-orient/strip) | | blur dark | ![BlurDark.gif](https://upload-images.jianshu.io/upload_images/1085173-34c07dc2af4042c7.gif?imageMogr2/auto-orient/strip) | ## 指定containerView 指定containerView | GIF ----------|-------------- | Window | ![ZoomInOut.gif](https://upload-images.jianshu.io/upload_images/1085173-c676973c505136c9.gif?imageMogr2/auto-orient/strip) | | UIViewController.view | ![VCView.gif](https://upload-images.jianshu.io/upload_images/1085173-a35e8d01315997bf.gif?imageMogr2/auto-orient/strip) | | CustomView | ![CustomView.gif](https://upload-images.jianshu.io/upload_images/1085173-903137ba54450fbc.gif?imageMogr2/auto-orient/strip) | # 要求 Swift 4.2编写,支持iOS9以上 # 安装 ## CocoaPods 在Podfile文件里面添加 ``` pod 'JXPopupView' ``` 然后再pod install(最好先pod update) # 使用 ``` //- 确定contentView的目标frame let contentView = Bundle.main.loadNibNamed("TestAlertView", owner: nil, options: nil)?.first as? TestAlertView let x: CGFloat = (containerView.bounds.size.width - 200)/2 let y: CGFloat = (containerView.bounds.size.height - 200)/2 contentView.frame = CGRect(x: x, y: y, width: 200, height: 200) //- 确定动画效果 var animator = JXPopupViewFadeInOutAnimator() //- 初始化JXPopupView let popupView = JXPopupView(containerView: containerView, contentView: contentView, animator: animator!) //- 配置交互 popupView.isDismissible = true popupView.isInteractive = true popupView.isPenetrable = false //- 配置背景 popupView.backgroundView.style = self.backgroundStyle popupView.backgroundView.blurEffectStyle = self.backgroundEffectStyle popupView.backgroundView.color = self.backgroundColor //- 展示popupView popupView.display(animated: true, completion: nil) //- 消失popupView //通过extension提供的jx_popupView属性,获取JXPopupView进行操作,可以不用全局持有JXPopupView属性 contentView.jx_popupView?.dismiss(animated: true, completion: nil) ``` # 动画自定义 ## `JXPopupViewAnimationProtocol`协议方法 ``` /// 初始化配置动画驱动器 /// /// - Parameters: /// - contentView: 自定义的弹框视图 /// - backgroundView: 背景视图 /// - containerView: 展示弹框的视图 /// - Returns: void func setup(contentView: UIView, backgroundView: JXBackgroundView, containerView: UIView) /// 处理展示动画 /// /// - Parameters: /// - contentView: 自定义的弹框视图 /// - backgroundView: 背景视图 /// - animated: 是否需要动画 /// - completion: 动画完成后的回调 /// - Returns: void func display(contentView: UIView, backgroundView: JXBackgroundView, animated: Bool, completion: @escaping ()->()) /// 处理消失动画 /// /// - Parameters: /// - contentView: 自定义的弹框视图 /// - backgroundView: 背景视图 /// - animated: 是否需要动画 /// - completion: 动画完成后的回调 func dismiss(contentView: UIView, backgroundView: JXBackgroundView,animated: Bool, completion: @escaping ()->()) ``` ## 自定义动画建议 - 现有动画微调 继承对应的animator,重载协议方法,进行微调。参考demo工程的`JXPopupViewSpringDownwardAnimator`类。 - 完全自定义动画 可以继承`JXPopupViewBaseAnimator`或者自己新建一个类,遵从`JXPopupViewAnimationProtocol`协议,实现对应方法即可。参考demo工程的`JXPopupViewCustomAnimator`类

你可能感兴趣的:(JXPopupView:一个轻量级的自定义视图弹出框架)