iOS 7/8 Passcode 屏幕视觉效果

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

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

---

Best Answer-推荐答案

在 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 actionselector(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] rangeNSRange){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)buttonPressedid)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];
        }];
    }];
}

结果:

关于iOS 7/8 Passcode 屏幕视觉效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26517885/