Top

Implementing shadow in iOS

I have been constantly developing iOS apps for the last two years of my life. Doing so, I often came with client requirements where shadows become the main factor for the UI, giving a 3D look and feel to the whole interface. Implementing shadow in iOS is quite easy but there are times, when shadows are complex to deal with and require some brainstorming. Today we will see the implementation of shadows (6-7 types), in Swift as well as Objective-C.

Implementation

First, let us consider a property of UIImageView named ‘imageView’ present in storyboard, on which all the shadows will be implemented.

1. Normal shadow with an offset

If you only apply an offset to the view layer, it will introduce a two-way border shadow. Changing the offset value with the “+” and “-” signs for both width and height will generate two way bordered shadow, according to the applied changes.

Objective-C 

Swift 

And this is what a normal shadow with offset will look like
shadow 1

2. Overall shadow to Image  

Removing the offset value or setting it to zero will make the shadows appear on all the sides of your view.

Objective-C 

Swift 

The overall shadow would look like this
shadow 3

3. Trapezoidal shadow

Creating a trapezoidal shadow below a view will create an impression of the view hanging above, with an in depth shadow below it. Playing around with UIBezierPath can help you achieve this effect and many others.

Objective-C 

Swift 

Below is the image of a trapezoidal shadow
shadow 2

4. Elliptical shadow

It will create a shadow generating the same impact as above, but with a different shadow type(or design), done with UIBezierPath.

Objective-C

Swift 

This is what an Elliptical shadow looks like
shadow 4

5. Curl shadow

It will create an impact as if your view is on a folded superview, posing the shadow of the earlier.

Objective-C 

Swift 

A Curl shadow looks like this
shadow 6

6. Animated shadows

Shadows can be animated very easily by making it look as if light source is focussing on your view while moving around. Playing around with values like animationWithKeyPath, fromValue and toValue, you can bring variations in the animation as you desire.

Objective-C

Swift 

Animated shadow looks like this
shadow

7. Shadow for view with rounded corners

While finding a solution to this question, I found its solution on stackoverflow which is to implement a shadow view behind the actual view you are working on.

Objective-C 

Swift

Just apply rounded corner to your view and call the function on it and you will see how well it works.

Below you can see an image for shadow upon view, with rounded corners.
shadow 5

You can find sample project for shadow implementation in Swift and Objective-C in GitHub.

Hope this tutorial was helpful. Please feel free to come up with interesting ideas and concepts for shadow and leave a comment below for us to check them out.

Manish Kumar

Manish Kumar is an iOS developer at Kolkata, who enjoys building innovative applications. Besides he also loves playing football and listening to songs. He loves challenges and sharing his work in open source community. Lots of iOS objective C development work is going on in Innofied. You can reach us at contact@innofied.com

  • Craig Wedge

    Are you going to update for swift 3 as none work now? Tx

    • Manish Kumar

      Hi @craigwedge:disqus I will update it for Swift 3 soon.

      • Craig Wedge

        Awesome!! Thank you kindly