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.

Egad

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.

Epictetus

Your second comment was spot on! I added a slight white tint to the image before blurring, and it was pretty close to what I'm trying to replicate. Setting the blur as the textColor for the label works nicely, like in my above code. Thanks! While my code uses an image, Greg's answer also shows how to use the new snapshotting APIs in iOS to create the same. – Egad

What about scrolling? @Egad – Camboose

You have to keep adjusting the image based on the contentOffset of the scroll view – Egad

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?

Hartmunn

This is a link to that files. – Hartmunn

I'm using that same category too, but this doesn't really answer my question, just shows me how to blur. – Egad

This is similar to the code I've had working (see edits), but doesn't try to align the pattern image used as the text colour with the actual background. – Egad

What about put white small view in the place where is the label you want to highlight and take blur shot of that view and put in in the background to your end view? – Hartmunn

I don't really understand what you mean. – Egad

I mean you can create temp view (dark) and you can add bright subview on it (frame similar to your label frame you want to highlight). If you take snapshot of that view and apply blur on it you should have blur image which you need. – Hartmunn

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.

Instability

an off-topic self-advert...? – Cannon

No the library implements this effect. He uses Apple's UIImage+Effects – Killian