JXPopupView:一個輕量級的自定義檢視彈出框架

iOS開發 · 發表 2018-10-24 18:58:27

摘要：前言隨著APP業務增多，各種五花八門的彈框也增多，各種細節都需要得到不同的定製。最後就沉澱出JXPopupView這個庫，可以應對多類需求，輕巧靈活，不再為彈框憂愁了。最近看了一篇文章阿里雲的這群瘋子，深有感觸，很多牛逼的東西都是逼出來的，而不是一個天才憑一己之力創造出來的。...

前言

隨著APP業務增多，各種五花八門的彈框也增多，各種細節都需要得到不同的定製。最後就沉澱出JXPopupView這個庫，可以應對多類需求，輕巧靈活，不再為彈框憂愁了。

最近看了一篇文章 ofollow,noindex">阿里雲的這群瘋子，深有感觸，很多牛逼的東西都是逼出來的，而不是一個天才憑一己之力創造出來的。就像文章裡面說的，隨著淘寶業務劇增，雲服務再不升級，就會因為技術瓶頸導致業務停滯，也可能導致淘寶的失敗。

對於我們普通開發者來說，不可能一來就寫出相容任何需求的程式碼（隨著經驗增加，可以寫出擴充套件性強的程式碼）。我們要做的是，在業務不斷變化的時候，也在不斷思考，不斷優化程式碼，沉澱出一個經得起考驗的框架。

說了一點雞湯哈，下面來看看JXPopupView的細節效果。

Github

下載原始碼，一睹為快！ JXPopupView

特性

預設提供豐富的動畫效果，而且可以靈活的擴充套件配置，只要遵從並實現 JXPopupViewAnimationProtocol 協議即可；
使用靈活，通過view封裝，可以在任何view上面展示，並不侷限於UIViewController；
背景配置方便，借鑑了 MBProgressHUD 對背景檢視的處理邏輯，可以靈活配置；
互動細節可配置，提供了 isDismissible 、 isInteractive 、 isPenetrable 屬性進行配置

預覽

動畫效果

動畫效果	GIF
漸隱漸現	FadeInOut.gif
縮放	ZoomInOut.gif
往左	Leftward.gif
往右	Rightward.gif
往下	Downward.gif
往上	Upward.gif
部分自定義-彈性動畫	Spring.gif
完全自定義動畫	CustomAnimation.gif

背景風格

背景風格	GIF
固定色值	FadeInOut.gif
blur light	Blurlight.gif
blur dark	BlurDark.gif

指定containerView

指定containerView	GIF
Window	ZoomInOut.gif
UIViewController.view	VCView.gif
CustomView	CustomView.gif

要求

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 類