I am trying to display a UIView with round corners and with a drop shadow. But the problem is that maskToBounds property only works for either of the case.
If maskToBounds is YES then round corners show up and when NO then shadow shows up. Here is the implementation but it only displays round corners with no shadow:
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_gradient.jpeg"]]];
self.view.layer.masksToBounds = YES;
self.view.layer.opaque = NO;
self.view.layer.cornerRadius = 15.0f;
self.view.layer.shadowColor = [UIColor blackColor].CGColor;
self.view.layer.shadowRadius = 5.0;
self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
self.view.layer.shadowOpacity = 0.9f;
ideas!
NOTE: I have read and implemented the code in the following thread but it does not work: UIView with rounded corners and drop shadow?
UPDATE 1:
I tried to create two separate views. One will represent the radius and one will represent the shadow. The problem is that is creates the shadow on top of the radius view as shown in the screenshot below:
H
ere is the code:
self.view.layer.masksToBounds = YES;
self.view.layer.opaque = NO;
self.view.layer.cornerRadius = 15.0f;
// self.view.backgroundColor = [UIColor clearColor];
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_gradient.jpeg"]];
//
UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
shadowView.layer.shadowColor = [UIColor blackColor].CGColor;
shadowView.layer.shadowRadius = 2.0;
shadowView.backgroundColor = [UIColor clearColor];
shadowView.layer.shadowOffset = CGSizeMake(3.0, 3.0);
shadowView.layer.shadowOpacity = 0.9f;
shadowView.layer.shadowPath = [UIBezierPath
bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;
[self.view addSubview:shadowView];
UPDATE 2:
Inverted still does not work. No round corners are created.
UIView *roundCornerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
roundCornerView.layer.masksToBounds = YES;
roundCornerView.layer.opaque = NO;
roundCornerView.layer.cornerRadius = 15.0f;
self.view.layer.shadowColor = [UIColor blackColor].CGColor;
self.view.layer.shadowRadius = 2.0;
//self.view.backgroundColor = [UIColor clearColor];
self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
self.view.layer.shadowOpacity = 0.9f;
self.view.layer.shadowPath = [UIBezierPath
bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;
[self.view addSubview:roundCornerView];
SOLUTION:
UIView *roundCornerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
roundCornerView.layer.masksToBounds = YES;
roundCornerView.layer.opaque = NO;
roundCornerView.layer.cornerRadius = 15.0f;
roundCornerView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_gradient.jpeg"]];
self.view.layer.shadowColor = [UIColor blackColor].CGColor;
self.view.layer.shadowRadius = 2.0;
self.view.backgroundColor = [UIColor clearColor];
self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
self.view.layer.shadowOpacity = 0.9f;
//self.view.layer.shadowPath = [UIBezierPath
// bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;
[self.view addSubview:roundCornerView];
Add subview with the same color which will be centered on the parent and will be with several pixels smaller. Like this you will have space from each side of the parent. On the parent turn on clipping subviews and add shadow to the inner view. Like this, you can have an inner shadow.
First we need to design the button or view on the screen, so we can add shadow and rounded corner on that button. You can change the design as per your need, this is just for demo purpose. Lets drag and drop UIButton on the main. storyboard and give some basic constraints.
Create two views.
one with the drop shadow (and don't forget to set the shadowPath)
in which you add a subview with cornerRadius
and maskToBounds
.
The accepted answer didn't include any code, so here is an example in Swift (See the original question for the OP's solution in Obj-C).
Like the accepted answer, this solution uses separate views for the shadow and the corner radius.
// add the shadow to the base view
baseView.backgroundColor = UIColor.clear
baseView.layer.shadowColor = UIColor.black.cgColor
baseView.layer.shadowOffset = CGSize(width: 3, height: 3)
baseView.layer.shadowOpacity = 0.7
baseView.layer.shadowRadius = 4.0
// improve performance
baseView.layer.shadowPath = UIBezierPath(roundedRect: baseView.bounds, cornerRadius: 10).cgPath
baseView.layer.shouldRasterize = true
baseView.layer.rasterizationScale = UIScreen.main.scale
// add the border to subview
let borderView = UIView()
borderView.frame = baseView.bounds
borderView.layer.cornerRadius = 10
borderView.layer.borderColor = UIColor.black.cgColor
borderView.layer.borderWidth = 1.0
borderView.layer.masksToBounds = true
baseView.addSubview(borderView)
// add any other subcontent that you want clipped
let otherSubContent = UIImageView()
otherSubContent.image = UIImage(named: "lion")
otherSubContent.frame = borderView.bounds
borderView.addSubview(otherSubContent)
My full answer is here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With