如何在通知中心(iOS 8)中复制模糊文本

时间:2014-08-19 18:25:53

标签: uilabel ios8 blur

我在iOS 8中使用TodayExtension,我想知道如何将模糊效果应用于文本或按钮。我已经发现它与UIVisualEffectView有关。但我不知道如何使用它。

我正在使用Objective-C

任何人都可以向我解释如何实现这个目标吗?

谢谢大卫

enter image description here

5 个答案:

答案 0 :(得分:22)

更新了iOS 10的答案

在iOS 10中,您可以使用widgetPrimaryVibrancyEffectwidgetSecondaryVibrancyEffect自动返回UIVibrancyEffect个对象。

查看文档herehere

iOS 9答案

使用此代码将振动效果应用于整个小部件:

UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:[UIVibrancyEffect notificationCenterVibrancyEffect]];
effectView.frame = self.view.bounds
effectView.autoresizingMask = self.view.autoresizingMask;

__strong UIView *oldView = self.view;

self.view = effectView;

[effectView.contentView addSubview:oldView];

self.view.tintColor = [UIColor clearColor];

答案 1 :(得分:8)

你实际上在这里看两个效果。背景应用了模糊效果,并且标签应用了活力效果。

对于模糊效果,首先使用样式(暗,亮,超轻)初始化UIBlurEffect:

UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

对于活力效果,您使用刚刚创建的模糊效果初始化UIVibrancyEffect:

UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];

这是因为活力效果需要考虑潜在的模糊效果。

接下来,您将创建两个UIVisualEffectViews:

UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];

这些需要添加到视图层次结构中。 UIVisualEffectView有一个contentView属性,您必须向其添加要应用相应效果的子视图。确保将vibrancyEffectView添加到blurEffectView的contentView的子视图中。

您也可以在IB中设置所有这些(我使用Xcode 6 beta 5)。有一个"视觉效果视图与模糊"和模糊和活力的视觉效果视图"在对象库中,您可以拖动到视图。具有模糊和活力的视觉效果视图"设置两个如上所述嵌套的UIVisualEffectView。

查看WWDC14 Session 221和UIVisualEffectView.h标题以获取更多信息。

答案 2 :(得分:0)

可以通过在按钮上绘制透视文本来重新创建“Bearbeiten”按钮。如何做到这一点已在this帖子中得到解答。

请参阅下面的解决方案。最初的iOS“Bearbeiten”看起来仍然有点不同。通过改变alpha,我看起来很相似。不是正确的解决方案。希望这篇文章会引发某人找到正确的方法(并分享)。

viewDidLoad

_pinButton.backgroundColor = [UIColor clearColor];
_pinButton.layer.cornerRadius = 4.0;
_pinButton.clipsToBounds = YES;

UIColor *white = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.75];
UIColor *whiteT = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.3];
UIFont *buttonFont = [UIFont fontWithName:@"HelveticaNeue" size:12.0];

[_pinButton setImage:[self imageWithCutOutString:@"Pin" 
                                            size:_pinButton.frame.size 
                                 backgroundColor:white 
                                            font:buttonFont] 
            forState:UIControlStateNormal];

[_pinButton setImage:[self imageWithCutOutString:@"Pin" 
                                            size:_pinButton.frame.size 
                                 backgroundColor:whiteT 
                                            font:buttonFont]
            forState:UIControlStateHighlighted];

实际的imageWithCutOutString方法本身:

- (UIImage *)imageWithCutOutString:(NSString *)string size:(CGSize)size backgroundColor:(UIColor *)backgroundColor font:(UIFont *)font
{
    NSDictionary *textAttributes = @{ NSFontAttributeName:font };

    CGSize textSize = [string sizeWithAttributes:textAttributes];

    UIGraphicsBeginImageContextWithOptions(size, NO, [[UIScreen mainScreen] scale]);
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(ctx, backgroundColor.CGColor);

    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0.0, 0.0, size.width, size.height)];
    CGContextAddPath(ctx, path.CGPath);
    CGContextFillPath(ctx);

    CGContextSetBlendMode(ctx, kCGBlendModeDestinationOut);
    CGPoint center = CGPointMake((size.width - textSize.width) / 2.0, (size.height - textSize.height) / 2.0);
    [string drawAtPoint:center withAttributes:textAttributes];

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return image;
}

答案 3 :(得分:0)

我已经尝试过上面的例子,但它们似乎都没有开箱即用。这是一个适合我的类似例子:

- (void)viewDidLoad {
    [super viewDidLoad];

    UIVibrancyEffect *effect = [UIVibrancyEffect notificationCenterVibrancyEffect];

    UIVisualEffectView *outer = [[UIVisualEffectView alloc] initWithEffect:effect];
    outer.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    outer.frame = self.view.bounds;

    UIVisualEffectView *inner = [[UIVisualEffectView alloc] initWithEffect:effect];
    inner.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    inner.frame = self.view.bounds;

    UILabel *label = [UILabel new];
    label.text = @"HELLO, I am a vibrant label";
    label.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    label.frame = self.view.bounds;

    [inner.contentView addSubview:label];
    [outer.contentView addSubview:inner];
    [self.view addSubview:outer];
}

答案 4 :(得分:0)

我能够使用AYVibrantButtonStyleFill样式AYVibrantButton来实现“Bearbeiten”按钮:

// Create the button
AYVibrantButton* moreButton = [[AYVibrantButton alloc] initWithFrame:CGRectMake(0, 0, 210, 30) style:AYVibrantButtonStyleFill];
// Set the vibrancy effect to the one provided by notification center
moreButton.vibrancyEffect = [UIVibrancyEffect notificationCenterVibrancyEffect];
// Setup basic button properties
moreButton.text = @"Show More..";
moreButton.font = [UIFont systemFontOfSize:13.0];
// Add it to your view
[self.view addSubview:moreButton];