内容简介:系统自带的alertView界面有点呆板,动画有点单一,总之随着业务的发展,系统自带的alertView已经很难满足我们的需求,那自定义的就很有必要。本文就介绍如何自定义alertView,看完你就懂得制作属于自己的alertView了创建一个类名为在DWAlert.swift,在上面代码
前言:
系统自带的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已经完成,效果如下:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Android 自定义 View (04自定义属性)
- Vue自定义组件(简单实现一个自定义组件)
- Android 自定义View:深入理解自定义属性(七)
- Qt编写自定义控件20-自定义饼图 原 荐
- SpringBoot2 | SpringBoot自定义AutoConfiguration | SpringBoot自定义starter(五)
- 『互联网架构』软件架构-springboot自定义视图和自定义Starter(90)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
GOOGLE HACKS
Rael Dornfest、Tara Calishain / 卞军、谢伟华、朱炜 / 电子工业 / 2006-1 / 49.00元
GOOGLE HACKS巧妙使用网络搜索的技巧和工具(第二版)一起来看看 《GOOGLE HACKS》 这本书的介绍吧!