iOS 7 Notification Center Like Label

Question

In the iOS7 notification centre, the labels (and the separator lines) have a very interesting background: the blur image, and what looks like the soft light blend mode.

I'm unsure what to search for. A pointer as to how this could be done would be really appreciated.

Till now, I've tried to replicate the effect by setting a part of the blurred image as the background using label.textColor = [UIColor colorWithPatternImage:...]. This also doesn't account for the case when the background is all black (or white), and leads to the text becoming unreadable.

But that doesn't seem to work just right.

Like this:

Here's what I've tried:

- (void)viewDidLoad
{
    [super viewDidLoad];

    const CGFloat fontSize = 25.f;
    const NSString *text = @"A long-ish string";
    CGSize size = [text sizeWithAttributes:@{NSFontAttributeName: [UIFont fontWithName:@"Avenir Next" size:fontSize]}];
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(80, 270, size.width, size.height)];
    label.font = [UIFont fontWithName:@"Avenir Next" size:fontSize];
    label.textAlignment = NSTextAlignmentNatural;
    label.backgroundColor = [UIColor clearColor];
    label.text = text;

    UIImage *image = [UIImage imageNamed:@"wat@2x"];
    UIImage *blurredImage = [image applyBlurWithRadius:20.5 tintColor:[UIColor clearColor] saturationDeltaFactor:1.f maskImage:nil];

    UIImageView *imageView = [[UIImageView alloc] initWithImage:[blurredImage applyDarkEffect]];
    imageView.frame = self.view.bounds;

    CGFloat imgScale = image.scale;
    CGRect labelFrame = label.frame;
    CGRect realRect = CGRectMake(labelFrame.origin.x * imgScale, labelFrame.origin.y * imgScale, labelFrame.size.width * imgScale, labelFrame.size.height * 2.0);
    CGImageRef labelPatternImage = CGImageCreateWithImageInRect(image.CGImage, realRect);
    label.textColor = [UIColor colorWithPatternImage:[UIImage imageWithCGImage:labelPatternImage scale:2.f orientation:UIImageOrientationUp]];
    CGImageRelease(labelPatternImage);

    [self.view addSubview:imageView];
    [self.view addSubview:label];
}

This code results in Code Result http://caughtinflux.com/static/result.png
As you can see, that isn't similar to the NC label.

EDIT
The blurred image background for the text should align with the actual background as much as possible. Hopefully the simulator screenshot of my code helps make sense of what I'm saying.

Answer 1

Did you try adjusting the labels alpha value yet (as easy as it sounds)? You could try that, and maybe add a bit of white to the blur before applying it to the label.

Answer 2

This is a blur effect. You can find Apple's category on UIImage with this effect available for download here. The files name is UIImage+ImageEffects.h/UIImage+ImageEffects.m any you can use it like that:

UIImage *backgImage = [image applyBlurWithRadius:2
tintColor:tintColor saturationDeltaFactor:0.8 maskImage:nil];

//Extended

You can create your view with the labels on it with lets say white text colour (to highlight in when you will blur whole view) and after that you can create snapshot of of this view and set up it as a background of the view you can use (by [self.view setBackgroundColor:[UIColor colorWithPatternImage:blurredImage];).

            UIView *snapshotView = [YOURUIVIEW resizableSnapshotViewFromRect:self.contentView.frame afterScreenUpdates:YES withCapInsets:UIEdgeInsetsZero];

            UIGraphicsBeginImageContextWithOptions( self.contentView.bounds.size, YES, 0.0f);
            BOOL result = [snapshotView drawViewHierarchyInRect:self.contentView.bounds
            afterScreenUpdates:YES];
            UIImage *snapshotImage =
            UIGraphicsGetImageFromCurrentImageContext();
            UIGraphicsEndImageContext();
            if (result){
                UIColor *tintColor = [UIColor colorWithWhite:0.97 alpha:0.82];
                UIImage *blurredImage = [snapshotImage applyBlurWithRadius:4 tintColor:tintColor saturationDeltaFactor:1.8
                maskImage:nil];
            }

Let me know is it something you need. If it doesn't can you explain again, with more details, what you want to achieve?

Answer 3

I have a sample project with notification center like separators, selected background views and (as of today) labels.

You can have a look at it here: https://github.com/mikrohard/BluredTableView

There may still be some bugs, perfomance issues, etc. But feel free to use and improve it.