Jan Erik Schlorf
Jan Erik Schlorf

Reputation: 2311

UIAlertController does not turn all elements in the background to B/W

EDIT: Repository with my solution: UIAlertControllerDimmed


After showing UIAlertController, most of the background gets 'dimmed' and turns black and white. Some elements get darker, but don't turn B/W.

These elements are (from top to bottom on the screenshot):

with alert controller

I couldn't find anything related to this topic. What do I have to change to also get these items dimmed?

Here is the without the UIAlertController:

without alert controller]

Upvotes: 2

Views: 1046

Answers (3)

Jan Erik Schlorf
Jan Erik Schlorf

Reputation: 2311

Thank you for your help.

In order to have a more flexible solution I decided to create a subclass of UIAlertController which captures a screenshot, turns it to grayscale colors and inserts it behind the UIAlertController when it gets presented. This way it works without having to do any additional work, and you don't need to implement fade animations for every single element that does not turn to grayscale colors by default.

Github repo: UIAlertControllerDimmed

Upvotes: 2

toddg
toddg

Reputation: 2906

I think what's going on here is that you're setting the tintColor of some of the elements and you get different behavior for tintColor than you do for backgroundColor or textColor (or the colors in an image).

When an alert or action sheet appears, iOS 7 automatically dims the tint color of the views behind it. To respond to this color change, a custom view subclass that uses tintColor in its rendering should override tintColorDidChange to refresh the rendering when appropriate.

For example, I created a simple app that displays an alert controller. I set the left button tint color to clear color and the text color to blue:

enter image description here

I set the right button tint color to system green color:

enter image description here

When I run the app and present the alert controller it looks like this

Before:

enter image description here

After:

enter image description here

In order to get the behavior you're looking for, you'll need to follow the advice in @Alexander's answer. You'll need to create grayscale versions of the four images on the screen and animate the transition to them.

Upvotes: 4

Alexander
Alexander

Reputation: 86

You can have a helper function to animate the color change

fileprivate func dimElements(highlight: Bool) {
    UIView.animate(withDuration: 0.3) {
        self.sendButton.backgroundColor = highlight ? .red : .gray
    }
}

and then call it when presenting/dismissing the alert.

let alert = UIAlertController(title: "Error", message: "Oops!", preferredStyle: .alert)
let okAction = UIAlertAction(title: "Ok", style: .cancel, handler: {_ in self.dimElements(highlight: true) })
alert.addAction(okAction)
self.dimElements(highlight: false)
present(alert, animated: true, completion: nil)

Upvotes: 2

Related Questions