9

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!

1

1 Answer 1

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];
4
  • 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, 2012 at 6: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, 2012 at 1: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? Apr 22, 2012 at 7: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, 2012 at 12:35

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.