Introduction

Popup Dialog is a simple, customizable popup dialog written in Swift.

Features

[x] Easy to use API with hardly any boilerplate code
[x] Convenient default view with image, title, message
[x] Supports custom view controllers
[x] Slick transition animations
[x] Fully themeable via appearance, including fonts, colors, corner radius, shadow, overlay color and blur, etc.
[x] Can be dismissed via swipe and background tap
[x] Objective-C compatible
[x] Works on all screens and devices supporting iOS 10.0+

Installation

This version is Swift 5 compatible. For the Swift 4.2 version, please use V1.0.0.

CocoaPods

PopupDialog is available through CocoaPods. Simply add the following to your Podfile:

use_frameworks!

target '<Your Target Name>'
pod 'PopupDialog', '~> 1.1'

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks. A minimum version of 0.17 is required.

To install, simply add the following lines to your Cartfile:

github "Orderella/PopupDialog" ~> 1.1

Manually

If you prefer not to use either of the above mentioned dependency managers, you can integrate PopupDialog into your project manually by adding the files contained in the Classes folder to your project. Moreover, you have to manually add the classes of DynamicBlurView to your project.

Example

You can find this and more example projects in the repo. To run it, clone the repo, and run pod install from the Example directory first.

import PopupDialog

// Prepare the popup assets
let title = "THIS IS THE DIALOG TITLE"
let message = "This is the message section of the popup dialog default view"
let image = UIImage(named: "pexels-photo-103290")

// Create the dialog
let popup = PopupDialog(title: title, message: message, image: image)

// Create buttons
let buttonOne = CancelButton(title: "CANCEL") {
    print("You canceled the car dialog.")
}

// This button will not the dismiss the dialog
let buttonTwo = DefaultButton(title: "ADMIRE CAR", dismissOnTap: false) {
    print("What a beauty!")
}

let buttonThree = DefaultButton(title: "BUY CAR", height: 60) {
    print("Ah, maybe next time :)")
}

// Add buttons to dialog
// Alternatively, you can use popup.addButton(buttonOne)
// to add a single button
popup.addButtons([buttonOne, buttonTwo, buttonThree])

// Present dialog
self.present(popup, animated: true, completion: nil)

Usage

PopupDialog is a subclass of UIViewController and as such can be added to your view controller modally. You can initialize it either with the handy default view or a custom view controller.

Default Dialog

public convenience init(
    title: String?,
    message: String?,
    image: UIImage? = nil,
    buttonAlignment: UILayoutConstraintAxis = .vertical,
    transitionStyle: PopupDialogTransitionStyle = .bounceUp,
    preferredWidth: CGFloat = 340,
    tapGestureDismissal: Bool = true,
    panGestureDismissal: Bool = true,
    hideStatusBar: Bool = false,
    completion: (() -> Void)? = nil)

The default dialog initializer is a convenient way of creating a popup with image, title and message (see image one and three).

Bascially, all parameters are optional, although this makes no sense at all. You want to at least add a message and a single button, otherwise the dialog can't be dismissed, unless you do it manually.

If you provide an image it will be pinned to the top/left/right of the dialog. The ratio of the image will be used to set the height of the image view, so no distortion will occur.

Custom View Controller

public init(
    viewController: UIViewController,
    buttonAlignment: UILayoutConstraintAxis = .vertical,
    transitionStyle: PopupDialogTransitionStyle = .bounceUp,
    preferredWidth: CGFloat = 340,
    tapGestureDismissal: Bool = true,
    panGestureDismissal: Bool = true,
    hideStatusBar: Bool = false,
    completion: (() -> Void)? = nil)

You can pass your own view controller to PopupDialog (see image two). It is accessible via the viewController property of PopupDialog, which has to be casted to your view controllers class to access its properties. Make sure the custom view defines all constraints needed, so you don't run into any autolayout issues.

Buttons are added below the controllers view, however, these buttons are optional. If you decide to not add any buttons, you have to take care of dismissing the dialog manually. Being a subclass of view controller, this can be easily done via dismissViewControllerAnimated(flag: Bool, completion: (() -> Void)?).

Button Alignment

Buttons can be distributed either .horizontal or .vertical, with the latter being the default. Please note distributing buttons horizontally might not be a good idea if you have more than two buttons.

public enum UILayoutConstraintAxis : Int {
	case horizontal
	case vertical
}

Transition Style

You can set a transition animation style with .bounceUp being the default. The following transition styles are available

public enum PopupDialogTransitionStyle: Int {
    case bounceUp
    case bounceDown
    case zoomIn
    case fadeIn
}

Preferred Width

PopupDialog will always try to have a max width of 340 . On iPhones with smaller screens, like iPhone 5 SE, width would be 320. 340 is also the standard width for iPads. By setting preferredWidth you can override the max width of 340 for iPads only.

Gesture Dismissal

Gesture dismissal allows your dialog being dismissed either by a background tap or by swiping the dialog down. By default, this is set to true. You can prevent this behavior by setting either tapGestureDismissal or panGestureDismissal to false in the initializer.

Hide Status Bar

PopupDialog can hide the status bar whenever it is displayed. Defaults to false. Make sure to add UIViewControllerBasedStatusBarAppearance to Info.plist and set it to YES.

Completion

This completion handler is called when the dialog was dismissed. This is especially useful for catching a gesture dismissal.

Default Dialog Properties

If you are using the default dialog, you can change selected properties at runtime:

// Create the dialog
let popup = PopupDialog(title: title, message: message, image: image)

// Present dialog
self.present(popup, animated: true, completion: nil)

// Get the default view controller and cast it
// Unfortunately, casting is necessary to support Objective-C
let vc = popup.viewController as! PopupDialogDefaultViewController

// Set dialog properties
vc.image = UIImage(...)
vc.titleText = "..."
vc.messageText = "..."
vc.buttonAlignment = .horizontal
vc.transitionStyle = .bounceUp

Styling PopupDialog

Appearance is the preferred way of customizing the style of PopupDialog. The idea of PopupDialog is to define a theme in a single place, without having to provide style settings with every single instantiation. This way, creating a PopupDialog requires only minimal code to be written and no "wrappers".

This makes even more sense, as popup dialogs and alerts are supposed to look consistent throughout the app, that is, maintain a single style.

Dialog Default View Appearance Settings

If you are using the default popup view, the following appearance settings are available:

let dialogAppearance = PopupDialogDefaultView.appearance()

dialogAppearance.backgroundColor      = .white
dialogAppearance.titleFont            = .boldSystemFont(ofSize: 14)
dialogAppearance.titleColor           = UIColor(white: 0.4, alpha: 1)
dialogAppearance.titleTextAlignment   = .center
dialogAppearance.messageFont          = .systemFont(ofSize: 14)
dialogAppearance.messageColor         = UIColor(white: 0.6, alpha: 1)
dialogAppearance.messageTextAlignment = .center

Dialog Container Appearance Settings

The container view contains the PopupDialogDefaultView or your custom view controller. the following appearance settings are available:

let containerAppearance = PopupDialog

PopupDialog

Install / Use

README