1

How can an encompassing UIView have both a shadow and a corner radius at the same time?

I have tried other solutions suggested on SO multiple times, but unfortunately they do not seem to work for iOS6 (or at least not for me)

So I thought I might post this, so that an iOS6 solution can be found.

I have a container UIView which contains two subviews

- a custom UIImageView
- a custom UIView

I would like the entire UIView to have a corner radius of 2.5, but I would also like the UIView to have a shadow. However, so far, I get only 1 of these 2 desires, never both at the same time.

Here is my code, I have different versions of it with my different attempts with SO solutions, but this is just one of my versions.

    self.layer.shouldRasterize = YES;
    self.layer.rasterizationScale = [UIScreen mainScreen].scale;
    self.layer.cornerRadius = 2.5;
    self.layer.masksToBounds = YES;
    self.layer.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.1].CGColor; //0.1
    self.layer.shadowPath = [UIBezierPath bezierPathWithRect:self.bounds].CGPath;
    self.layer.shadowOpacity = 1.0;
    self.layer.shadowRadius = 3.0;

^here self is the containing custom UIView with two subviews described above

Does anyone know of an iOS6 solution to this problem?

UPDATE

So, I do not need a border colour, so I was not adding that when I saw the solutions, but this time I added that, using the solution in the comment below, and it seems that the UIView is getting rounded, but I really want the combined UIImageView and UIView to get rounded.

So basically, the UIImageView is on top, and the UIView is on the bottom.

So how do I get only the top of the UIImageView to be rounded, and only the bottom of the UIView to be rounded.

Thanks.

Note: shadows work as one whole object, but the corner radius is not working as one whole object?

GangstaGraham
  • 8,865
  • 12
  • 42
  • 60
  • Have you looked at this answer? http://stackoverflow.com/questions/4754392/uiview-with-rounded-corners-and-drop-shadow – jfuellert May 28 '13 at 20:18
  • Yes, none of the solutions from that page worked for me, unfortunately @jfuellert – GangstaGraham May 28 '13 at 20:20
  • @jfuellert See the update, any thoughts on this? – GangstaGraham May 28 '13 at 20:26
  • As @Marcin Kuptel stated in his answer, disabling masksToBounds will let you see the shadow because it won't be getting trimmed by the view's bounds (Shadow width doesn't add to the view's dimensions). I'd suggest trying his solution though. – jfuellert May 28 '13 at 20:43
  • @jfuellert I tried that, but rounded corners does not work with his solution (for my UIView at least), appreciate the help though – GangstaGraham May 28 '13 at 20:45
  • @jfuellert I figured it out, see my answer to see how I got it to work. :) – GangstaGraham May 28 '13 at 21:16

2 Answers2

5

I figured it out.

self.layer.shouldRasterize = YES;
self.layer.rasterizationScale = [UIScreen mainScreen].scale;
self.layer.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.8].CGColor;
self.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:self.layer.bounds cornerRadius:self.layer.cornerRadius].CGPath;
self.layer.shadowOpacity = 1.0;
self.layer.shadowRadius = 3.0;

UIView *container = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
[self addSubview:container];

[container addSubview:self.someCustomUIView];
[container addSubview:self.someCustomImageView];

container.layer.cornerRadius = 2.5;
container.layer.masksToBounds = YES;

So basically:

  1. I set the shadow of the main UIView.
  2. I created a container subview which contains two other subviews
  3. I set the corner radius of the container subview
  4. Voila! It works!
  5. I hope this works for other people who have multiple subviews in one UIView
  6. I'd like to thank everyone for their help. :)
GangstaGraham
  • 8,865
  • 12
  • 42
  • 60
2

I think you should change this line of code:

self.layer.masksToBounds = YES;

to this one

self.layer.masksToBounds = NO;

If you set masksToBounds to YES, then you won't see anything that extends beyond the view's bounds, and this is the case with a shadow.

This code is from my current project (iOS 6) and it works fine. I can see both rounded corners and a shadow.

self.layer.masksToBounds = NO;
self.layer.cornerRadius = 5.0;
self.layer.shadowColor = [UIColor blackColor].CGColor;
self.layer.shadowOffset = CGSizeMake(0, -1);
self.layer.shadowOpacity = 0.6;

UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect: self.layer.bounds];
self.layer.shadowPath = shadowPath.CGPath;
Marcin Kuptel
  • 2,674
  • 1
  • 17
  • 22