Swift

告警提示框（消息提示框）在 App 开发中肯定少不了，除了简单地用来显示提示信息外，有时也会作为一些具有交互功能的选择对话框、输入对话框。通常情况下，我们会使用 iOS 自带的 UIAlertController 组件来实现。

虽然 UIAlertController 使用方便，但样式、功能都有限。本文介绍一个优秀的第三方 Alert 组件：SCLAlertView。

一、安装配置

（1）从 GitHub 上下载最新的代码：https://github.com/vikmeup/SCLAlertView-Swift

（2）将下载下来的源码包中 SCLAlertView.xcodeproj 拖拽至你的工程中。

（3）工程 -> General -> Embedded Binaries 项，把 SCLAlertView.framework 添加进来。

（4）最后，在需要使用 SCLAlertView 的地方 import 进来就可以了。

1

import SCLAlertView

二、基本用法

1，简单的使用样例

（1）效果图

点击按钮后在页面上弹出个普通的消息提示框。

（2）样例代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

import UIKit

import SCLAlertView

 

class ViewController: UIViewController {

 

    override func viewDidLoad() {

        super.viewDidLoad()

    }

 

    @IBAction func showInfo(_ sender: Any) {

        //弹出普通消息提示框

        SCLAlertView().showInfo("这个是标题", subTitle: "这个是普通消息提示框正文内容。")

    }

     

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

    }

}

2，自带的消息框样式

除了上面用到的普通消息提示框，SCLAlertView 默认提供如下 7 种不同类别的提示框（分别用不同的颜色和图标表示），我们可以根据不同的场景和通知类型选择相应的样式。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

//普通消息提示框

SCLAlertView().showInfo("这个是标题", subTitle: "这个是普通消息提示框正文内容。")

 

//编辑消息提示框

SCLAlertView().showEdit("这个是标题", subTitle: "这个是编辑消息提示框正文内容。")

 

//通知消息提示框

SCLAlertView().showNotice("这个是标题", subTitle: "这个是通知消息提示框正文内容。")

 

//警告提示框

SCLAlertView().showWarning("这个是标题", subTitle: "这个是警告提示框正文内容。")

 

//错误提示框

SCLAlertView().showError("这个是标题", subTitle: "这个是警告提示框正文内容。")

         

//成功提示框

SCLAlertView().showSuccess("这个是标题", subTitle: "这个是成功提示框正文内容。")

         

//等待提示框

SCLAlertView().showWait("这个是标题", subTitle: "这个等待提示框正文内容。")

效果图如下：

 

 

 

3，修改关闭按钮文字

默认情况下，消息框下方的完成（关闭）按钮的标题是“Done”，我们可以通过方法第 3 个参数（closeButtonTitle）修改成其它的。

1

2

3

//成功提示框

SCLAlertView().showSuccess("这个是标题", subTitle: "这个是成功提示框正文内容。",

                           closeButtonTitle: "确定")

效果图如下：

4，原始的消息弹出方法（showTitle）

不管是 showInfo() 也好，showError() 也好，它们内部实际上调用的都是 showTitle() 方法。只不过在它们内部通过传递不同的图片和颜色，从而显示出不同的样式。

（1）我们也可以直接使用 showTitle() 显示一个自定义的弹出框，代码如下：

1

2

3

4

5

SCLAlertView().showTitle("邮件发送成功", subTitle: "我们将在10个工作日内给您回复。",

                         timeout: nil, completeText: "确定", style: .info,

                         colorStyle: 0xffae3e, colorTextButton: 0xFFFFFF,

                         circleIconImage: UIImage(named: "email.png"),

                         animationStyle: .topToBottom)

（2）效果图如下：

5，提示框出现的动画效果

从上面的样例代码中我们发现有一个叫做 animationStyle 的参数，这个是用来控制提示框是以何种动画形式出现。默认是从上往下出现的，我们可以修改成如下其它值：

• noAnimation：没有动画效果
• topToBottom：从上往下出现
• bottomToTop：从下往上出现 
• leftToRight：从左往右出现
• rightToLeft：从右往左出现

6，动态修改提示框内容

提示框弹出后，我们可以通过其返回的 SCLAlertViewResponder 对象来修改提示框内部的标题以及正文内容。

1

2

3

4

5

6

//显示等待提示框

let alertViewResponder = SCLAlertView().showWait("这个是标题", subTitle: "这个是正文内容。")

         

//修改提示框内容

alertViewResponder.setTitle("修改标题")

alertViewResponder.setSubTitle("修改正文内容")

7，使用代码关闭提示框

提示框弹出后，除了通过点击提示框上的按钮来关闭提示框外。我们还可以在代码中通过其返回的 SCLAlertViewResponder 对象的 close() 方法对其关闭。

1

2

3

4

5

//显示等待提示框

let alertViewResponder = SCLAlertView().showWait("这个是标题", subTitle: "这个是正文内容。")

         

//关闭提示框

alertViewResponder.close()

三、高级用法

1，修改字体样式

下面我们通过自定义外观样式（放大标题文字，缩小正文文字、按钮文字加粗）来实现一个自定义的提示框组件并使用。

1

2

3

4

5

6

7

8

9

10

11

12

//自定义提示框样式

let appearance = SCLAlertView.SCLAppearance(

    kTitleFont: UIFont(name: "HelveticaNeue", size: 22)!, //标题文字字体

    kTextFont: UIFont(name: "HelveticaNeue", size: 12)!,  //正文文字字体

    kButtonFont: UIFont(name: "HelveticaNeue-Bold", size: 14)!  //按钮文字字体

)

 

//使用自定义样式的提示框

let alert = SCLAlertView(appearance: appearance)

         

//显示提示框

alert.showInfo("这个是标题", subTitle: "这个是普通消息提示框正文内容。")

2，隐藏关闭按钮

1

2

3

4

5

6

7

8

9

10

//自定义提示框样式

let appearance = SCLAlertView.SCLAppearance(

    showCloseButton: false //不显示关闭按钮

)

 

//使用自定义样式的提示框

let alert = SCLAlertView(appearance: appearance)

         

//显示提示框

alert.showInfo("这个是标题", subTitle: "这个是普通消息提示框正文内容。")

3，等待一段时间自动关闭提示框

这个常常与上面的隐藏关闭按钮相结合使用，比如提示用户操作成功，但不需要用户手动去关闭这个提示框，它显示个 3 秒钟会自动消失。

1

2

3

4

5

6

7

8

9

10

11

12

13

//自定义提示框样式

let appearance = SCLAlertView.SCLAppearance(

    showCloseButton: false //不显示关闭按钮

)

 

//使用自定义样式的提示框

let alert = SCLAlertView(appearance: appearance)

 

//显示提示框（3秒后自定关闭）

let timeout = SCLAlertView.SCLTimeoutConfiguration(timeoutValue: 3) {

    print("提示框自动关闭了")

}

alert.showInfo("这个是标题", subTitle: "这个是普通消息提示框正文内容。", timeout: timeout)

4，添加多个按钮

有时我们提示框仅仅有个关闭按钮还不够，可能还需要再增加一个或多个按钮，这样程序就能根据用户点击的按钮执行不同的业务逻辑。

1

2

3

4

5

6

7

8

9

10

11

12

let alertView = SCLAlertView()

alertView.addButton("第一个按钮", target:self, selector:#selector(firstButtonTapped))

alertView.addButton("第二个按钮") {

    print("第二个按钮点击")

}

alertView.showSuccess("这个是标题", subTitle: "下面添加了多个按钮", closeButtonTitle: "取消")

         

         

//第一个按钮点击事件相应

func firstButtonTapped() {

    print("第一个按钮点击")

}

5，隐藏头部图标

默认情况下在提示框头部会有一个突出的圆形图标，我们可以将其隐藏。

1

2

3

4

5

6

7

8

//自定义提示框样式

let appearance = SCLAlertView.SCLAppearance(

    showCircularIcon: false  //隐藏头部图标

)

 

//使用自定义样式的提示框

let alertView = SCLAlertView(appearance: appearance)

alertView.showSuccess("这个是标题", subTitle: "这个是提示框正文内容。")

6，修改头部图标

下面将提示框头部的图标替换成一个邮件图片。

1

2

3

let alertViewIcon = UIImage(named: "email.png")

SCLAlertView().showSuccess("这个是标题", subTitle: "这个是提示框正文内容。",

                           circleIconImage: alertViewIcon)

7，添加文本输入框

下面样例中我们在提示框内部添加两个文本输入框，分别用来填写用户名和密码。当点击“确定”按钮后，会将填写的内容打印到控制台上。

1

2

3

4

5

6

7

8

9

10

11

12

let alert = SCLAlertView()

 

//添加第一个输入框

let textField1 = alert.addTextField("用户名")

//添加第二个输入框

let textField2 = alert.addTextField("密码")

textField2.isSecureTextEntry = true

 

alert.addButton("确定") {

    print(textField1.text!, textField2.text!)

}

alert.showEdit("登录", subTitle: "请输入用户名和密码", closeButtonTitle: "取消")

8，添加自定义视图

除了往提示框中添加按钮、文本输入框外，我们还可以创建任意的自定义 View 作为提示框的内容显示。

下面样例中我们在提示框的内部显示一个日期选择控件，同时点击“确定”按钮还会将选择的日期打印到控制台中。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

let alert = SCLAlertView()

 

//创建日期选择器

let datePicker = UIDatePicker(frame: CGRect(x:0, y:0, width:236, height:150))

//将日期选择器区域设置为中文，则选择器日期显示为中文

datePicker.locale = Locale(identifier: "zh_CN")

//只有日期选择

datePicker.datePickerMode = .date

//将日期选择器作为提示框的自定义视图

alert.customSubview = datePicker

 

//添加确定按钮

alert.addButton("确定", backgroundColor: UIColor.brown, textColor: UIColor.yellow) {

    let formatter = DateFormatter()

    formatter.dateFormat = "yyyy年MM月dd日"

    print(formatter.string(from: datePicker.date))

}

 

alert.showInfo("请选择日期", subTitle: "", closeButtonTitle: "取消")

四、所有的自定义样式

从上一个小节中我们可以知道，通过 SCLAlertView.SCLAppearance 配置我们可以自定义提示框中各个元素的样式。当然 SCLAlertView.SCLAppearance 里可配的属性远远不止这些，下面列出所有属性，大家可以选择使用。

1，按钮（Button ）相关

1

2

3

4

kButtonFont: UIFont  //按钮字体

buttonCornerRadius : CGFloat  //按钮圆角

showCloseButton: Bool  //是否显示关闭按钮

kButtonHeight: CGFloat  //按钮高度

2，图标（Circle Image）相关

1

2

3

4

5

showCircularIcon: Bool  //是否显示图标

kCircleTopPosition: CGFloat  //圆形头部位置

kCircleBackgroundTopPosition: CGFloat  //圆形背景头部位置

kCircleHeight: CGFloat  //圆形高度尺寸

kCircleIconHeight: CGFloat  //图标高度尺寸

3，文字（Text）相关

1

2

3

4

5

6

7

kTitleFont: UIFont  //标题文字字体

kTitleTop:CGFloat  //标题文字位置

kTitleHeight:CGFloat  //标题文字高度

kTextFont: UIFont  //内容文字字体

kTextHeight: CGFloat  //内容文字高度

kTextFieldHeight: CGFloat  //文本输入框高度

kTextViewdHeight: CGFloat  //文本视图高度

4，整个提示框相关

1

2

3

4

5

6

7

kDefaultShadowOpacity: CGFloat  //提示框显示时后面的阴影遮罩背景透明度

kWindowWidth: CGFloat  //提示框宽度

kWindowHeight: CGFloat  //提示框高度

shouldAutoDismiss: Bool //点击按钮后是否自动关闭提示框

fieldCornerRadius : CGFloat  //文本输入框圆角

contentViewCornerRadius : CGFloat  //内容视图圆角

disableTapGesture: Bool //是否禁用手势（如果我们添加了一个tableview作为子视图，可以将该属性设为true）

原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1672.html