一個優雅的Swift彈窗組件-JFPopup

語言: CN / TW / HK

前言

受Flutter bottomSheet,drawer,dialog, 響應式佈局的啟發。也有基於Swift編寫一套通用的彈窗組件的想法,所以寫了JFPoup組件,帶有3種彈窗風格,分別是drawer(抽屜式),bottomSheet(底部往上彈出UIView容器),dialog(對話框,也就是Alert),都能彈出自定義的UIView容器。基於Swift編寫,OC若要兼容要寫相應擴展,詳情可以看demo。目前已基於上述風格,編寫了一個微信風格的ActionSheet,後續會編寫更多通用組件。JFPopup 目前支持iOS9+

下載地址

cocoaPods方式導入:

```

pod 'JFPopup', '1.0.0'

```

github地址:

https://github.com/JerryFans/JFPopup

Usage

快速模式

Dialog

對話框模式,類似UIAlertConroller, 你也可以編寫你的自定義AlertView

```

self.popup.dialog {

let v = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))

v.backgroundColor = .red

return v

}

```

Drawer

抽屜模式,支持左右抽屜,寬度自定義,最大可以全屏,

```

//default left

self.popup.drawer {

let v = DrawerView(frame: CGRect(x: 0, y: 0, width: CGSize.jf.screenWidth(), height: CGSize.jf.screenHeight()))

v.closeHandle = { [weak self] in

self?.popup.dismiss()

}

return v

}

self.popup.drawer(with: .right) {

let v = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: CGSize.jf.screenHeight()))

v.backgroundColor = .red

return v

}

```

BottomSheet

類似Flutter Bottomsheet, 底部往上彈出一個容器。 你也可以用於創建你的個人自定義風格UIActionSheet. 底下有微信風格的組件已封裝

```

self.popup.bottomSheet {

let v = UIView(frame: CGRect(x: 0, y: 0, width: CGSize.jf.screenWidth(), height: 300))

v.backgroundColor = .red

return v

}

```

通用組件

v1.0,暫時只有一款微信風格ActionSheet, 基於上面bottomSheet打造,後續會基於上面基礎popup,打造更多基礎組件

```

self.popup.actionSheet {

[

JFPopupAction(with: "拍攝", subTitle: "照片或視頻照片", clickActionCallBack: { [weak self] in

self?.pushVC()

}),

JFPopupAction(with: "從手機相冊選擇", subTitle: nil, clickActionCallBack: {

}),

JFPopupAction(with: "用秒剪製作視頻", subTitle: nil, clickActionCallBack: {

}),

]

}

```

VC模式創建

此方法推薦兼容OC情況下使用,或者你的popup View代碼量非常大 需要一個vc來管理。

繼承寫法 (類似繼承UITableView,dataSoure寫在內部)

```

var config = JFPopupConfig.bottomSheet

config.isDismissible = false

let vc = TestCustomViewController(with: config)

vc.show(with: self)

```

閉包寫法

```

var config = JFPopupConfig.dialog

config.bgColor = .clear

let vc = JFPopupController(with: config, popupProtocol: self) {

let view: UIView = {

let view = UIView()

view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

view.layer.cornerRadius = 12

view.backgroundColor = .black

return view

}()

return view

}

vc.show(with: self)

```