Creating a Custom Alert in Swift Using SnapKit

Custom Alert Swift

In iOS development, using default alert controllers like UIAlertController works well for many cases. However, when you want a fully customizable alert with more control over layout and design, building a custom alert is a great option. In this article, we will explore how to create a custom alert named AlertDialogView using a UIViewController and SnapKit for layout constraints. This custom alert will feature dynamic text and buttons, allowing you to adjust the title, description, and button actions as needed.

Overview of the Custom Alert

The custom alert will have the following elements:

• Title label: Bold, aligned to the left, and customizable.
• Description label: Regular font, aligned to the left, and supports multiple lines.
• Left Button (Cancel): A cancel button, customizable text.
• Right Button (Confirm): A confirm button, customizable text.

We’ll use SnapKit to handle layout constraints, and the alert view will feature the following characteristics:

• Padding of 36 from the left and right of the screen.
• Height of 132.
• Vertically centered on the screen.
• Corner radius of 16 for rounded edges.

Step-by-Step Implementation

Let’s go through the steps to create this custom alert.

1. Setting Up the UI Components

First, we define the UI components: a container view, labels for the title and description, and two buttons for cancel and confirm actions.

class AlertDialogView: UIViewController {

    // UI Elements
    private let containerView = UIView()
    private let titleLabel = UILabel()
    private let descLabel = UILabel()
    private let leftButton = UIButton(type: .system)
    private let rightButton = UIButton(type: .system)

    // Customizable Properties
    var alertTitle: String?
    var alertDescription: String?
    var leftButtonTitle: String?
    var rightButtonTitle: String?
    var leftButtonAction: (() -> Void)?
    var rightButtonAction: (() -> Void)?

    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        setupActions()
    }
}

Here, we define customizable properties (alertTitle, alertDescription, etc.) that allow dynamic setting of the alert's title, description, and button text.

2. Configuring the Layout Using SnapKit

Next, we set up the UI layout using SnapKit for constraint management. This layout ensures the alert is centered, with padding from the edges and a specified height. Inside the container view, the title label, description label, and buttons are laid out vertically.

private func setupUI() {
    view.backgroundColor = UIColor.black.withAlphaComponent(0.5)
    view.addSubview(containerView)
    
    containerView.backgroundColor = .white
    containerView.layer.cornerRadius = 16
    
    // Title Label
    titleLabel.text = alertTitle
    titleLabel.font = UIFont.boldSystemFont(ofSize: 14)
    titleLabel.textAlignment = .left
    
    // Description Label
    descLabel.text = alertDescription
    descLabel.font = UIFont.systemFont(ofSize: 12)
    descLabel.textAlignment = .left
    descLabel.numberOfLines = 0
    
    // Left Button (Cancel)
    leftButton.setTitle(leftButtonTitle ?? "Cancel", for: .normal)
    leftButton.setTitleColor(.systemBlue, for: .normal)
    
    // Right Button (Confirm)
    rightButton.setTitle(rightButtonTitle ?? "Confirm", for: .normal)
    rightButton.setTitleColor(.systemBlue, for: .normal)
    
    // Adding subviews
    containerView.addSubview(titleLabel)
    containerView.addSubview(descLabel)
    containerView.addSubview(leftButton)
    containerView.addSubview(rightButton)

    // Constraints using SnapKit
    containerView.snp.makeConstraints { make in
        make.center.equalToSuperview()
        make.height.equalTo(132)
        make.left.right.equalToSuperview().inset(36)
    }
    
    titleLabel.snp.makeConstraints { make in
        make.top.equalTo(containerView).offset(16)
        make.left.right.equalTo(containerView).inset(16)
    }
    
    descLabel.snp.makeConstraints { make in
        make.top.equalTo(titleLabel.snp.bottom).offset(8)
        make.left.right.equalTo(containerView).inset(16)
    }
    
    leftButton.snp.makeConstraints { make in
        make.top.equalTo(descLabel.snp.bottom).offset(16)
        make.left.equalTo(containerView).offset(16)
        make.bottom.equalTo(containerView).offset(-16)
    }
    
    rightButton.snp.makeConstraints { make in
        make.top.equalTo(descLabel.snp.bottom).offset(16)
        make.right.equalTo(containerView).offset(-16)
        make.bottom.equalTo(containerView).offset(-16)
    }
}

Key Points of the Layout:

• Container View: This is the main background of the alert with a corner radius of 16, centered vertically, and a height of 132 points.
• Title and Description: The title label is aligned left and uses a bold font, while the description label uses a regular font and supports multiple lines.
• Buttons: The left button (Cancel) and right button (Confirm) are horizontally aligned at the bottom of the alert, with SnapKit managing the spacing.

3. Handling Button Actions

We add button actions for the left (cancel) and right (confirm) buttons. The actions are triggered when the user taps the buttons, and you can customize them using closures.

private func setupActions() {
    leftButton.addTarget(self, action: #selector(leftButtonTapped), for: .touchUpInside)
    rightButton.addTarget(self, action: #selector(rightButtonTapped), for: .touchUpInside)
}

@objc private func leftButtonTapped() {
    leftButtonAction?()
    dismiss(animated: true, completion: nil)
}

@objc private func rightButtonTapped() {
    rightButtonAction?()
    dismiss(animated: true, completion: nil)
}

How to Use the Custom Alert

You can create and present the custom alert easily by passing the title, description, and button actions. Here’s an example of how to use the AlertDialogView:

let alert = AlertDialogView()
alert.alertTitle = "Alert Title"
alert.alertDescription = "This is a description of the alert."
alert.leftButtonTitle = "Cancel"
alert.rightButtonTitle = "Confirm"
alert.leftButtonAction = {
    print("Cancel button tapped")
}
alert.rightButtonAction = {
    print("Confirm button tapped")
}
alert.show(in: self)

Conclusion

Creating a custom alert in Swift using UIViewController and SnapKit gives you full control over the design and behavior of the alert. With this approach, you can easily modify the alert's appearance and actions, providing a dynamic and customizable user experience. The combination of SnapKit's intuitive layout management and the flexibility of UIViewController makes this a powerful tool in building custom UI components for your apps.