iOS: MaterialComponents shadow

Question

I want to use the MaterialComponents in my Swift 4 to add shadow to my views but I can't understand how can I use the shadow elevator. I created a class named ShadowedView like the documentation with the same implementation, then in the xib I set the UIView subclass to ShadowedView. But the build failed with this error Use of unresolved identifier 'MDCShadowLayer'. The documentation is not clear for me. Can anyone please explain to me how can I use the MaterialComponents?

Answer 1

Ok, here was what I was able to figure out.

There was a dependency MDCShadowLayerwhich wasn't included by using 'MaterialComponents/ShadowElevations'

I changed my Podfile to the following:

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'

target 'TestMaterialShadow' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for TestMaterialShadow
  pod 'MaterialComponents'
end 

Then pod install

I'm using swift 3 so what worked for me was to use the class like so:

import UIKit

import MaterialComponents

class ShadowView: UIView {

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

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

    func setDefaultElevation() {
        self.shadowLayer.elevation = ShadowElevation.cardResting
    }

}

Note the change in setDefaultElevation() There appear to be other settings such as ShadowElevation.carPickedUp etc which you can use autocomplete to explore yourself.

Then I created a UIView using interface builder, set it's class to what I called ShadowView, and created an outlet to it, named here as myView in the ViewController.

Then in ViewDidLoad:

myView.setDefaultElevation()

Just as a suggestion, you'd probably save yourself a lot of trouble if you just create your own shadows for your views. Using that Material Library is a lot of dependencies for very little in return

Answer 2

You don't need to import whole MaterialComponnent.
Simply add pod MaterialComponents/ShadowLayer to your pods.