iPhone UILabel text soft shadow

StackOverflow https://stackoverflow.com/questions/1709131

Question

I know soft shadows are not supported by the UILabel out of the box, on the iPhone. So what would be the best way to implement my own one?

EDIT:

Obviously I will subclass the UILabel and draw in the -drawRect: My question is, how do I get the contents of the label as graphics and draw around them, blur them etc...

EDIT 2:

I returned to this question about a year later. In the meantime I've built a class that allows you to easily add soft shadow to a label and tweak it's radius etc and also to draw gradients on the text itself. You can find it on GitHub: https://github.com/doukasd/iOS-Components/tree/master/Views

Was it helpful?

Solution

This answer to this similar question provides code for drawing a blurred shadow behind a UILabel. The author uses CGContextSetShadow() to generate the shadow for the drawn text.

OTHER TIPS

As of 3.2 there is direct support for shadows in the SDK.

label.layer.shadowColor = [label.textColor CGColor];
label.layer.shadowOffset = CGSizeMake(0.0, 0.0);

Import <QuartzCore/QuartzCore.h> and play with some parameters:

label.layer.shadowRadius = 3.0;
label.layer.shadowOpacity = 0.5;

And, if you find your shadow clipped by the label bounds:

label.layer.masksToBounds = NO;

finally set

label.layer.shouldRasterize = YES

I advise you to use the shadowColor and shadowOffset properties of UILabel:

UILabel* label = [[UILabel alloc] init];
label.shadowColor = [UIColor whiteColor];
label.shadowOffset = CGSizeMake(0,1);

Additionally to IIDan's answer: For some purposes it is necessary to set 

label.layer.shouldRasterize = YES

I think this is due to the blend mode that is used to render the shadow. For example I had a dark background and white text on it and wanted to "highlight" the text using a black shadowy glow. It wasn't working until I set this property.

Apply the (soft) shadow on the view's layer, like this:

UILabel *label = [[UIabel alloc] init];
label.layer.shadowColor = [[UIColor whiteColor] CGColor];
label.layer.shadowOpacity = 1.0;

To keep things up to date: Creating the shadow in Swift is as easy as that:

Import the QuartzCore Framework

import QuartzCore

And set the shadow attributes to your label

titleLabel.shadowColor = UIColor.blackColor()
titleLabel.shadowOffset = CGSizeMake(0.0, 0.0)
titleLabel.layer.shadowRadius = 5.0
titleLabel.layer.shadowOpacity = 0.8
titleLabel.layer.masksToBounds = false
titleLabel.layer.shouldRasterize = true

_nameLabel = [[UILabel alloc] initWithFrame:CGRectZero];
_nameLabel.font = [UIFont boldSystemFontOfSize:19.0f];
_nameLabel.textColor = [UIColor whiteColor];
_nameLabel.backgroundColor = [UIColor clearColor];
_nameLabel.shadowColor = [UIColor colorWithWhite:0 alpha:0.2];
_nameLabel.shadowOffset = CGSizeMake(0, 1);

i think you should use the [UIColor colorWithWhite:0 alpha:0.2] to set the alpha value.

I tried almost all of these techniques (except FXLabel) and couldn't get any of them to work with iOS 7. I did eventually find THLabel which is working perfectly for me. I used THLabel in Interface Builder and setup User Defined Runtime Attributes so that it's easy for a non programmer to control the look and feel.

https://github.com/MuscleRumble/THLabel

This like a trick,

UILabel *customLabel = [[UILabel alloc] init];

UIColor *color = [UIColor blueColor];
customLabel.layer.shadowColor = [color CGColor];
customLabel.layer.shadowRadius = 5.0f;
customLabel.layer.shadowOpacity = 1;
customLabel.layer.shadowOffset = CGSizeZero;
customLabel.layer.masksToBounds = NO;

I wrote a library that provides a UILabel subclass with soft shadow support and a bunch of other effects:

https://github.com/nicklockwood/FXLabel

Subclass UILabel, as stated, then, in drawRect:, do [self drawTextInRect:rect]; to get the text drawn into the current context. Once it is in there, you can start working with it by adding filters and whatnot. If you want to make a drop shadow with what you just drew into the context, you should be able to use:

CGContextSetShadowWithColor()

Look that function up in the docs to learn how to use it.

As of iOS 5 Apple provides a private api method to create labels with soft shadows. The labels are very fast: I'm using dozens at the same time in a series of transparent views and there is no slowdown in scrolling animation.

This is only useful for non-App Store apps (obviously) and you need the header file.

$SBBulletinBlurredShadowLabel = NSClassFromString("SBBulletinBlurredShadowLabel");

CGRect frame = CGRectZero;

SBBulletinBlurredShadowLabel *label = [[[$SBBulletinBlurredShadowLabel alloc] initWithFrame:frame] autorelease];
label.backgroundColor = [UIColor clearColor];
label.textColor = [UIColor whiteColor];
label.font = [UIFont boldSystemFontOfSize:12];
label.text = @"I am a label with a soft shadow!";
[label sizeToFit];

In Swift 3, you can create an extension:

import UIKit

extension UILabel {
    func shadow() {
        self.layer.shadowColor = self.textColor.cgColor
        self.layer.shadowOffset = CGSize.zero
        self.layer.shadowRadius = 3.0
        self.layer.shadowOpacity = 0.5
        self.layer.masksToBounds = false
        self.layer.shouldRasterize = true
    }
}

and use it via:

label.shadow()

Subclass UILabel, and override -drawInRect:

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top