Tip: Add Drop Shadows

A video of this tip can be found on LinkedIn Learning

User Interfaces often use shadows to make them look less flat, but it isn’t obvious how to add one to a view on your app. In this tip, I’ll show you how to make shadows using the CALayer found in UIViews, and a few tricks with them.
I’ve set up a quick starter file with 2 buttons on the main story board you can download from the exercises
I’ve set up several actions for these buttons we’ll use in our demos as you’ll see here in the ViewController
All UIViews have a special property layer of type CALayer. The layer property is great for many quick special effects, some built-in. Drop shadows are one of those built-in effects.

You’ll find a basicDropShadow method in the code. It takes the button and adds drop shadow effects to it. There four basic properties to add. Add this:

button.layer.shadowOpacity = 0.7

The property shadowOpacity defaults to 0. The shadow is always there, but hidden. To show a shadow, change the opacity.
We can also change the radius of the shadow. This affects how blurry the shadow appears. Add this to basicDropShadow

shadowButton.layer.shadowRadius = 5.0

Where the shadow appears is set by the shadowoffset property of CALayer. Add this to basicDropShadow

shadowButton.layer.shadowOffset = CGSize(width: 5.0, height: 2.0) 

For offsets, positive numbers are down and to the right, negative numbers up and to the left.
Down in viewDidLoad add this method for the two buttons.

basicDropShadow(button: button1)
basicDropShadow(button: button2)

Build and run with an iPhone XR to get a pretty nice looking shadow.

Stop the app.

You’ll see I have two more actions available. Both are set to touch down events, one for each button. I wanted to show a few effects you can pull with a drop shadow using some of the others touch events on a button. One effect is to make the button look like it is physically pressed. When pressed, we move the shadow under the button.
In the button1TouchDownInside method add the following code.

sender.layer.shadowOffset = CGSize(width: 0, height: 0)
sender.layer.shadowRadius = 0.5
sender.titleLabel?.layer.shadowOffset = CGSize(width: -5, height: -2)

That will move the drop shadow from the lower left to the upper right, you’ll notice I reset the button to the basic drop shadow when we release the button.
Another trick with drop shadows is to make the button glow underneath when you have a touch down event. I’ll add one new property, shadow color and turn the shadow yellow.

sender.layer.shadowColor = UIColor.yellow.cgColor

This is a CGColor so I Make the UIColor and get the cgColor property for the CGColor. I’ll also make a bigger radius.

 
sender.layer.shadowRadius = 50

Finally to reset the shadow color, I’ll make the shadow black in the basic drop shadow

 
button.layer.shadowColor = UIColor.black.cgColor

Run this. Click button 1 and it appears to move down since the shadow underneath disappears. Click button 2, and when you press down it glows while the button is pressed down.

There’s a lot you can do with drop shadows. With these few simple properties you can add a whole new layer of cool to your apps.

The Whole Code

You can find this code for download here:

//
//  ViewController.swift
//  DropShadowDemo
//
//
//  A Demo for iOS Development Tips Weekly
//  by Steven Lipton (C)2018, All rights reserved
//  For videos go to http://bit.ly/TipsLinkedInLearning
//  For code go to http://bit.ly/AppPieGithub
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var button1: UIButton!
    @IBOutlet weak var button2: UIButton!
    
    // Reset the button shadow 
    @IBAction func buttonTouchedUpInside(_ sender: UIButton) {
        basicDropShadow(button: sender)
    }
    //Pressed down, shadow hides under the button to give a pushing down effect
    @IBAction func button1TouchedDownInside(_ sender: UIButton) {
        sender.layer.shadowOffset = CGSize(width: 0, height: 0)
        sender.layer.shadowRadius = 0.5
    }
    //Pressed down, shadow 'glows' from teh center of the button
    @IBAction func button2TouchDownInside(_ sender: UIButton) {
       sender.layer.shadowColor = UIColor.yellow.cgColor
        sender.layer.shadowRadius = 50
    }

    // The basic shadow setup. 
    func basicDropShadow(button:UIButton){
        button.layer.shadowOpacity = 0.7
        button.layer.shadowRadius = 5.0
        button.layer.shadowOffset = CGSize(width: 5.0, height: 2.0)
        button.layer.shadowColor = UIColor.black.cgColor
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        view.backgroundColor = .lightGray
        basicDropShadow(button: button1)
        basicDropShadow(button: button2)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.