In previous post, I shared you how to show an animated popup, and explained how to customize your popup. In this post, I share how I use the popup in my projects with confirmation and information alert.
An information popup is used to alert user about some important information, like this
A confirmation alert is very useful to warn user about next action, for instance, confirm to remove a photo, confirm a withdrawal request… In this post, I will extend the knPopup
to knConfirmation
to display a confirmation popup.
The idea is same to the previous post, you can customize any UI you want in setupView
.
class knConfirmation: knPopup {
private let iconImgView = UIMaker.makeImageView()
let titleLabel = UIMaker.makeLabel(font: UIFont.boldSystemFont(ofSize: 18),
color: UIColor.darkGray, numberOfLines: 2,
alignment: .center)
let contentLabel = UIMaker.makeLabel(font: UIFont.systemFont(ofSize: 15),
color: UIColor.lightGray, numberOfLines: 0,
alignment: .center)
private let stack = UIMaker.makeStackView()
private let cancelButton = UIMaker.makeButton(titleColor: .darkGray,
font: UIFont.systemFont(ofSize: 15),
cornerRadius: 27,
borderWidth: 1,
borderColor: .darkGray)
private let buttonStack = UIMaker.makeStackView(axis: .horizontal, distributon: UIStackView.Distribution.fill, alignment: UIStackView.Alignment.fill, space: 16)
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
}
A confirmation popup needs:
okButton
in knPopup
, just need one more for reject actionSame to previous post, we will setup auto layout for all controls by code in setupView
function
override func setupView() {
// (1)
buttonStack.addViews(cancelButton, okButton)
cancelButton.size(toView: okButton)
okButton.vertical(toView: buttonStack)
cancelButton.centerY(toView: okButton)
// (2)
let spaceView = UIMaker.makeView()
spaceView.height(12)
stack.addViews(iconImgView, titleLabel, contentLabel, spaceView, buttonStack)
iconImgView.square(edge: 56)
iconImgView.centerX(toView: stack)
titleLabel.horizontal(toView: stack, space: 16)
contentLabel.horizontal(toView: stack, space: 16)
buttonStack.horizontal(toView: stack, space: 16)
// (3)
container.addSubview(stack)
stack.fill(toView: container, space: UIEdgeInsets(top: 16, bottom: 16))
okButton.addTarget(self, action: #selector(didSelectOK), for: .touchUpInside)
cancelButton.addTarget(self, action: #selector(dismiss), for: .touchUpInside)
}
(1): buttonStack
is a UIStackView
, so we can’t addSubviews
as usual, but have to addArrangedSubview
. I extend to new function addViews
to shorten the name. :)
buttonStack
contains the button, so when you don’t need cancel button, you can remove it from buttonStack
, and okButton
automatically fill the superView
.
That’s why I choose UIStackView for this UI.
(2): In stackView, you can’t change specific space between 2 views, so I did this trick. Insert a space view with a height I want.
(3): We need to add stack
to container
. The container
is setup to animate when appear/disappear. So we don’t need to care about animation anymore.
Some popups, you need to show an icon to make it be colorful. Others don’t need title and cancel button. We will dynamicall init what we want.
init(icon: UIImage? = nil, title: String? = nil, content: String, okTitle: String? = nil, cancelTitle: String? = nil) {
super.init(frame: .zero)
set(icon: icon, title: title, content: content, okTitle: okTitle, cancelTitle: cancelTitle)
}
private func set(icon: UIImage? = nil, title: String? = nil, content: String, okTitle: String? = nil, cancelTitle: String? = nil) {
if icon == nil {
iconImgView.removeFromSuperview()
} else {
iconImgView.image = icon
}
if title == nil {
titleLabel.removeFromSuperview()
} else {
titleLabel.text = title
}
contentLabel.text = content
if okTitle != nil {
okButton.setTitle(okTitle, for: .normal)
}
if cancelTitle == nil {
cancelButton.removeFromSuperview()
} else {
cancelButton.setTitle(cancelTitle, for: .normal)
}
}
Just pass nil
or remove that param from the init
function. What param is nil, the related control will be removed from UI.
Hope this popup can help you save your time and efforts to display a popup. Customize what you want and share it to me via this repository.