ios - Draw Drop Shadow Outside UIView -


background

i have uiview following properties:

  • alpha = 1
  • backgroundcolor = white, 0.35 opacity
  • rounded corners
  • drop shadow

code

this how create drop shadow: (uiview extension)

self.layer.maskstobounds = false self.layer.shadowcolor = uicolor.darkgraycolor().cgcolor self.layer.shadowoffset = cgsizemake(0, 5) self.layer.shadowopacity = 0.35 self.layer.shadowpath = uibezierpath(roundedrect: self.bounds, cornerradius: self.layer.cornerradius).cgpath 

results

this results in following:

current result

...while not want see shadow beneath view this:

wished result

question

how can draw shadow outside view not visible below it?

thanks in advance!

this perhaps more complex need be, here's 1 solution.

extend uiview following method:

extension uiview {     // note: method needs view context taken argument.     func dropshadow(superview: uiview) {         // context superview         uigraphicsbeginimagecontext(self.bounds.size)         superview.drawviewhierarchyinrect(cgrect(x: -self.frame.minx, y: -self.frame.miny, width: superview.bounds.width, height: superview.bounds.height), afterscreenupdates: true)         let image = uigraphicsgetimagefromcurrentimagecontext()         uigraphicsendimagecontext()          // add uiimageview image context subview         let imageview = uiimageview(frame: self.bounds)         imageview.image = image         imageview.layer.cornerradius = self.layer.cornerradius         imageview.clipstobounds = true         self.addsubview(imageview)          // bring background color front, alternatively set uicolor(white: 1, alpha: 0.2)         let brighter = uiview(frame: self.bounds)         brighter.backgroundcolor = self.backgroundcolor ?? uicolor(white: 1, alpha: 0.2)         brighter.layer.cornerradius = self.layer.cornerradius         brighter.clipstobounds = true         self.addsubview(brighter)          // set shadow         self.layer.maskstobounds = false         self.layer.shadowcolor = uicolor.darkgraycolor().cgcolor         self.layer.shadowoffset = cgsizemake(0, 5)         self.layer.shadowopacity = 0.35         self.layer.shadowpath = uibezierpath(roundedrect: self.bounds, cornerradius: self.layer.cornerradius).cgpath     } } 

usage, considering background view named view:

let shadowview = uiview(frame: cgrect(x: 100, y: 100, width: 300, height: 200)) shadowview.layer.cornerradius = 15.0 shadowview.dropshadow(view)  view.addsubview(shadowview) 

which results in view this:

uiview

note: dropshadow method can not called viewdidload causes issues graphics context. so, use method in viewwillappear earliest above result.


here's code background view, in case wants test in playgrounds:

let view = uiview(frame: cgrect(x: 0, y: 0, width: 500, height: 400)) view.backgroundcolor = uicolor.clearcolor()  let color1 = uicolor(hue: 0.39, saturation: 0.7, brightness: 1.0, alpha: 1.0).cgcolor let color2 = uicolor(hue: 0.51, saturation: 0.9, brightness: 0.6, alpha: 1.0).cgcolor  let gradient = cagradientlayer() gradient.frame = view.frame gradient.colors = [color1, color2] gradient.startpoint = cgpoint(x: 0, y: 0) gradient.endpoint = cgpoint(x: 1, y: 1) view.layer.insertsublayer(gradient, atindex: 0) 

Comments

Popular posts from this blog

Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project.Error occurred in starting fork -

windows - Debug iNetMgr.exe unhandle exception System.Management.Automation.CmdletInvocationException -

configurationsection - activeMq-5.13.3 setup configurations for wildfly 10.0.0 -