minitour / azdialogviewcontroller

A highly customizable alert dialog controller that mimics Snapchat's alert dialog.

AZDialogViewController

A highly customizable alert dialog controller that mimics Snapchat's alert dialog.

Screenshots

Installation

CocoaPods:

pod 'AZDialogView'

Carthage:

github "Minitour/AZDialogViewController"

Manual:

Simply drag and drop the Sources folder to your project.

Usage

Create an instance of AZDialogViewController:

//init with optional parameters
let dialog = AZDialogViewController(title: "Antonio Zaitoun", message: "minitour")

Customize:

//set the title color
dialog.titleColor = .black

//set the message color
dialog.messageColor = .black

//set the dialog background color
dialog.alertBackgroundColor = .white

//set the gesture dismiss direction
dialog.dismissDirection = .bottom

//allow dismiss by touching the background
dialog.dismissWithOutsideTouch = true

//show seperator under the title
dialog.showSeparator = false

//set the seperator color
dialog.separatorColor = UIColor.blue

//enable/disable drag
dialog.allowDragGesture = false

//enable rubber (bounce) effect
dialog.rubberEnabled = true

//set dialog image
dialog.image = UIImage(named: "icon")

//enable/disable backgroud blur
dialog.blurBackground = true

//set the background blur style
dialog.blurEffectStyle = .dark

//set the dialog offset (from center)
dialog.contentOffset = self.view.frame.height / 2.0 - dialog.estimatedHeight / 2.0 - 16.0

Add Actions:

dialog.addAction(AZDialogAction(title: "Edit Name") { (dialog) -> (Void) in
        //add your actions here.
        dialog.dismiss()
})
        
dialog.addAction(AZDialogAction(title: "Remove Friend") { (dialog) -> (Void) in
        //add your actions here.
        dialog.dismiss()
})
        
dialog.addAction(AZDialogAction(title: "Block") { (dialog) -> (Void) in
        //add your actions here.
        dialog.dismiss()
})

Add Image:

dialog.imageHandler = { (imageView) in
       imageView.image = UIImage(named: "your_image_here")
       imageView.contentMode = .scaleAspectFill
       return true //must return true, otherwise image won't show.
}

Custom View

/*
 customViewSizeRatio is the precentage of the height in respect to the width of the view. 
 i.e. if the width is 100 and we set customViewSizeRatio to be 0.2 then the height will be 20. 
 The default value is 0.0.
*/
dialog.customViewSizeRatio = 0.2

//Add the subviews
let container = dialog.container
let indicator = UIActivityIndicatorView(activityIndicatorStyle: .gray)
dialog.container.addSubview(indicator)

//add constraints
indicator.translatesAutoresizingMaskIntoConstraints = false
indicator.centerXAnchor.constraint(equalTo: container.centerXAnchor).isActive = true
indicator.centerYAnchor.constraint(equalTo: container.centerYAnchor).isActive = true
indicator.startAnimating()

Present The dialog:

dialog.show(in: self)

//or

//Make sure to have animated set to false otherwise you'll see a delay.
self.present(dialog, animated: false, completion: nil)

Show with completion

dialog.show(in: self) { dialog in
    // show and then change the offset
    dialog.contentOffset = self.view.frame.height / 2.0 - dialog.estimatedHeight / 2.0 + 15
}

Design

Change Dialog Width

This has been a requested feature and so I decided to add it. You can change the width of the dialog frame as a ratio in respect to the width of the main view. This can only be doing using the initalizer and the width cannot be modified afterwards.

let dialog = AZDialogViewController(title: "Switch Account", message: "My Message", widthRatio: 1.0)

This will display a dialog which has the same width as the the controller it is presented in.

The default value is 0.75

Customize Action Buttons Style:

dialog.buttonStyle = { (button,height,position) in
     button.setBackgroundImage(UIImage.imageWithColor(self.primaryColorDark), for: .highlighted)
     button.setTitleColor(UIColor.white, for: .highlighted)
     button.setTitleColor(self.primaryColor, for: .normal)
     button.layer.masksToBounds = true
     button.layer.borderColor = self.primaryColor.cgColor
}

Use custom UIButton sub-class:

dialog.buttonInit = { index in
    //set a custom button only for the first index
    return index == 0 ? HighlightableButton() : nil
}

Customize Tool Buttons:

dialog.rightToolStyle = { (button) in
        button.setImage(UIImage(named: "ic_share"), for: [])
        button.tintColor = .lightGray
        return true
}      
dialog.rightToolAction = { (button) in
        print("Share function")
}

dialog.leftToolStyle = { (button) in
        button.setImage(UIImage(named: "ic_share"), for: [])
        button.tintColor = .lightGray
        return true
}      
dialog.leftToolAction = { (button) in
        print("Share function")
}

Customize Cancel Button Style:

dialog.cancelEnabled = true

dialog.cancelButtonStyle = { (button,height) in
        button.tintColor = self.primaryColor
        button.setTitle("CANCEL", for: [])
        return true //must return true, otherwise cancel button won't show.
}

azdialogviewcontroller's Issues

Windows are too small on iPad

Unable to set font and max height on dialog view

If I add a large number of actions the underlying stackView flows beyond the screen.

Dialog Controller is covered by keyboard.

Is there a way to reset the constraints of the dialog when the keyboard appears? The keyboard covers parts of the dialog...

Re-Call Bug

Hi Again;

I found another mistake while using it. If you make closure type initializing and many times dialog.show(in: self) method calling you then after the dismiss operation is goes a bug.

my code is here ----

http://notes.io/m4ik

Support iPad Landscape

Hello,

I just removed the FixedNavigationController in my Projekt, but the Dialogs are too wide and big on iPads in Landscape. Portrait is okay on both devices.

thanks

Feature request: app-wide customization

Add static shared property, to change default style app-wide
Good example, is default iOS components, like UITableViewCell.appearance() and libraries like ToastSwift:

        var toastStyle = ToastStyle()
        toastStyle.backgroundColor = UIColor.init(white: 0, alpha: 0.5)
        ToastManager.shared.style = toastStyle

iPhone XS Max support?

I everyone, I've been testing AZDialogView with iPhone XS Max screen sizes, and the view controller is rendered oddly. It appears very small on the ViewController

Is there a way to increase the width of button?

the button height can be set, but not width?

No custom view support

Hi,

It seems there is no support for adding a custom view...

I tried to add a custom view within the code but it does not show anything.

Regards,
Andre

not changed size

hello

how can I change window size ? when iPad landscape looking very big window.

Thank you.

Image view holder should have the alert's background color

More specifically, these changes should be made:

AZDialogViewController/Sources/AZDialogViewController.swift

Line 741 in 38bc4ec

imageViewHolder.backgroundColor = .white

should be changed to

imageViewHolder.backgroundColor = alertBackgroundColor ?? .white

Also

AZDialogViewController/Sources/AZDialogViewController.swift

Line 1096 in 38bc4ec

imageViewHolder.backgroundColor = UIColor.white

should be changed to

imageViewHolder.backgroundColor = alertBackgroundColor ?? UIColor.white

Bluring the chrome

It would be nice to have functionality where we can blur the background chrome of alert.

Override height for calculations?

I am using AZDialog in my project, but when I try to display a dialog in a custom modal view, the dialog is squeezed. I think this is happening because the custom modal is smaller than the screen height (music app style) - If I present this view with a normal modal presentation style, the dialog works fine. Is there any way to override the height function of the dialog without altering the core dialog view code?

Is there a way to know when dismiss() on the dialog is called?

When I show my dialog to the user, he/she has two options:

1. Tap on "Yes"
2. Tap on "Cancel" or just tap on the screen or move the dialog upwards or downwards.

Is there a way to absolutely cover the 2 option in one method, thereforing listening to the dismissal call?

Cancel and tap on screen (touchesBegan:) wouldn't be a problem to recognize, while upwards/downwards swipe/pan would be.

Dialog appears a-lot smaller on IPhone X

Having the same issue as #30 . Im using an iphone x and this is how the pop up appears. On Iphone 7-8 pop up window appears normal size. IPhone X AzdialogView's text and buttons appear alot smaller when shown on that device.

Unable to customize UIButton.

I've been trying to modify the AZDialogView's buttons to make them look like the default iOS alert controllers (with a button image in it), but with the gesture-dismissing capabilities of this project. But, I can't customize the button for some reason. Here's my code:

// Configure UIButton styles
        dialogController.buttonStyle = { (button, height, position) in
            // Fill button with color
            button.setImage(UIImage(named: "pop"), for: .normal)
            button.semanticContentAttribute = .forceLeftToRight
            button.titleLabel?.font = UIFont(name: "AvenirNext-Demibold", size: 16)
            button.layer.masksToBounds = true
        }

Flattened button sizes for iPhone X screen size.

The UIButtons in the AZDialogViewController have buttons that are flattened and are not proportional to what the buttons should look like according to the readme for iPhone X screen sizes. Are you using the Safe Area layout guide?

Dialog inside a popover

I am using a popover to display an appointment diary and I am using AZDialogs to display messages in my app. This works great when presented on a phone as the popover is presented as a modal view so the width of the dialog is correct, however when displayed on an iPad (The target device) the dialog is wider than the popover window.

I have read through other support queries here and can see that there is no support for custom widths, but how does the width get calculated for these dialogs (overall device size at a guess?) and is there any way to get the calculation to use the displaying superview width?

Using dynamic data with AZDialogViewController

Thank you for this wonderful library.
Can you please point me to how to be able to do some thing like this.

let data = ["A", "B", "C"]

for i in 0 ..< data.count {            
      dialog.addAction(AZDialogAction(title: data[i], handler: doSomething(title or index)))
}

func doSomething(index: Int or title: String){

if title == "A" or index == 0 {
        //do something
  }
}

Customizing title, message labesl color and background

At the moment there is no way we can set color of the message and title label nor we can set color of the alert container. I would suggest to add new apis like

var titleLabelColor: UIColor?
var messageLabelColor: UIColor?
var containerBackgroundColor: UIColor?

Can I add a tableView inside the DialogController?

If so, how can I do this programmatically?

Add dark theme support

Its not display above Tabbar.

Hi

I want to display this pop-up above the tabbar.

Like want to display popup in top of the all views.

Thanks

Delegate ?

Hi.
First of all, thanks for this nice repo.
What I would like to say is that it exists in the project like dismisedDelegate?
Is there any delegate method when the DialogViewController is dragged?

thanks

Dialog Transparency

Is there a way to make the dialog use an alpha value so that I can see my image behind it?

I tried a couple of ways with the dialog and dialog.container but didn't have any luck.

set leftToolItem.heightAnchor.constraint in accordance to rightToolItem.heightAnchor.constraint

Hi,
In setupToolItems(), would you consider to set leftToolItem.heightAnchor.constraint in as the same as rightToolItem.heightAnchor.constraint?
Original:
if leftToolStyle?(leftToolItem) ?? false{
baseView.addSubview(leftToolItem)
leftToolItem.topAnchor.constraint(equalTo: baseView.topAnchor, constant: spacing2).isActive = true
leftToolItem.leftAnchor.constraint(equalTo: baseView.leftAnchor,constant: spacing2).isActive = true
leftToolItem.widthAnchor.constraint(equalTo: leftToolItem.heightAnchor).isActive = true
leftToolItem.addTarget(self, action: #selector(AZDialogViewController.handleLeftTool(:)), for: .touchUpInside)
}
How about?
if leftToolStyle?(leftToolItem) ?? false{
baseView.addSubview(leftToolItem)
leftToolItem.topAnchor.constraint(equalTo: baseView.topAnchor, constant: spacing2).isActive = true
leftToolItem.leftAnchor.constraint(equalTo: baseView.leftAnchor,constant: spacing2).isActive = true
leftToolItem.widthAnchor.constraint(equalTo: leftToolItem.heightAnchor).isActive = true
leftToolItem.heightAnchor.constraint(equalToConstant: 20).isActive = true
leftToolItem.addTarget(self, action: #selector(AZDialogViewController.handleLeftTool(:)), for: .touchUpInside)
}

Thank you very much for the sharing!

Regards,
godustin

How to show dialog from top?

The dialog always popup from bottom, I cannot find a way to make it popup from the top, how to do that?

Thanks.

Custom design options

Is it possible to design the title, the message and the dialog size? The only options i see are the button styles.

iPhoneX Support?

This might be a bit earlier, but I've been testing AZDialogView with iPhoneX screen sizes, and the view controller is rendered oddly.

Change font of title and message labels

I am being able to change font of cancel button and action buttons just fine.

When it comes to changing title and message label fonts, I can't, since it's fileprivate.

Could you release a new version with these two small functions, enabling us to change message label and title label fonts?

Carthage support?

@Minitour ?

Issue when Dismissing

Dismissing Alert is also dismiss other alert which is shown after dismiss... is it because of super.dismiss when dismissing ??

Please some one let me know solution ...

@ObjC

Can you add Objective C support please

Multiline action buttons

Is there a way to have multiline action buttons (useful if action title is based on user input)?

Change font size?

When I present the alert view the fonts are both pretty small. I tried:
dialog.titleFontSize = CGFloat(30.0) however it gives me an error saying that titleFontSize setter is inaccessible.

Pod - Unable to find a specification for 'AZDialogView'

For some reason, can't install the pod. I get the following error:

[!] Unable to find a specification for 'AZDialogView'

Is it compatible with iOS 10.0?

custom width

How can i change the dialog width with custom views ?

UITextView for container value

How does the .customViewSizeRatio variable resize the custom view?
I'm adding a UITextView inside AZDialogViewController's container view.