一个优雅的Swift弹窗组件-JFPopup
前言
受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地址:
github.com/JerryFans/J…
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)
作者:jerryfans
链接:https://juejin.cn/post/7018045270579478536