教你如何自定义AlertView

前言:

系统自带的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: "流星坠落效果来了?", title: "确定")
    alert.show()
}

在此,该alertView已经完成,效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

JS-缓冲运动-对联型悬浮框

3095
来自专栏知无涯

js判断手机浏览器操作系统及微信浏览器的方法

53210
来自专栏一“技”之长

iOS(CGGeometry)几何类方法总结 原

CGPoint CGPointMake(CGFloat x, CGFloat y);

1122
来自专栏TechBox

史上最全的iOS之UITextView实现placeHolder占位文字的N种方法前言方法一方法二方法三方法四方法五

2023
来自专栏DannyHoo的专栏

cell高度的缓存1——利用字典进行缓存

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1061
来自专栏谈补锅

UITableViewController和延时执行、自定义控件

1、在UITableViewController中,self.view就是self.tableView, 两个对象的指针地址是一样的

1194
来自专栏陈满iOS

iOS开发小技巧:根据文本,字体,计算UILabel高度及宽度

关于boundingRectWithSize,系统API有几个类的相关方法。搜索官方文档,可见如下:

3751
来自专栏编程语言

iOS:宏定义(项目初期配置)(一)

1452
来自专栏瓜大三哥

非整数分频模块

非整数分频模块有两种实现方法,分别为分频比交错法和累加器分频法。下面分别进行介绍。 1.分频比交错法 分频比交错法,顾名思义就是在一定时间间隔T内,由不同的分...

2027
来自专栏Alice

demo1 动态显示view或弹框 动态隐藏view或弹框

有一个弹框,弹框上边有一个关闭按钮,点击按钮,可以关闭弹框。点击弹框的周围区域也可以关闭按钮。 点击上边的隐藏弹框也可以关闭按钮。   在实现功能的基础上,以...

2187

扫码关注云+社区

领取腾讯云代金券