Shadow Layer

Shadow Layer implements the Material Design specifications for elevation and shadows. By simulating the physical properties of paper, elevation and light source, shadows give visual depth to components. Shadow Layer provides an elevation property which affects a shadow‘s depth and strength, automatically handling shadow diffusion based on the shadow’s elevation.

Design & API Documentation

MDCShadowLayer

MDCShadowLayer provides a Core Animation CALayer that will render a shadow based on its elevation property. UIViews can utilize this by overriding their layerClass method to return MDCShadowLayer.

elevation sets the diffusion level of the shadow. The higher the shadow elevation, the more diffused the shadow becomes. Elevation uses points as a unit to specify height. Common shadow elevations are defined in MDCShadowElevations and range from 0 to 24 points. The shadow diffusion effect diminishes as elevations exceed 24 points.

Set shadowMaskEnabled to ensure the interior, non-shadow portion of the layer is visible. This is enabled by default and the internal portion of the layer is cut out.

MDCShadowMetrics

MDCShadowMetrics is a series of properties used to set MDCShadowLayer. MDCShadowLayer consists of two distinct layers. The overlay of these two layers generates a single Material Design shadow that adheres to defined height and light source principles.

Installation

Requirements

• Xcode 7.0 or higher.
• iOS SDK version 7.0 or higher.

Installation with CocoaPods

To add this component to your Xcode project using CocoaPods, add the following to your Podfile:

pod 'MaterialComponents/ShadowLayer'

Then, run the following command:

pod install

Usage

Importing

Before using Shadow Layer, you'll need to import it:

Swift

import MaterialComponents

Objective-C

#import "MaterialShadowLayer.h"

Example of a custom button based on UIButton with Material Design shadows:

Swift

class ShadowButton: UIButton {

  override class var layerClass: AnyClass {
    return MDCShadowLayer.self
  }

}

Objective C

@interface ShadowButton : UIButton

@end

@implementation ShadowButton

+ (Class)layerClass {
  return [MDCShadowLayer class];
}

@end

Add the custom button to view:

Swift

let button: ShadowButton = ShadowButton.init(type: .system)
button.frame = CGRect(x: 100, y: 100, width: 200, height: 50)
button.setTitle("Button", for: .normal)
let buttonLayer = button.layer as! MDCShadowLayer
buttonLayer.elevation = 6.0
addSubview(button)

Objective C

ShadowButton *button = [ShadowButton buttonWithType:UIButtonTypeSystem];
button.frame = CGRectMake(100, 100, 200, 50);
[button setTitle: @"Button" forState:UIControlStateNormal];
[(MDCShadowLayer *)button.layer setElevation:6.f];
[self addSubview:button];

Creating a custom UIView with a shadow:

Swift

class ShadowedView: UIView {

  override class var layerClass: AnyClass {
    return MDCShadowLayer.self
  }

  var shadowLayer: MDCShadowLayer {
    return self.layer as! MDCShadowLayer
  }

  func setElevation(points: CGFloat) {
    self.shadowLayer.elevation = points
  }

}

Objective C

@interface ShadowedView : UIView
@end

@implementation ShadowedView

+ (Class)layerClass {
  return [MDCShadowLayer class];
}

- (MDCShadowLayer)shadowLayer {
  return (MDCShadowLayer *)self.layer;
}

- (void)setElevation:(CGFloat)points {
  [(MDCShadowLayer *)self.layer setElevation:points];
}

@end

To improve performance, consider rasterizing MDCShadowLayer when the view using the shadow is not animating or changing size.

Swift

layer.shouldRasterize = true
layer.rasterizationScale = UIScreen.main.scale

Objective C

self.layer.shouldRasterize = YES;
self.layer.rasterizationScale = [UIScreen mainScreen].scale;

Disable rasterization before animating MDCShadowLayer.

Related Components