教你如何自定義AlertView
摘要：
前言：
系統自帶的alertView介面有點呆板，動畫有點單一，總之隨著業務的發展，系統自帶的alertView已經很難滿足我們的需求，那自定義的就很有必要。本文就介紹如何自定義alertView，看完你就懂得製作屬於自己的alertView了
一、建立DWAler...
前言：
系統自帶的alertView介面有點呆板，動畫有點單一，總之隨著業務的發展，系統自帶的alertView已經很難滿足我們的需求，那自定義的就很有必要。本文就介紹如何自定義alertView，看完你就懂得製作屬於自己的alertView了
一、建立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中的常量類似
二、繪製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介紹
三、alertView的顯示與隱藏
1、 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)
}
複製程式碼
上面程式碼介紹: 1、拿到當前顯示的主視窗。 注意：主視窗一定得有，否則會崩。 2、設定alertView的frame 3、把alertView新增到主視窗
2、 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()
}
}
複製程式碼
上面程式碼介紹： 1、移除掉待會講到的 willMove(toSuperview newSuperview: UIView?) 方法中新增的 backImageView 背景蒙版 2、獲取當前主視窗，並定義一個alertView的frame 3、利用 UIView.animate 對alertView進行動畫操作。 注意：angle值為M_1_PI / 1.5，只是個參考，您可以換其他的值，試試效果 4、完成動畫後，呼叫父類的 removeFromSuperview 移除alertView
四、實現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。
五、使用DWAlert
在 ViewController 建立一個按鈕，並新增一個點選事件 ClickMe ,在方法裡面建立alertView
@IBAction func ClickMe(_ sender: Any) {
let alert = DWAlert(alertTitle: "注意", alertContent: "流星墜落效果來了:stuck_out_tongue_closed_eyes:", title: "確定")
alert.show()
}
複製程式碼
在此，該alertView已經完成，效果如下：
