CODEWITHSUNDEEP
ios
azamsharp
azamsharp

Reputation: 20066

UIView Round Corners with Shadow

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:

enter image description here

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];

Upvotes: 17

Views: 17682

Answers (3)

Piyush Lodaliya
Piyush Lodaliya

Reputation: 11

You can do it with a single view by applying following:

1. Firstly add a corner radius

yourview.layer.cornerRadius = 5.0

2. Call a function below

shadowToView(view : yourview)


func shadowToView(view : UIView){
    view.layer.shadowOffset = CGSize(width: 0, height: 3)
    view.layer.shadowOpacity = 0.6
    view.layer.shadowRadius = 3.0
    view.layer.shadowColor = UIColor.darkGray.cgColor
}

Upvotes: 1

Suragch
Suragch

Reputation: 511786

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).

enter image description here

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.

Upvotes: 10

iSofTom
iSofTom

Reputation: 1718

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.

Upvotes: 11

Related Questions