How to draw shadow around the masked UIView?

Question

I want to make a UIView which will have shape like in Figure 1. and also should have shadow around the shape of my view .

I am using below code to draw CAShaperLayer with UIBezierPath

 UIBezierPath *bezier = [UIBezierPath bezierPath];
  [bezier moveToPoint:CGPointMake(0,7)];
  [bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width-15, 7)];
  [bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width-10,0)];
  [bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width-5, 7)];
  [bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width, 7)];
  [bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width, self.menuView.frame.size.height)];
  [bezier addLineToPoint:CGPointMake(0, self.menuView.frame.size.height)];
  [bezier closePath];
   
   CAShapeLayer *maskLayer = [CAShapeLayer layer];
   maskLayer.path = [bezier CGPath];
   
  self.menuView.layer.mask = maskLayer;

and for adding shadow

self.menuView.layer.shadowColor = [[UIColor colorWithRed:8.0f/255.0f green:37.0f/255.0f blue:82.0f/225.0f alpha:1] CGColor];
    self.menuView.layer.shadowOffset = CGSizeZero;
    self.menuView.layer.shadowOpacity = 0.3f;
    self.menuView.layer.shadowRadius = 5.0f;
    self.menuView.layer.masksToBounds=NO;

My Problem :

After masking CAShaperLayer on menuView ,the shadow has disappeared . Figure 2

Instead of Masking View , i also tried to add Sublayer on it

[self.menuView.layer addSublayer:maskLayer]

but this will hide my all SubViews of MenuView Figure 3

(I have changed the CASahperLayer Color to Black just to show )

My Question is :

What is the best way to get the perfect shape with shadow as shown in Figure 1 ???.

(Thanks in advance)

How about a transparent view fully covered with a background imageView. The image in that imageView can have (from the edges inward) transparent edges, the shadow, and the white body with the triangle. If the menu has variable number of items, the image can be resizable with cap insets. — danh, May 09 '17 at 19:30
if i have to take `ImageView` that would be better to take the Trangle shape image on the top and than i'll put shadow on my View this will work..i think this is alternate solution ,,,but i'm looking for the best way to do this ,,,,,programetically @danh — Dhiru, May 09 '17 at 19:51
Why are you trying to mask/add sublayer ? shouldn't you be do something like this : `self.layer.shadowPath = someBezierPath` ? — Gocy015, May 10 '17 at 10:41
without adding/masking View , will i get the ?? i may get the Shadow only @Gocy015 — Dhiru, May 10 '17 at 10:57
@Dhiru , so you are using CAShapeLayer to create that little triangle on the top. Adding a mask to a layer will for sure clip its shadow. The workaround maybe adding a superview to hold the entire view ,then add shadow on the superview ,or overriding `drawRect` to draw that triangle instead. — Gocy015, May 11 '17 at 07:01
@danh and Gocy015 , both have given good suggestions ,,,,i want to just ask , is it impossible to do what i want without any help of other View/ImageView ?? — Dhiru, May 12 '17 at 11:20
@Dhiru http://stackoverflow.com/questions/805872/how-do-i-draw-a-shadow-under-a-uiview — sandy, May 18 '17 at 09:57

score -1 · Answer 1 · answered Jun 22 '17 at 05:12

-1

extension UIView{

    func viewShadowBorder()  {
        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOpacity = 1
        self.layer.shadowOffset = CGSize.zero
        self.layer.shadowRadius = 2
        self.layer.cornerRadius = 2
    }
    }

answered Jun 22 '17 at 05:12

Chetu

428
1
7
19

@Dhiru Check if your view background is clear then it will not work.So – Chetu Jun 22 '17 at 09:08
i tried all the things , i think when we mask any View with `CAShaperLayer` we have no longer access to `CALayer` of view . – Dhiru Jun 22 '17 at 09:11

How to draw shadow around the masked UIView?

1 Answers1