Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding inner shadow to top of UIView

Tags:

I looked up but I couldn't find how I can add an inner shadow to UIView, only top (from top to bottom) for Swift. What is the best way add inner circle in Swift?

Edit: I've found some questions & answers on SO however they are either in obj-c or looks so complicated. I was just looking for a more Swifty way, if there is any

What I want to achieve:

enter image description here

like image 243
senty Avatar asked Jun 07 '16 01:06

senty


People also ask

How do I add inner shadow to UIView with rounded corners?

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.

How do I make an inner shadow in SwiftUI?

Over to SwiftUI When we're choosing the style to apply, add the shadow() modifier to it to create your inner shadow, specifying the color and radius you want. Now, that by itself will create an inner shadow centered on the image, which means it will apply it equally on all edges.


2 Answers

Here's a pure Swift version that I whipped up:

public class EdgeShadowLayer: CAGradientLayer {      public enum Edge {         case Top         case Left         case Bottom         case Right     }      public init(forView view: UIView,                 edge: Edge = Edge.Top,                 shadowRadius radius: CGFloat = 20.0,                 toColor: UIColor = UIColor.white,                 fromColor: UIColor = UIColor.black) {         super.init()         self.colors = [fromColor.cgColor, toColor.cgColor]         self.shadowRadius = radius          let viewFrame = view.frame          switch edge {             case .Top:                 startPoint = CGPoint(x: 0.5, y: 0.0)                 endPoint = CGPoint(x: 0.5, y: 1.0)                 self.frame = CGRect(x: 0.0, y: 0.0, width: viewFrame.width, height: shadowRadius)             case .Bottom:                 startPoint = CGPoint(x: 0.5, y: 1.0)                 endPoint = CGPoint(x: 0.5, y: 0.0)                 self.frame = CGRect(x: 0.0, y: viewFrame.height - shadowRadius, width: viewFrame.width, height: shadowRadius)             case .Left:                 startPoint = CGPoint(x: 0.0, y: 0.5)                 endPoint = CGPoint(x: 1.0, y: 0.5)                 self.frame = CGRect(x: 0.0, y: 0.0, width: shadowRadius, height: viewFrame.height)             case .Right:                 startPoint = CGPoint(x: 1.0, y: 0.5)                 endPoint = CGPoint(x: 0.0, y: 0.5)                 self.frame = CGRect(x: viewFrame.width - shadowRadius, y: 0.0, width: shadowRadius, height: viewFrame.height)         }     }      required public init?(coder aDecoder: NSCoder) {         fatalError("init(coder:) has not been implemented")     }    } 

To use it,

let topShadow = EdgeShadowLayer(forView: targetView, edge: .Top) targetView.layer.addSublayer(topShadow) 

Note that it defaults to a black-to-white gradient that's 20 points deep.

The full code, with a sample UIViewController that lets you toggle shadows on all four corners of a view, can be found at https://github.com/jrtibbetts/Tenebrae. I've also documented the EdgeShadowLayer pretty thoroughly.

like image 64
NRitH Avatar answered Sep 28 '22 20:09

NRitH


I used implement inner shadow to UIView using Objective-C. I try to translate code into swift. Please forgive me for my poor swift syntax

you can call function below in UIView.didMoveToSuperview

func drawShadow() {     if nil == self.shadowLayer {         let size = self.frame.size         self.clipsToBounds = true         let layer: CALayer = CALayer()         layer.backgroundColor = UIColor.lightGrayColor().CGColor         layer.position = CGPointMake(size.width / 2, -size.height / 2 + 0.5)         layer.bounds = CGRectMake(0, 0, size.width, size.height)         layer.shadowColor = UIColor.darkGrayColor().CGColor         layer.shadowOffset = CGSizeMake(0.5, 0.5)         layer.shadowOpacity = 0.8         layer.shadowRadius = 5.0         self.shadowLayer = layer          self.layer.addSublayer(layer)     } } 
like image 44
J.Hunter Avatar answered Sep 28 '22 20:09

J.Hunter