使用Xib制作简单的AlertView

不仅仅是个AlertView

1.启动Xcode, 新建一个Single View Application, 填写项目名称SimpleAlertView, 点击下一步, 找一个位置存放项目, 完成创建.

2.新建一个Xib文件, 文件名为SimpleAlertView.

3.打开SimpleAlertView.xib文件, 选中view, 对它的属性做一些修改:

修改列表

属性	属性值
Size	FreeForm
Status Bar	None
Width	280
Height	130

改完之后, view将不会那么巨大......

4.摆放控件

• Label

拖放两个label到view中, 对label的字体属性分别做以下修改

字体大的做为标题, 小的做为提示信息. 然后分别给两个label增加一些约束, 左图是要给标题label添加的, 右图是针对提示信息label的.

最后选中提示信息label, 修改它的一个属性, 让label中的文字可以适应label的大小.

• Button

拖两个button到view中, 一个是取消按钮, 另一个是确定按钮.

选中刚刚添加的两个button, 使用StackView对它们进行布局. 选中button之后, 点击设计面板右下角的Stack按钮, 这样就将两个button放在StackView中了.

ok, 现在选中stackView, 只要对它添加一些约束以及修改一两个属性, button就布局好了.

最后只要修改button的一些属性, 所有的布局就完成啦!!!!!!!!

属性	取消按钮	确定按钮
Title	Cancle	Confirm
Text Color	Black	White
background(RGB)	235 235 235	149 77 235

完成后的截图如下:

现在进入代码环节

1.创建一个新的类文件, 选择Cocoa Touch Class, 点击下一步. 类的名称为SimpleAlertView, 继承自UIView, 完成创建.

2.打开SimpleAlertView.xib, 把它和刚刚创建的类绑定起来, 这样就可以在SimpleAlertView.swift代码文件中对自定义的SimpleAlertView进行额外的修改.

3.第一次尝试, 看能否把SimpleAlertView显示出来.

• 打开Main.storyboard, 在设计面板中往ViewController添加一个button, 把button的title改为Show AlertView, 之后打开辅助视图为button关联一个IBAction.

  
  
• 在showAlertView函数中添加以下的代码段

//加载xib文件, 拿到自定义的SimpleAlertView, 设置大小和位置并添加到根视图中
let alertView = NSBundle.mainBundle().loadNibNamed("SimpleAlertView", owner: nil, options: nil).first as! SimpleAlertView
alertView.frame.size = CGSize(width: 280, height: 130)
alertView.center = self.view.center
self.view.addSubview(alertView)

• 运行程序, 点击Show AlertView按钮, 可以看到alertView成功创建啦. 截屏效果图...
  
  貌似效果不是特别明显, 没关系, 接下来慢慢修饰!!

4.打开SimpleAlertView.xib文件, 再打开辅助视图, 为label和button生成相应的outlei以及action.

import UIKit

class SimpleAlertView: UIView {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var messageLabel: UILabel!
    @IBOutlet weak var cancleButton: UIButton!
    @IBOutlet weak var confirmButton: UIButton!
    
    
    @IBAction func cancle(sender: UIButton) {
    }
    
    @IBAction func confirm(sender: UIButton) {
    }
    
}

5.打开SimpleAlertView.swift代码文件, 在这里可以对SimpleAlertView的外观和行为进行控制.

• 在confirm IBAction的下方添加 awakeFromNib()函数, 这个函数会在加载xib文件时调用, 可以在这时修改控件的外观.
• awakeFromNib()函数中添加以下代码

super.awakeFromNib()
//view的位置和大小
self.frame.size = CGSize(width: 280.0, height: 130.0)
self.center = CGPoint(x: UIScreen.mainScreen().bounds.midX, y: UIScreen.mainScreen().bounds.midY)
    
//view的阴影
self.layer.shadowColor = UIColor(white: 0, alpha: 1).CGColor
self.layer.shadowOffset = CGSize(width: 0, height: 5)
self.layer.shadowOpacity = 0.5
    
//view的边框
self.layer.borderWidth = 0.3
self.layer.borderColor = UIColor(white: 0, alpha: 0.5).CGColor
    
//设置按钮的圆角
cancleButton.layer.cornerRadius = 5
cancleButton.clipsToBounds = true
confirmButton.layer.cornerRadius = 5
confirmButton.clipsToBounds = true

• 回到ViewController.swift代码文件中, 修改showAlertView, 将下面两行代码删掉.然后打开Main.storyboard, 将ViewController的view的背景颜色修改为RGB(200, 200, 200)

alertView.frame.size = CGSize(width: 280, height: 130)
alertView.center = self.view.center

6.ok, 现在再一次运行程序, 发现效果比上一次好多了.

7.可不可以有更好的效果呢, 给它加点动画吧.
改变SimpleAlertView的初始位置, 让它一开始在屏幕之外.

self.center = CGPoint(x: UIScreen.mainScreen().bounds.midX, y: -self.frame.size.height)

接着在 awakeFromNib()函数中添加以下代码段, 添加confirmButton.clipsToBounds = true这句代码的下方.

//把view的透明度设为0, 逆时针旋转45度
self.layer.opacity = 0
self.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4))
    
//持续0.3秒的动画, 实现渐变效果和旋转效果
UIView.animateWithDuration(0.3, animations: { () -> Void in
    self.center = CGPoint(x: UIScreen.mainScreen().bounds.midX, y: UIScreen.mainScreen().bounds.midY)
    self.layer.opacity = 1
    self.transform = CGAffineTransformMakeRotation(CGFloat(0))
    }, completion: nil)

运行一遍就可以看到动画效果了!!!!

重点部分, 对按钮的点击做出响应(用3种方式来实现)

第一种方式-----闭包函数

8.awakeFromNib()函数的上方定义两个私有变量, 它们的类型都是(() -> Void)?的闭包.它们分别用来对取消或者确定做出响应.

private var cancleHandler: (() -> Void)?
private var confirmHandler: (() -> Void)?

接着在awakeFromNib()函数的下方定义一个方法, 暴露给外界, 用来设置刚刚定义的私有变量.

    func setActionHandler(actionType: String, handler: () -> Void) {
        
        if actionType == "cancle" {
            cancleHandler = handler
        }else {
            confirmHandler = handler
        }
    }

这里的actionType有两种, cancle或者confirm. 根据第一个参数的值来设置不同的handler.
完成这一步之后, 在生成的IBAction中调用响应的handler.

@IBAction func cancle(sender: UIButton) {   
     UIView.animateWithDuration(0.3, animations: { () -> Void in
            self.center = CGPoint(x: UIScreen.mainScreen().bounds.midX, y: UIScreen.mainScreen().bounds.maxY)
            self.layer.opacity = 0
            }) { (_) -> Void in
                if self.cancleHandler == nil {
                    return
                }
                self.cancleHandler!()
        }
    }
    
    @IBAction func confirm(sender: UIButton) {
        UIView.animateWithDuration(0.3, animations: { () -> Void in
            self.center = CGPoint(x: UIScreen.mainScreen().bounds.midX, y: UIScreen.mainScreen().bounds.maxY)
            self.layer.opacity = 0
            }) { (_) -> Void in
                if self.confirmHandler == nil {
                    return
                }
                self.confirmHandler!()
        }
    }

这两个IBAction都先把SimpleAlertView移到屏幕的下方, 在完成这个动画之后就会执行相应的handler.
到现在为止, SimpleAlertView.swift的完整代码如下:

import UIKit

class SimpleAlertView: UIView {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var messageLabel: UILabel!
    @IBOutlet weak var cancleButton: UIButton!
    @IBOutlet weak var confirmButton: UIButton!
    
    private var cancleHandler: (() -> Void)?
    private var confirmHandler: (() -> Void)?
    
    override func awakeFromNib() {
        super.awakeFromNib()
        //view的位置和大小
        self.frame.size = CGSize(width: 280.0, height: 130.0)
        self.center = CGPoint(x: UIScreen.mainScreen().bounds.midX, y: -self.frame.size.height)
        
        //view的阴影
        self.layer.shadowColor = UIColor(white: 0, alpha: 1).CGColor
        self.layer.shadowOffset = CGSize(width: 0, height: 5)
        self.layer.shadowOpacity = 0.5
        
        //view的边框
        self.layer.borderWidth = 0.3
        self.layer.borderColor = UIColor(white: 0, alpha: 0.5).CGColor
        
        //设置按钮的圆角
        cancleButton.layer.cornerRadius = 5
        cancleButton.clipsToBounds = true
        confirmButton.layer.cornerRadius = 5
        confirmButton.clipsToBounds = true
        
        //把view的透明度设为0, 逆时针旋转45度
        self.layer.opacity = 0
        self.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4))
        
        //持续0.3秒的动画, 实现渐变效果和旋转效果
        UIView.animateWithDuration(0.3, animations: { () -> Void in
            self.center = CGPoint(x: UIScreen.mainScreen().bounds.midX, y: UIScreen.mainScreen().bounds.midY)
            self.layer.opacity = 1
            self.transform = CGAffineTransformMakeRotation(CGFloat(0))
            }, completion: nil)
    }
    
    func setActionHandler(actionType: String, handler: () -> Void) {
        
        if actionType == "cancle" {
            cancleHandler = handler
        }else {
            confirmHandler = handler
        }
    }
    
    @IBAction func cancle(sender: UIButton) {
        UIView.animateWithDuration(0.3, animations: { () -> Void in
            self.center = CGPoint(x: UIScreen.mainScreen().bounds.midX, y: UIScreen.mainScreen().bounds.maxY)
            self.layer.opacity = 0
            }) { (_) -> Void in
                if self.cancleHandler == nil {
                    return
                }
                self.cancleHandler!()
        }
    }
    
    @IBAction func confirm(sender: UIButton) {
        UIView.animateWithDuration(0.3, animations: { () -> Void in
            self.center = CGPoint(x: UIScreen.mainScreen().bounds.midX, y: UIScreen.mainScreen().bounds.maxY)
            self.layer.opacity = 0
            }) { (_) -> Void in
                if self.confirmHandler == nil {
                    return
                }
                self.confirmHandler!()
        }
    }
    
}

接下来, 回到ViewController.swift代码文件, 在showAlertView() IBAction中添加以下代码, 来验证闭包函数是否有备执行到.

alertView.setActionHandler("cancle") { () -> Void in
    print("test")
    alertView.removeFromSuperview()
}

点击cancle按钮, 可以看到SimpleAlertView逐渐往屏幕下方淡出, 而且在控制打印出了test.

这里的handler闭包只是简单把SimpleAlertView移除, 可以根据实际情况做更多的事.

第二种方式-----通知

9.首先注释掉刚刚在showAlertView()添加的代码, 以及在cancle(sender: UIButton), confirm(sender: UIButton)中的所有代码.
然后在cancle(sender: UIButton)中添加下面这行代码. 这行代码的作用是发一个通知, 第一个参数是通知的名称, 最后一个参数是附加信息.

NSNotificationCenter.defaultCenter().postNotificationName("buttonClick", object: nil, userInfo: ["actionType": "cancle"])

同样在onfirm(sender: UIButton)中添加一行类似的代码.

NSNotificationCenter.defaultCenter().postNotificationName("buttonClick", object: nil, userInfo: ["actionType": "confirm"])

回到ViewController.swift代码文件, 在viewDidLoad()中添加一行代码, 让ViewController成为这个消息的接收者.

NSNotificationCenter.defaultCenter().addObserver(self, selector: "receiveNotification:", name: "buttonClick", object: nil)

在接收到通知之后就会调用receiveNotification()函数, 可以在这个函数里面做出对应的响应. 这个函数现在实现如下:

func receiveNotification(notification: NSNotification) {
            
        let alertView = self.view.viewWithTag(101) as! SimpleAlertView
        
        let action = notification.userInfo!["actionType"] as! String
        
        if action == "cancle" {
            
            UIView.animateWithDuration(0.3, animations: { () -> Void in
                alertView.center = CGPoint(x: UIScreen.mainScreen().bounds.midX, y: UIScreen.mainScreen().bounds.maxY)
                alertView.layer.opacity = 0
                }) { (_) -> Void in
                    alertView.removeFromSuperview()
            }
            
        }else {
            alertView.removeFromSuperview()
        } 
    }

为了让这段代码能够执行, 还要把alertView的tag设置为101. 在showAlertView(sender: UIButton)中添加这行代码.

alertView.tag = 101

ok, 运行一次程序, 效果和第一种方式类似.

第三种方式-----代理

10.注释掉viewDidLoad()中的那行接收通知的代码.打开SimpleAlertView.swift代码文件, 在import UIKit的下方定义一个协议.

@objc protocol SimpleAlertViewDelegate {
    optional func simpleAlertView(actionType: String)
}

在awakeFromNib()函数的上方定义一个代理变量.

var delegate: SimpleAlertViewDelegate!

注释掉cancle(sender: UIButton), confirm(sender: UIButton)中发送通知的代码.
在cancle(sender: UIButton)中添加这行代码.

delegate.simpleAlertView!("cancle")

在confirm(sender: UIButton)中添加响应的代码.

delegate.simpleAlertView!("confirm")

回到ViwController.swift代码文件, 让ViewController实现SimpleAlertViewDelegate.
在ViewController的最下方的大括号之外, 添加以下代码段.

extension ViewController: SimpleAlertViewDelegate {
    func simpleAlertView(action: String) {
        
        let alertView = self.view.viewWithTag(101) as! SimpleAlertView
        
        if action == "cancle" {
            
            UIView.animateWithDuration(0.3, animations: { () -> Void in
                alertView.center = CGPoint(x: UIScreen.mainScreen().bounds.midX, y: UIScreen.mainScreen().bounds.maxY)
                alertView.layer.opacity = 0
                }) { (_) -> Void in
                    alertView.removeFromSuperview()
            }
            
        }else {
            alertView.removeFromSuperview()
        }
    }
}

最后在showAlertView(sender: UIButton)中添加一行代码, 让ViewController成为SimpleAlertView的代理人.

alertView.delegate = self

到这里就完成这个demo了.

demo的地址SimpleAlertView