iOS 7/8 密码屏幕视觉效果

Question

想知道是否有人知道如何实现这种效果。特别是数字周围的圆圈，您如何通过圆圈的边缘看到其后面的模糊背景。即使在数字和原始背景之间的图层上出现深色叠加层后，亮度仍保持不变。

这是用户尝试解锁 iPhone 时显示的屏幕。

Answer 1

在 iOS 8 中，可以使用 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];

此外，按下按钮时您需要更改背景颜色。

- (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];
        }];
    }];
}

结果: