Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解

告警提示框（消息提示框）在  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