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:
...while not want see shadow beneath view this:
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:
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
Post a Comment