留言首页
  • 当前位置：
    首页
    >
    编程社区
    >
    Swift
    > Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解

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

    2017-07-28 发布：hangge 阅读：8285
    告警提示框（消息提示框）在 App 开发中肯定少不了，除了简单地用来显示提示信息外，有时也会作为一些具有交互功能的选择对话框、输入对话框。通常情况下，我们会使用 iOS 自带的 UIAlertController 组件来实现。
    虽然 UIAlertController 使用方便，但样式、功能都有限。本文介绍一个优秀的第三方 Alert 组件：SCLAlertView。

    一、安装配置

    （1）从 GitHub 上下载最新的代码：https://github.com/vikmeup/SCLAlertView-Swift
    （2）将下载下来的源码包中 SCLAlertView.xcodeproj 拖拽至你的工程中。
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    （3）工程 -> General -> Embedded Binaries 项，把 SCLAlertView.framework 添加进来。
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    （4）最后，在需要使用 SCLAlertView 的地方 import 进来就可以了。
    1
    import SCLAlertView

    二、基本用法

    1，简单的使用样例

    （1）效果图
    点击按钮后在页面上弹出个普通的消息提示框。
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    （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: "这个等待提示框正文内容。")

    效果图如下：
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解 原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解 原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解 原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解

    3，修改关闭按钮文字

    默认情况下，消息框下方的完成（关闭）按钮的标题是“Done”，我们可以通过方法第 3 个参数（closeButtonTitle）修改成其它的。
    1
    2
    3
    //成功提示框
    SCLAlertView().showSuccess("这个是标题", subTitle: "这个是成功提示框正文内容。",
                               closeButtonTitle: "确定")

    效果图如下：
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解

    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）效果图如下：
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解

    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，修改字体样式

    下面我们通过自定义外观样式（放大标题文字，缩小正文文字、按钮文字加粗）来实现一个自定义的提示框组件并使用。
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    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，隐藏关闭按钮

    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    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，添加多个按钮

    有时我们提示框仅仅有个关闭按钮还不够，可能还需要再增加一个或多个按钮，这样程序就能根据用户点击的按钮执行不同的业务逻辑。
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    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，隐藏头部图标

    默认情况下在提示框头部会有一个突出的圆形图标，我们可以将其隐藏。
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    1
    2
    3
    4
    5
    6
    7
    8
    //自定义提示框样式
    let appearance = SCLAlertView.SCLAppearance(
        showCircularIcon: false  //隐藏头部图标
    )
     
    //使用自定义样式的提示框
    let alertView = SCLAlertView(appearance: appearance)
    alertView.showSuccess("这个是标题", subTitle: "这个是提示框正文内容。")

    6，修改头部图标

    下面将提示框头部的图标替换成一个邮件图片。
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    1
    2
    3
    let alertViewIcon = UIImage(named: "email.png")
    SCLAlertView().showSuccess("这个是标题", subTitle: "这个是提示框正文内容。",
                               circleIconImage: alertViewIcon)

    7，添加文本输入框

    下面样例中我们在提示框内部添加两个文本输入框，分别用来填写用户名和密码。当点击“确定”按钮后，会将填写的内容打印到控制台上。
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    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 作为提示框的内容显示。
    下面样例中我们在提示框的内部显示一个日期选择控件，同时点击“确定”按钮还会将选择的日期打印到控制台中。
    原文:Swift - 第三方Alert弹出框组件（SCLAlertView）使用详解
    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）
    上一篇Swift - Cookie内容的读取、删除、写入（附：手动清除Session） 下一篇Swift - 输入框抖动效果的实现（扩展UIView、支持所有UI组件）
    打赏支持
    评论（5）
    • 5楼
      2018-02-07 11:25
      梦子

      站长您好！谢谢你的分享，这个没有点击后的回调方法吗

      站长回复：

      普通提示框点击完成后是自动关闭提示框，没有回调。如果需要回调的话，可以通过自定义按钮实现，具体参考“三、高级用法 4，添加多个按钮”里面的相关代码。

    • 4楼
      2017-12-31 10:08
      echoman

      pod 'SCLAlertView'暂时会报错。
      pod 'SCLAlertView', :git => 'https://github.com/vikmeup/SCLAlertView-Swift.git' 就不会报错。
      谢谢航哥！真的帮助很大！

      站长回复：

      不客气。问题解决了就好。

    • 3楼
      2017-11-05 16:37
      cece

      航哥,这代码真的能用？我今天pod一下学习学习，结果满满的全是报错？

      站长回复：

      当然可以，你试试不用pod，直接像我文章那样手动进行配置，然后再测试下。

    • 2楼
      2017-10-12 14:02
      沃克哈德

      航哥，此代码更新Swift4了吗？

      站长回复：

      更新Swift4了

    • 1楼
      2017-07-31 15:47
      诠释残缺

      能不能 写点关于核心动画以及与动画相关的知识 谢谢

      站长回复：

      谢谢你的建议，关于iOS开发各方面的文章后面都是会有的。