A UILabel with rounded corners, drop shadow and background pattern

Question

I have been trying every single method I found but I wasn't able to make it. I simply want to make a label with rounded corners, a drop shadow with a background pattern. The shadow works only if I do not want rounded corners. I can't get them both together!

Here is my code with the shadow:

label.text = msg;
label.textAlignment = UITextAlignmentCenter;
label.frame = CGRectMake(20,10,280,40);
label.backgroundColor 
    = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"msg_box_bg.png"]];

[label.layer setCornerRadius:10];
[label.layer setMasksToBounds:NO];

/* Shadow */
label.layer.shadowColor = [UIColor blackColor].CGColor;
label.layer.shadowOpacity = 0.6;
label.layer.shadowOffset = CGSizeMake(0,0);
label.layer.shadowRadius = 3;

This gives me shadow without rounded corners. But if I use

[label.layer setMasksToBounds:YES];

This will give me rounded corners with no shadow. I have taken the advise to use a shadow path, so the code with the shadow path looks like this:

label.text = msg;
label.textAlignment = UITextAlignmentCenter;
label.frame = CGRectMake(20,10,280,40);
label.backgroundColor 
    = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"msg_box_bg.png"]];

[label.layer setCornerRadius:10];
[label.layer setMasksToBounds:YES];

/* Shadow */
label.layer.shadowColor = [UIColor blackColor].CGColor;
label.layer.shadowOpacity = 0.6;
label.layer.shadowOffset = CGSizeMake(0,0);
label.layer.shadowRadius = 3;
label.layer.shadowPath = [[UIBezierPath bezierPathWithRoundedRect:label.frame cornerRadius:10]CGPath];
label.layer.shouldRasterize = YES;

This code does give me rounded corners but no shadow. Any suggestions?

Thanks!

http://stackoverflow.com/questions/3690972/why-maskstobounds-yes-prevents-calayer-shadow — John Graziano, Apr 19 '12 at 01:35

score 12 · Accepted Answer · answered Apr 20 '12 at 05:09

12

enter image description here

I used the code below to get the results you were after.

CGSize size = CGSizeMake(280, 40);

/** Shadow */
CALayer *shadowLayer = [CALayer new];
shadowLayer.frame = CGRectMake(20,100,size.width,size.height);
shadowLayer.cornerRadius = 10;

shadowLayer.backgroundColor = [UIColor clearColor].CGColor; 
shadowLayer.shadowColor = [UIColor blackColor].CGColor;
shadowLayer.shadowOpacity = 0.6;
shadowLayer.shadowOffset = CGSizeMake(0,0);
shadowLayer.shadowRadius = 3;

/** Label */
UILabel *label = [UILabel new];
label.text = @"Hello World";
label.textAlignment = UITextAlignmentCenter;
label.frame = CGRectMake(0, 0, size.width, size.height);
label.backgroundColor = [UIColor clearColor]; 
label.layer.cornerRadius = 10;
[label.layer setMasksToBounds:YES];
//  customLabel.backgroundColor = [UIColor whiteColor]; 
label.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"options.png"]];

/** Add the Label to the shawdow layer */
[shadowLayer addSublayer:label.layer];

[self.view.layer addSublayer:shadowLayer];      

[shadowLayer release];

answered Apr 20 '12 at 05:09

haroldcampbell

1,512
1
14
22

This is correct. The issue is that a layer filled with a pattern image will not respect a corner radius unless you mask to bounds, and a shadow will not be drawn if you _do_ mask to bounds. So a separate layers is required for the shadow. – jrturton Apr 20 '12 at 06:06
I see the pont. But, unfortunately the code does not show anything for me. I copied the code as it is with the background file named "options.png" which I don't have, it showed a black box. When I put in my background file name it does not show anything what so ever. I'm really confused by this! I'll try to play with it to see what I can do it. – hsnm Apr 21 '12 at 01:39
What @jrturton said is correct, this is what I did with the code. As per your not seeing anything. Let's debug the results - try this, comment the label.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"options.png"]]; line. Uncomment the line above and rename the customLabel variable to label. You should now see a white rounded label with a black shadow. Are getting that result? – haroldcampbell Apr 22 '12 at 07:39
@haroldcampbell actually nothing appears. Like I said a black rounded shape appears when I specify a background image file that doesn't exists! Never mind, I'll try to see maybe my code has some other problems. I'll check this code on a fresh ViewController to see what happens. – hsnm Apr 28 '12 at 12:35

A UILabel with rounded corners, drop shadow and background pattern

1 Answers1