iOS 7/8 Passcode screen visual effect

Question

Wondering if anyone has any insight on how this effect is achieved. Specifically the circles around the numbers, how you can see through the rim of the circle onto the blurred background behind it. And the brightness is maintained even after the dark overlay appears on the layer between the numbers and the original background.

This is the screen that is presented when the user attempts to unlock their iPhone.

Perhaps you could include at least a screenshot to show what you're asking about. Otherwise, it's rather unclear what you are describing. — Greg Hewgill, Oct 22 '14 at 22:12
Everyone sees this screen about 100 times per day. Edited to be more clear. — jln19, Oct 22 '14 at 22:17
Not everybody has the screen lock activated immediately on locking, and not everybody uses the digit-based PIN screen (which I conclude you must be talking about). My lock screen presents a keyboard, and I only see it maybe twice a day. — Greg Hewgill, Oct 22 '14 at 22:23
@jln19 you're obviously a lot more pessimistic about TouchID than Apple is. In Apple's opinion, nobody with a 5s or newer will ever see the lock screen. — Tommy, Oct 22 '14 at 23:28
With all due respect the question is about a visual effect, not about the frequency one does or doesn't see the lock screen. I think anyone who reads this knows what I'm talking about. — jln19, Oct 23 '14 at 00:09

ifau · Answer 1 · 2014-12-21T10:53:04.903

In iOS 8 this can be done with UIVibrancyEffect:

UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *viewWithBlurredBackground = [[UIVisualEffectView alloc] initWithEffect:effect];
viewWithBlurredBackground.frame = self.view.bounds;

UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:effect];
UIVisualEffectView *viewWithVibrancy = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
viewWithVibrancy.frame = self.view.bounds;

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
button.layer.cornerRadius = 40;
button.layer.borderWidth = 1.2;
button.layer.borderColor = [UIColor whiteColor].CGColor;
button.frame = CGRectMake(100, 100, 80, 80);

[viewWithVibrancy.contentView addSubview:button];
[viewWithBlurredBackground.contentView addSubview:viewWithVibrancy];
[self.view addSubview:viewWithBlurredBackground];

NSMutableAttributedString *titleString = [[NSMutableAttributedString alloc] initWithString:@"2\nA B C"];
[titleString addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor] range:(NSRange){0, titleString.length}];
[titleString addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"HelveticaNeue-Thin" size:32] range:[titleString.string rangeOfString:@"2"]];
[titleString addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"HelveticaNeue-Thin" size:10] range:[titleString.string rangeOfString:@"A B C"]];

// Add UILabel on top of the button, in order to avoid UIVibrancyEffect for text.
// If you don't need it, just call [button setAttributedTitle:titleString forState:UIControlStateNormal];

UILabel *notVibrancyLabel = [[UILabel alloc] init];
notVibrancyLabel.attributedText = titleString;
notVibrancyLabel.textAlignment = NSTextAlignmentCenter;
notVibrancyLabel.numberOfLines = 2;
notVibrancyLabel.frame = button.frame;

[self.view addSubview:notVibrancyLabel];

Also you need change background color when button is pressed.

- (void)buttonPressed:(id)sender
{
    UIButton *button = sender;
    // Of course, this is just an example. Better to use subclass for this.
    [UIView animateWithDuration:0.2 animations:^
    {
        button.backgroundColor = [UIColor whiteColor];
    } completion:^(BOOL finished)
    {
        [UIView animateWithDuration:0.2 animations:^
        {
            button.backgroundColor = [UIColor clearColor];
        }];
    }];
}

Result:

UIButton with UIVibrancyEffect

iOS 7/8 Passcode screen visual effect

1 Answers1