Awesome
AZEmptyState
Making empty state simple.
Screenshots
<img src="Screenshots/screenshot1.png" width="280" /> <img src="Screenshots/screenshot2.png" width="280" /> <img src="Screenshots/screenshot3.png" width="280" />
Installation
Cocoa Pods:
pod 'AZEmptyState'
Manual:
Simply drag and drop the Sources
folder to your project.
Usage:
Using Interface Builder:
<img src="Screenshots/howto.gif" width="700" />Programmatically:
//init var
emptyStateView = AZEmptyStateView()
//customize
emptyStateView.image = #imageLiteral(resourceName: "thinking")
emptyStateView.message = "Something went wrong..."
emptyStateView.buttonText = "Try Again"
emptyStateView.addTarget(self, action: #selector(tryAgain), for: .touchUpInside)
//add subview
view.addSubview(emptyStateView)
//add autolayout
emptyStateView.translatesAutoresizingMaskIntoConstraints = false
emptyStateView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
emptyStateView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
emptyStateView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.6).isActive = true
emptyStateView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.55).isActive = true
Sub Classing
Here is an example of sub-classing:
@IBDesignable
class MyEmptyStateView: AZEmptyStateView{
//Use image with content mode of `scale aspect fit`
override func setupImage() -> UIImageView {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFit
return imageView
}
//Use the default label with extra modifications, such as different font and different color.
override func setupLabel() -> UILabel {
let label = super.setupLabel()
label.font = UIFont(name: "Helvetica-Light", size: 16)
label.numberOfLines = 0
label.textColor = .white
return label
}
//use a custom subclass of UIButton
override func setupButton() -> UIButton {
return HighlightableButton()
}
//setup the stack view to your liking
override func setupStack(_ imageView: UIImageView, _ textLabel: UILabel, _ button: UIButton) -> UIStackView {
let stack = super.setupStack(imageView, textLabel, button)
stack.spacing = 14
stack.alignment = .center
button.widthAnchor.constraint(equalTo: stack.widthAnchor, multiplier: 0.8).isActive = true
imageView.widthAnchor.constraint(equalTo: stack.widthAnchor, multiplier: 0.5).isActive = true
return stack
}
}