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

发布于:2016-10-01 15:26,阅读数:1650,点赞数:7


> 本项目为一款 iOS 基于 Swift 3.0 的清爽型自定义弹窗框架。
>
> 项目在[「GitHub」](https://github.com/trmbhs/EMPopView)中开源,已集成`CocoaPods`。

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

# 弹窗内容
- `EMLoadingView`:读取时弹窗
- `EMProgressView`:带进度的读取时弹窗
- `EMSheetView`:选项弹窗
- `EMAlertView`:对话框弹窗

# 使用方法
### 初始化
- 该操作是注册Notification的过程,使所有弹窗支持横屏旋转,全局只需执行一次。

```swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
EMPopViewFactory.regist()
return true
}
```

### EMLoadingView —— 读取时弹窗
- 配置`EMLoadingViewConfig`:
其构造方法原型为:

```swift
public init(colorStyle: EMPopViewColorStyle = EMPopViewDefaultValue.colorStyle,
showAniStyle: EMPopViewShowAnimationStyle = EMPopViewDefaultValue.showAniStyle,
closeAniStyle: EMPopViewCloseAnimationStyle = EMPopViewDefaultValue.closeAniStyle,
windowAlpha: CGFloat = EMPopViewDefaultValue.windowAlpha,
viewAlpha: CGFloat = EMPopViewDefaultValue.viewAlpha)
}
```

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

`Example`中的例子为:

```swift
let config = EMLoadingViewConfig.init(colorStyle: .White,
showAniStyle: .FadeIn,
closeAniStyle: .FadeOut)
```

- 弹出窗口
`index`参数用来接收该窗口索引值,关闭窗口时需要使用索引值进行关闭。

```swift
let index = EMPopViewFactory.showView(type: .Loading, config: config)
```

- 关闭窗口

```swift
EMPopViewFactory.closeView(index: index)
```

- 两种`colorStyle`的截图

![](//cdn.yuusann.com/img/posts/16002_1.jpg)
![](//cdn.yuusann.com/img/posts/16002_2.jpg)

### EMProgressView —— 带进度的读取时弹窗
- 配置`EMProgressViewConfig`:
其构造方法原型为:

```swift
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)
```

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

`Example`中的例子为:

```swift
let config = EMProgressViewConfig.init(colorStyle: .White,
showAniStyle: .FadeIn,
closeAniStyle: .FadeOut,
max: 5)
```

- 弹出窗口

```swift
let index = EMPopViewFactory.showView(type: .Progress, config: config)
```

- 进度条步进

```swift
(EMPopViewFactory.getView(index: index)! as! EMProgressView).step()
(EMPopViewFactory.getView(index: index)! as! EMProgressView).step(value: 10)
```

- 指定当前进度值

```swift
(EMPopViewFactory.getView(index: index)! as! EMProgressView).setProgress(current: 10)
```

- 关闭窗口

```swift
EMPopViewFactory.closeView(index: index)
```

- 两种`colorStyle`的截图
-
![](//cdn.yuusann.com/img/posts/16002_3.jpg)
![](//cdn.yuusann.com/img/posts/16002_4.jpg)

### EMSheetView —— 选项弹窗
- 配置`EMSheetViewConfig`:
其构造方法原型为:

```swift
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)
```

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

```swift
let config = EMSheetViewConfig.init(colorStyle: .White,
showAniStyle: .SlideInBottom,
closeAniStyle: .SlideOutBottom,
text: "Sheet 选项")
```

- 配置选项
`EMSheetViewCellConfig`构造方法原型为:

```swift
public init(title: String = "",
foo: (() -> Void)? = nil)
```

`title`和`foo`分别指代选项的`显示内容`和`点击回调`。

- 选项压栈

```swift
config.pushCell(cell: EMSheetViewCellConfig.init(title: "A",
foo: { print("A") }))
config.pushCell(cell: EMSheetViewCellConfig.init(title: "B",
foo: { print("B") }))
```

- 弹出窗口

```swift
EMPopViewFactory.showView(type: .Sheet, config: config)
```

- 两种`colorStyle`的截图
-
![](//cdn.yuusann.com/img/posts/16002_5.jpg)
![](//cdn.yuusann.com/img/posts/16002_6.jpg)

### EMAlertView —— 对话框弹窗
- 配置`EMAlertViewConfig`:
其构造方法原型为:

```swift
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 = "")
```

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

```swift
let config = EMAlertViewConfig.init(colorStyle: .White,
showAniStyle: .FadeIn,
closeAniStyle: .FadeOut,
title: "删除",
text: "确认要删除该项目吗?\n该操作无法撤销!")
```

- 配置按钮
`EMAlertViewButtonConfig`的构造方法原型为:

```swift
public init(style: EMAlertViewButtonStyle = .Default,
text: String = "",
foo: (() -> Void)? = nil)
```

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

- 按钮压栈

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

```swift
config.pushButton(config: EMAlertViewButtonConfig.init(style: .Default,
text: "取消",
foo: { print("back") }))
config.pushButton(config: EMAlertViewButtonConfig.init(style: .Cancel,
text: "删除",
foo: { print("del") }))
```

- 弹出窗口

```swift
EMPopViewFactory.showView(type: .Alert, config: config)
```

- 两种`colorStyle`的截图

![](//cdn.yuusann.com/img/posts/16002_7.jpg)
![](//cdn.yuusann.com/img/posts/16002_8.jpg)

### EMPopViewDefaultValue —— 配置默认值

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

```swift
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
```

配置默认值的方法原型为

```swift
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`文件中存在`EMPopViewShowAnimationStyle`和`EMPopViewCloseAnimationStyle`枚举,分别对应`出现时过渡动画`和`关闭时过度动画`。修改这里的枚举值后在`EMPopViewAnimationFactory`中实现相应的方法即可新增新的过渡动画。

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


评论:0条


返回列表

返回归档

返回主页