EMPopView —— 一款 iOS 基于Swift 3.0 的弹窗框架

发布于: 2016-10-01 15:26
阅读: 1277
评论: 0
喜欢: 7

本项目为一款 iOS 基于 Swift 3.0 的清爽型自定义弹窗框架。

项目在「GitHub」中开源,已集成CocoaPods

更新

  代码已经过更新,方法名和参数名可能发生变化。以GitHub中的Example代码为准。

弹窗内容

  • EMLoadingView:读取时弹窗
  • EMProgressView:带进度的读取时弹窗
  • EMSheetView:选项弹窗
  • EMAlertView:对话框弹窗

使用方法

初始化

  • 该操作是注册Notification的过程,使所有弹窗支持横屏旋转,全局只需执行一次。
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    EMPopViewFactory.regist()
    return true
}

EMLoadingView —— 读取时弹窗

  • 配置EMLoadingViewConfig: 其构造方法原型为:
public init(colorStyle: EMPopViewColorStyle = EMPopViewDefaultValue.colorStyle,
            showAniStyle: EMPopViewShowAnimationStyle = EMPopViewDefaultValue.showAniStyle,
            closeAniStyle: EMPopViewCloseAnimationStyle = EMPopViewDefaultValue.closeAniStyle,
            windowAlpha: CGFloat = EMPopViewDefaultValue.windowAlpha,
            viewAlpha: CGFloat = EMPopViewDefaultValue.viewAlpha) 
}

接收colorStyleshowAniStylecloseAniStylewindowAlphaviewAlpha参数,分别指定了颜色主题出现动画关闭动画背景透明度窗口透明度。所有参数均设有默认值,因此构造时可以自由选择参数传值,没有传入的参数将会采用默认值。默认值设定存在于EMPopViewDefaultValue类中。

Example中的例子为:

let config = EMLoadingViewConfig.init(colorStyle: .White,
                                       showAniStyle: .FadeIn,
                                       closeAniStyle: .FadeOut)
  • 弹出窗口 index参数用来接收该窗口索引值,关闭窗口时需要使用索引值进行关闭。
let index = EMPopViewFactory.showView(type: .Loading, config: config)
  • 关闭窗口
EMPopViewFactory.closeView(index: index)
  • 两种colorStyle的截图

EMProgressView —— 带进度的读取时弹窗

  • 配置EMProgressViewConfig: 其构造方法原型为:
    public init(colorStyle: EMPopViewColorStyle = EMPopViewDefaultValue.colorStyle,
                showAniStyle: EMPopViewShowAnimationStyle = EMPopViewDefaultValue.showAniStyle,
                closeAniStyle: EMPopViewCloseAnimationStyle = EMPopViewDefaultValue.closeAniStyle,
                windowAlpha: CGFloat = EMPopViewDefaultValue.windowAlpha,
                viewAlpha: CGFloat = EMPopViewDefaultValue.viewAlpha,
                max: UInt = 100,
                step: UInt = 1)

除了通用的配置以外,多了maxstep参数,分别指定总进度长度每一步进度长度。所有参数外全部设有默认值,可以自由选择参数传递。

Example中的例子为:

        let config = EMProgressViewConfig.init(colorStyle: .White,
                                                showAniStyle: .FadeIn,
                                                closeAniStyle: .FadeOut,
                                                max: 5)
  • 弹出窗口
        let index = EMPopViewFactory.showView(type: .Progress, config: config)
  • 进度条步进
        (EMPopViewFactory.getView(index: index)! as! EMProgressView).step()
        (EMPopViewFactory.getView(index: index)! as! EMProgressView).step(value: 10)
  • 指定当前进度值
        (EMPopViewFactory.getView(index: index)! as! EMProgressView).setProgress(current: 10)
  • 关闭窗口
       EMPopViewFactory.closeView(index: index)

- 两种colorStyle的截图

EMSheetView —— 选项弹窗

  • 配置EMSheetViewConfig: 其构造方法原型为:
public init(colorStyle: EMPopViewColorStyle = EMPopViewDefaultValue.colorStyle,
            showAniStyle: EMPopViewShowAnimationStyle = EMPopViewDefaultValue.showAniStyle,
            closeAniStyle: EMPopViewCloseAnimationStyle = EMPopViewDefaultValue.closeAniStyle,
            windowAlpha: CGFloat = EMPopViewDefaultValue.windowAlpha,
            viewAlpha: CGFloat = EMPopViewDefaultValue.viewAlpha,
            text: String = "",
            cancelFoo: (() -> Void)? = nil)

除了通用的配置以外,多了textcancelFoo参数,分别指定提示文字取消时回调Example中的例子为:

let config = EMSheetViewConfig.init(colorStyle: .White,
                                     showAniStyle: .SlideInBottom,
                                     closeAniStyle: .SlideOutBottom,
                                     text: "Sheet 选项")
  • 配置选项 EMSheetViewCellConfig构造方法原型为:
public init(title: String = "",
            foo: (() -> Void)? = nil) 

titlefoo分别指代选项的显示内容点击回调

  • 选项压栈
config.pushCell(cell: EMSheetViewCellConfig.init(title: "A",
                                                  foo: { print("A") }))
config.pushCell(cell: EMSheetViewCellConfig.init(title: "B",
                                                  foo: { print("B") }))
  • 弹出窗口
EMPopViewFactory.showView(type: .Sheet, config: config)

- 两种colorStyle的截图

EMAlertView —— 对话框弹窗

  • 配置EMAlertViewConfig: 其构造方法原型为:
public init(colorStyle: EMPopViewColorStyle = EMPopViewDefaultValue.colorStyle,
            showAniStyle: EMPopViewShowAnimationStyle = EMPopViewDefaultValue.showAniStyle,
            closeAniStyle: EMPopViewCloseAnimationStyle = EMPopViewDefaultValue.closeAniStyle,
            windowAlpha: CGFloat = EMPopViewDefaultValue.windowAlpha,
            viewAlpha: CGFloat = EMPopViewDefaultValue.viewAlpha,
            title: String = "",
            text: String = "") 

除了通用的配置以外,多了titletext参数,分别指定对话框标题对话框文字Example中的例子为:

let config = EMAlertViewConfig.init(colorStyle: .White,
                                     showAniStyle: .FadeIn,
                                     closeAniStyle: .FadeOut,
                                     title: "删除",
                                     text: "确认要删除该项目吗?\n该操作无法撤销!")
  • 配置按钮 EMAlertViewButtonConfig的构造方法原型为:
public init(style: EMAlertViewButtonStyle = .Default,
              text: String = "",
              foo: (() -> Void)? = nil)

EMAlertViewButtonStyle仅有DefaultCancle两个选项。text为按钮的文字,foo为按键回调。

  • 按钮压栈

对话框支持单按钮和双按钮,因此按钮可入栈1个,也可入栈2个。

config.pushButton(config: EMAlertViewButtonConfig.init(style: .Default,
                                                        text: "取消",
                                                        foo: { print("back") }))
config.pushButton(config: EMAlertViewButtonConfig.init(style: .Cancel,
                                                        text: "删除",
                                                        foo: { print("del") }))
  • 弹出窗口
        EMPopViewFactory.showView(type: .Alert, config: config)
  • 两种colorStyle的截图

EMPopViewDefaultValue —— 配置默认值

弹窗配置过程中均使用了默认值配置,修改默认值可以更方便地使用本框架。框架中的默认值有:

static internal var colorStyle: TColorStyle = .White
static internal var showAniStyle: TShowAniStyle = .FadeIn
static internal var closeAniStyle: TCloseAniStyle = .FadeOut
static internal var windowAlpha: CGFloat = 0.2
static internal var viewAlpha: CGFloat = 0.8

static internal var phoneTitleFontSize: CGFloat = 18
static internal var phoneTextFontSize: CGFloat = 16
static internal var padTitleFontSize: CGFloat = 26
static internal var padTextFontSize: CGFloat = 20

配置默认值的方法原型为

static public func setDefault(colorStyle: EMPopViewColorStyle! = nil,
                              showAniStyle: EMPopViewShowAnimationStyle! = nil,
                              closeAniStyle: EMPopViewCloseAnimationStyle! = nil,
                              windowAlpha: CGFloat! = nil,
                              viewAlpha: CGFloat! = nil,
                              phoneTitleFontSize: CGFloat! = nil,
                              phoneTextFontSize: CGFloat! = nil,
                              padTitleFontSize: CGFloat! = nil,
                              padTextFontSize: CGFloat! = nil)

调用EMPopViewDefaultValue.setDefault(...)传入需要修改的默认值即可。

修改源码以增加配色方案

源码的EMPopViewConfig.swift文件中存在EMPopViewColorStyle枚举类型,其保存了当前所有的配色方案。修改该枚举类型,增加新的枚举项目后直接编译,编译器将会提醒你需要实现新配色源码的位置。仅需实现7处位置的代码,即可新增一个全新的配色方案。

修改源码以增加过渡动画

源码的EMPopViewAnimation.swift文件中存在EMPopViewShowAnimationStyleEMPopViewCloseAnimationStyle枚举,分别对应出现时过渡动画关闭时过度动画。修改这里的枚举值后在EMPopViewAnimationFactory中实现相应的方法即可新增新的过渡动画。

小结

Swift 进入 3.0 版本以后 iOS SDK 发生了巨大的改变。这一组简单的弹窗框架,经过我的设计,能非常简便地加入新的配色和动画方案,是我的第一个 Swift 3.0 项目,也是我跨入 Swift 3.0 的第一步。


Thanks for reading.

All the best wishes for you! 💕