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

结果：