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.

Answer 1

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: