教你如何自定義AlertView

前言：

系統自帶的alertView界面有點呆板，動畫有點單一，總之隨着業務的發展，系統自帶的alertView已經很難知足咱們的需求，那自定義的就頗有必要。本文就介紹如何自定義alertView，看完你就懂得製做屬於本身的alertView了

1、建立DWAlert.swift

建立一個類名爲在DWAlert.swift，在class DWAlert: UIView裏面添加一些常量和屬性

//const 常量
let kAlertWidth = 245.0
let kAlertHeight = 160.0
let kTitleYOffset = 15.0
let kTitleHeight = 25.0

let kContentOffset = 30.0
let kBetweenLabelOffset = 20.0
let kSingleButtonWidth = 160.0
let kCoupleButtonWidth = 107.0
let kButtonHeight = 40.0
let kButtonBottomOffset = 10.0

//property 屬性
var alertTitleLabel: UILabel!
var alertContentLabel: UILabel!
var button: UIButton!
var backImageView: UIView!
複製代碼

上面代碼const是爲了定義彈出框須要的座標和長寬，因爲是不變，全部let修飾，與OC中的常量相似

2、繪製alertView

寫一個繼承init的方法,把title(alert標題)，content(alert內容)，Title(按鈕標題)，做爲參數

convenience init(alertTitle title: String, alertContent content: String, title Title: String) {

    
    self.init()
    self.layer.cornerRadius = 5.0
    self.backgroundColor = UIColor.white
    self.alertTitleLabel = UILabel.init(frame: CGRect(x: 0, y: kTitleYOffset, width: kAlertWidth, height: kTitleHeight))
    self.alertTitleLabel.font = UIFont.boldSystemFont(ofSize: 20.0)
    self.alertTitleLabel.textColor = UIColor.init(red: 56.0/255.0, green: 64.0/255.0, blue: 71.0/255.0, alpha: 1)
    self.addSubview(self.alertTitleLabel)
    
    let contentLabelWidth = kAlertWidth - 16
    let alertContentMaxY: Double = Double(self.alertTitleLabel.frame.maxY)
    self.alertContentLabel = UILabel.init(frame: CGRect(x: (kAlertWidth - contentLabelWidth) * 0.5, y: alertContentMaxY, width: contentLabelWidth, height: 60))
    self.alertContentLabel.numberOfLines = 0
    
    self.alertTitleLabel.textAlignment = .center
    self.alertContentLabel.textAlignment = self.alertTitleLabel.textAlignment
    self.alertContentLabel.textColor = UIColor.init(red: 127/255.0, green: 127/255.0, blue: 127/255.0, alpha: 1)
    self.alertContentLabel.font = UIFont.systemFont(ofSize: 15.0)
    self.addSubview(self.alertContentLabel)
    
    // about button
    let btnFrame = CGRect(x: (kAlertWidth - kSingleButtonWidth) * 0.5, y: kAlertHeight - kButtonBottomOffset - kButtonHeight, width: kSingleButtonWidth, height: kButtonHeight)
    self.button = UIButton.init(type: UIButtonType.custom)
    self.button.frame = btnFrame
    
    self.button.backgroundColor = UIColor.init(red: 245/255.0, green: 24/255.0, blue: 42/255.0, alpha: 1)
    self.button.setTitle(Title, for: .normal)
    self.button.titleLabel?.font = UIFont.systemFont(ofSize: 14.0)
    self.button.setTitleColor(UIColor.white, for: .normal)
    self.button.addTarget(self, action: #selector(BtnClick), for: .touchUpInside)
    self.button.layer.cornerRadius = 3.0
    self.addSubview(self.button)
    
    self.alertTitleLabel.text = title
    self.alertContentLabel.text = content
    
    //cancle button
    let cancleBtn = UIButton.init(type: .custom)
    cancleBtn.setImage(UIImage.init(named: "1.png"), for: .normal)
    cancleBtn.setImage(UIImage.init(named: "2.png"), for: .highlighted)
    cancleBtn.frame = CGRect(x: kAlertWidth - 32, y: 0, width: 32, height: 32)
    self.addSubview(cancleBtn)
    cancleBtn.addTarget(self, action: #selector(dismissAlert), for: .touchUpInside)

}

複製代碼

由於調用self.init(),因此得使用關鍵字convenence,使上述函數變成便利構造函數，具體看convenence介紹

3、alertView的顯示與隱藏

一、show實現alertView顯示

func show() {
//1
    let shareWindow = UIApplication.shared.keyWindow
//2
    self.frame = CGRect(x: (Double((shareWindow?.bounds.width)!) - kAlertWidth)*0.5, y: -kAlertHeight - 30, width: kAlertWidth, height: kAlertHeight)
//3
    shareWindow?.addSubview(self)
}
複製代碼

上面代碼介紹: 一、拿到當前顯示的主窗口。 注意：主窗口必定得有，不然會崩。 二、設置alertView的frame 三、把alertView添加到主窗口

二、removeFromSuperview實現AlertView隱藏

override func removeFromSuperview() {
    //1
    self.backImageView.removeFromSuperview()
    self.backImageView = nil
    
    //2
    let shareWindow = UIApplication.shared.keyWindow
    let afterFrame = CGRect(x: (Double((shareWindow?.bounds.width)!) - kAlertWidth)*0.5, y: Double((shareWindow?.bounds.height)!), width: kAlertWidth, height: kAlertHeight)
    
    //3
    UIView.animate(withDuration: 0.35, delay: 0.0, options: .curveEaseOut, animations: { 
        self.frame = afterFrame
        let angle = M_1_PI / 1.5
        self.transform = CGAffineTransform.init(rotationAngle: CGFloat(angle))
    }) { (finished) in
        //4
        super.removeFromSuperview()
    }
}

複製代碼

上面代碼介紹： 一、移除掉待會講到的willMove(toSuperview newSuperview: UIView?)方法中添加的backImageView背景蒙版 二、獲取當前主窗口，並定義一個alertView的frame 三、利用UIView.animate對alertView進行動畫操做。 注意：angle值爲M_1_PI / 1.5，只是個參考，您能夠換其餘的值，試試效果 四、完成動畫後，調用父類的removeFromSuperview移除alertView

4、實現alertView墜落效果

在willMove(toSuperview newSuperview: UIView?)裏面實現，該方法會在當alertView即將加入主窗口時被系統自動調用，詳情請看UIView不可不知的祕密

override func willMove(toSuperview newSuperview: UIView?) {
    if newSuperview == nil {
        return
    }
    let shareWindow = UIApplication.shared.keyWindow
    
    if self.backImageView == nil {
        self.backImageView = UIView.init(frame: (shareWindow?.bounds)!)
    }
    
    self.backImageView.backgroundColor = UIColor.black
    self.backImageView.alpha = 0.6
    shareWindow?.addSubview(self.backImageView)
    let angle = M_1_PI / 2
    self.transform = CGAffineTransform.init(rotationAngle: CGFloat(angle))
    let afterFrame = CGRect(x: (Double((shareWindow?.bounds.width)!) - kAlertWidth)*0.5, y: (Double((shareWindow?.bounds.height)!) - kAlertHeight)*0.5, width: kAlertWidth, height: kAlertHeight)
    UIView.animate(withDuration: 0.35, delay: 0.0, options: .curveEaseIn, animations: {
        self.transform = CGAffineTransform.init(rotationAngle: 0)
        self.frame = afterFrame
    }) { (finished) in
    }
    super.willMove(toSuperview: newSuperview)
}
複製代碼

上面代碼重點是UIView.animate裏的，實現了墜落動畫效果。注意：self.transform = CGAffineTransform.init(rotationAngle: 0)設置旋轉角度，再設置frame。

5、使用DWAlert

在ViewController建立一個按鈕，並添加一個點擊事件ClickMe,在方法裏面建立alertView

@IBAction func ClickMe(_ sender: Any) {
    let alert = DWAlert(alertTitle: "注意", alertContent: "流星墜落效果來了😝", title: "肯定")
    alert.show()
}
複製代碼

在此，該alertView已經完成，效果以下：