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

蘭鑫發表於2018-10-24
View框架

前言

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

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

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

說了一點雞湯哈，下面來看看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類

相關文章